@font-face {
  font-family: "ecoerg";
  src: url("/static/fonts/Nexa-Heavy.ttf");
}

:root {
  --font-familly: "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-size: 15px;
  --font-color: rgb(220, 236, 245);
  --font-color-unselected: rgb(130, 146, 155);
  --font-color-hover: rgb(216, 229, 255);

  --background-color: rgb(25, 34, 34);

  --grid-rows: 3;
  --grid-cols: 3;

  --border-color-unselected: solid thin rgb(41, 72, 82);
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  line-height: 1.5rem;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  align-items: center;

  color: var(--font-color);
  text-rendering: optimizeSpeed;

  background: var(--background-color);
}

html {
  font-size: var(--font-size);
  font-family: var(--font-familly);
}

main {
  position: absolute;
  top: 55px;
  right: 0px;
  bottom: 55px;
  left: 0px;

  background-color: rgb(236, 236, 209);
  padding: 10px;
  margin: 0;
}

footer {
  position: absolute;
  bottom: 0;
  height: 55px;
  width: 100%;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  background-color: #333;
  color: white;
}