@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');

:root {
  /* FONT */
  --FF: "Geist", Arial, sans-serif;
  --FS-M: clamp(1rem, 2vh, 1.2rem);
  --FS: clamp(1.2rem, 3vh, 1.5rem);

  /* COLOR */
  --BKGCOLOR: #161819;
  --FNTCOLOR: #D6CABD;
  --LNKCOLOR: rgb(51, 147, 179);

  /* GENERAL */
  --PADDING: 15%;
}

body {
  background-color: var(--BKGCOLOR);
  color: var(--FNTCOLOR);
  font-family: var(--FF);
  font-size: var(--FS);
  padding: var(--PADDING);
}

main, footer {
  line-height: 2;
}

a {
  color: var(--FNTCOLOR);
  text-decoration: none;
}

a:hover {
  color: var(--LNKCOLOR);
  transition: color 0.5s ease;
}

ul {
  padding-left: 0;
}

li {
  display: inline-block;
  margin-inline: 0.5rem;
}

/* || Mobile Device */
@media screen and (max-width: 480px) {
  body {
    font-size: var(--FS-M);
  }
}