/* fonts */

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

@font-face {
  font-family: "game";
  src:
    url("/fonts/game-bold.woff2") format("woff2"),
    url("/fonts/game-bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* body */

body {
  min-height: 100dvh;
  margin: 0;
  background-color: #ffffff !important;
  font-family: "game";
  word-spacing: 1px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

/* home */

.centered-box-home {
  background-color: transparent;
  box-sizing: border-box;
  overflow: hidden;
  margin: 0px 20px 0px 20px;
  max-width: 260px;
  width: 100%;
}

.title-box {
  display: inline-flex;
  flex-direction: column;
  background-color: transparent;
  box-sizing: border-box;
  overflow: hidden;
  justify-self: center;
  justify-items: center;
  margin: 20px auto 25px auto;
  max-width: 300px;
}

.title {
  font-size: 3.9em;
  padding-left: 3px;
  margin: 0px;
  color: #bbb8e6;
  text-align: center;
  white-space: nowrap;
}

.title-highlight {
  font-weight: bold;
}

.marquee {
  text-align: center;
  margin: 4px auto 20px auto;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
}

.marquee span {
  display: inline-block;
  font-size: 1.2em;
  font-weight: normal;
  padding-left: 100%;
  animation: marquee 5s linear infinite;
  color: #bbb8e6;
}

@keyframes marquee {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}

.subtitle-year {
  font-size: 1.5em;
  color: #64606e;
  margin: 0px 0px 0px 0px;
}

.category {
  margin-top: 10px;
  margin-bottom: 25px;
}

.song-title-link {
  list-style-type: none;
  color: #56588f;
  display: flex;
  text-decoration: none;
  margin: 0px 0px 10px 1px;
}

.song-title-home {
  font-size: 1.58em;
  font-weight: bold;
  margin: 0px;
  white-space: nowrap;
  color: #56588f;
  flex: 1;
}

.note-symbol {
  font-weight: normal;
  position: relative;
  font-size: 1em;
  color: #9ea1ff;
}

.new-symbol {
  position: relative;
  font-size: 0.7em;
  color: #9ea1ff;
  bottom: 1px;
}

.home-link-box {
  display: flex;
  margin: 10px 20px 0px 20px;
}

.home-link {
  margin: 10px 15px 60px 15px;
  text-decoration: none;
  font-weight: bold;
  color: #56588f;
}

.logo {
  opacity: 0.94;
}

/* song */

.centered-box-song {
  background-color: transparent;
  box-sizing: border-box;
  overflow: hidden;
  margin: 20px 50px 60px 60px;
  max-width: 240px;
  width: 100%;
}

.song-title-date {
  list-style-type: none;
  display: flex;
}

.song-title-song {
  font-size: 1.9em;
  margin: 0px;
  white-space: nowrap;
  color: #64606e;
  flex: 1;
}

.release-date {
  font-weight: normal;
  font-size: 1em;
  white-space: nowrap;
  color: #64606e;
  margin: 5px 0px 0px 0px;
}

.note-symbol-song {
  font-weight: normal;
  font-size: 3em;
  margin-top: 0px;
  margin-bottom: 0px;
  flex: 1;
}

.song-type {
  display: flex;
}

.song-type-name {
  font-size: 1em;
  font-weight: bold;
  color: #56588f;
  margin: 40px 0px 0px 0px;
}

.name {
  font-size: 1.2em;
  margin: 0px 0px 20px 0px;
  color: #64606e;
}

.song-info {
  margin-left: 0px;
}

.subtitle-song {
  font-size: 1.5em;
  color: #4f4b57;
  margin: 15px 0px 0px 0px;
}

.credits {
  font-size: 0.9em;
  color: #64606e;
  margin: 0px 0px 0px 0px;
}

.links {
  margin-top: 10px;
  margin-bottom: 15px;
}

.link {
  font-size: 1.29em;
  font-weight: bold;
  color: #64606e;
  display: inline-block;
  margin-bottom: 7px;
  text-decoration: none;
}

.link-symbol {
  position: relative;
  font-size: 0.65em;
  color: #64606e;
  bottom: 3px;
}

.notes-symbol {
  font-weight: normal;
  position: relative;
  font-size: 1.2em;
  margin: 0px;
}

.page-links {
  margin-top: 0px;
  margin-bottom: 15px;
}

.notes-link {
  font-size: 1.29em;
  font-weight: bold;
  text-decoration: none;
  margin: 0px 0px 0px -5px;
  color: #64606e;
}

.back-link {
  font-size: 1em;
  text-decoration: none;
  color: #64606e;
  display: inline-block;
  white-space: nowrap;
  margin: 30px 0px 10px 0px;
}

/* notes */

.centered-box-notes {
  box-sizing: border-box;
  overflow: hidden;
  margin: 40px 0px 50px 0px;
  max-width: 350px;
  width: 100%;
}

.notes-box {
  padding: 35px 45px 20px 45px;
  margin-top: 0px;
  margin-bottom: 15px;
  background-color: #f5f5f5;
}

.notes-text {
  font-size: 1.1em;
  color: #35365c;
  display: inline-block;
  line-height: 1.3;
}

.notes-date {
  font-size: 1em;
  font-weight: 1000;
  color: #35365c;
  margin: 0;
}

/* colors */

.eternity {
  color: #88d1e3;
}

.back-to-life {
  color: #d6abd5;
}

.you-and-i {
  color: #a1d1a9;
}

.rescue-me {
  color: #a2b8e8;
}

.the-end {
  color: #bdbdbd;
}