@font-face {
  font-family: "aosagi";
  src:
    url("/assets/fonts/aosagi.woff2") format("woff2"),
    url("/assets/fonts/aosagi.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Credible";
  src:
    url("/assets/fonts/Credible-Regular.woff2") format("woff2"),
    url("/assets/fonts/Credible-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html,
body {
  margin: 0;
  height: 100dvh;
  overflow: hidden;
}

html {
  font-family: "aosagi", "Times New Roman", Times, serif;
  line-height: 1.5rem;
}

body {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#main {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 80dvh;
  width: 100dvw;
  padding: 10dvh 16dvw;
  overflow-y: scroll;
  overflow-x: hidden;
}

p,
li {
  max-width: 28rem;
}

.img-container {
  display: flex;
  justify-content: center;
  max-height: 140px;
  padding: 2%;
}

#neebu {
  position: absolute;
  top: 3dvh;
  left: 85dvw;
  max-width: 16dvw;
}

.coming-soon-section {
  transform: translateY(3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}

#coming-soon-text {
  width: 100%;
  transform: translateY(-4.5rem);
}

#coming-soon-desc {
  transform: translateY(-120%);
  margin-bottom: 10dvh;
}

.lyrics {
  font-family:
    "Credible", "Palatino Linotype", "Palatino", "Book Antiqua", Georgia, serif;
  text-align: center;
}

a {
  color: #118ab2;
}

@media (min-width: 768px) {
  #main {
    padding: 10dvh 21dvw;
  }

  .coming-soon-section {
    transform: translateY(0);
  }

  #coming-soon-text {
    width: 70%;
    transform: translateY(1.5rem);
  }

  #neebu {
    left: 83dvw;
  }
}

@media (min-width: 1025px) {
}