/* src/templates/css/pages/home.css */
body {
  color: var(-dark-fg);
  background-color: var(-dark-bg);
}
a {
  color: var(-dark-cyan);
}
main {
  font-family: var(--font-mono);
  font-size: calc((20 / 16) * 1em);
}
#logo {
  width: 1150px;
}
@keyframes moveup {
  from {
    transform: translateY(60px);
  }
  to {
    transform: translateY(0px);
  }
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes wait {
  from {
    opacity: 0;
  }
  to {
    opacity: 0;
  }
}
#logo {
  animation: moveup 0.5s cubic-bezier(0, 0.55, 0.45, 1), fadein 0.5s cubic-bezier(0.61, 1, 0.88, 1);
}
.text p {
  animation:
    wait 0.10s,
    moveup 0.5s cubic-bezier(0, 0.55, 0.45, 1) 0.10s,
    fadein 0.5s cubic-bezier(0.61, 1, 0.88, 1) 0.10s;
}
nav {
  animation:
    wait 0.2s,
    moveup 0.5s cubic-bezier(0, 0.55, 0.45, 1) 0.2s,
    fadein 0.5s cubic-bezier(0.61, 1, 0.88, 1) 0.2s;
}
@media only screen and (max-width: 1600px) {
  main {
    padding: 0px 7vw;
  }
  #logo {
    width: 1080px;
  }
}
@media only screen and (max-width: 1300px) {
  main {
    padding: 0px 5vw;
    font-size: 18px;
  }
  #logo {
    width: 100%;
  }
}
@media only screen and (max-width: 842px) {
  main {
    font-size: calc((16 / 16) * 1em);
  }
}