/* return font size based on string length */
/* return font size based on string length */
/* webkit scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgb(60, 60, 60);
}

::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.83);
}

body::-webkit-scrollbar-track {
  background-color: black;
}

/* guide scrollbar */
.guide-container ::-webkit-scrollbar-thumb,
.guide-container ::-webkit-scrollbar-track {
  background-color: transparent;
}

* {
  /* mozilla scrollbar */
  scrollbar-color: transparent black !important;
  scrollbar-width: thin !important;
}

/* return font size based on string length */
/* cover */
#cover {
  width: 100vw;
  height: 100vh;
  background-color: black;
  z-index: 1;
}

#progress-bar {
  width: 50%;
  height: 5px;
  background-color: #222;
}

#meter {
  width: 0;
  height: 5px;
  background-color: gray;
  border-radius: 5px;
}

#error-msg {
  padding: 0 15px 0 15px;
  text-align: center;
  line-height: 30px;
  font-size: 22px;
}

#refresh {
  border-radius: 50%;
  background-color: rgb(60, 60, 60);
  color: rgba(255, 255, 255, 0.8);
  width: 40px;
  height: 40px;
  margin: 10px 0 0 0;
  padding: 4px 0 0 0;
  cursor: pointer;
  border: none;
}
#refresh:hover {
  background-color: rgba(60, 60, 60, 0.8);
}

/* return font size based on string length */
#main-container {
  overflow-y: hidden;
}
#main-container.dt {
  background-image: linear-gradient(to top, black, transparent);
}
#main-container:hover {
  scrollbar-color: rgb(30, 30, 30) black !important;
}
#main-container:hover::-webkit-scrollbar-thumb {
  background-color: rgb(30, 30, 30);
}

.banner {
  padding: 0 0 0 0;
  background-color: transparent;
  border: none;
  cursor: pointer;
}
.banner div:nth-child(1) {
  filter: brightness(35%);
}
.banner > .dt {
  width: 100px;
  height: 800px;
  box-shadow: inset 0 -800px 800px -500px rgba(0, 0, 0, 0.8);
  background-size: cover;
  transition: filter 0.2s;
}
.banner:hover > .dt {
  filter: brightness(70%);
  transition: 0.2s;
  color: white;
}
.banner > .mb {
  width: 100vw;
  height: 25vw;
  box-shadow: inset 100px 0px 90px -90px rgba(0, 0, 0, 0.8), inset -100px 0px 90px -90px rgba(0, 0, 0, 0.8);
  background-size: cover;
}

.main-name {
  width: 100%;
  height: 100%;
  transform: translateY(-100%);
}

.vertical-text {
  font-family: "Raleway";
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 8px;
  color: rgba(255, 255, 255, 0.7);
}
.vertical-text.dt {
  writing-mode: vertical-lr;
  text-orientation: upright;
}

.build-no {
  margin: 15px 0 0 0;
  font-size: 12px;
}

.rec-signets {
  margin: 10px 0 10px 0;
}

.signet {
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.8;
}

.anchor {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: rgba(78, 78, 78, 0.2);
  font-family: "Raleway";
  font-weight: bold;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.8);
}
.anchor:hover {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.8);
  color: black;
}
.anchor a {
  font-size: 0px;
}

.link-spanner {
  width: 100%;
  height: 100%;
  transform: translate(-23px, -15px);
}

.sig-tog {
  width: 32px;
  height: 32px;
}

.sig-sep {
  width: 40px;
  height: 40px;
}

.signet label {
  padding: 40px 0 0 0;
  font-family: "Times New Roman", Times, serif;
  font-size: 10px;
}

.buff-tbl {
  margin: 10px 0 20px 0;
}

.emblem-support {
  justify-content: space-between;
  width: 90%;
}

@media only screen and (max-width: 400px) {
  .emblem-support {
    flex-direction: column;
  }
  .emblem, .supp {
    width: 100% !important;
  }
}
.emblem {
  width: 40%;
}
.emblem .tooltip {
  transform: translateY(-50px);
}
.emblem .tooltip input {
  height: 50px;
}
.emblem table {
  width: 100%;
}
.emblem table td:nth-child(2), .emblem table th:nth-child(2), .emblem #about table th:nth-child(2), #about .emblem table th:nth-child(2), .emblem table td:nth-child(3), .emblem table th:nth-child(3), .emblem #about table th:nth-child(3), #about .emblem table th:nth-child(3) {
  width: 50px;
}
.emblem .pic {
  width: 50px;
  height: 50px;
}

.supp {
  width: 55%;
  height: 150px;
}
.supp .tooltip {
  transform: translateY(-50px);
}
.supp .tooltip input {
  height: 50px;
}
.supp table {
  width: 100%;
}
.supp p {
  color: transparent;
}
.supp .pic {
  height: 50px;
}
.supp .supp-pic:hover .pic {
  filter: brightness(50%);
  transition: 0.3s;
}
.supp .supp-pic:hover p {
  color: rgba(255, 255, 255, 0.8);
  transition: 0.3s;
}

.emblem span, .supp span {
  transform: translateY(-22px);
}

.buff-tbl,
.exclusive-tbl,
.transitional-tbl,
.main-tbl,
.secondary-tbl,
.optional-tbl {
  width: 50%;
  min-width: 90%;
}
.buff-tbl:not(.exclusive-tbl) th:nth-child(1),
.exclusive-tbl:not(.exclusive-tbl) th:nth-child(1),
.transitional-tbl:not(.exclusive-tbl) th:nth-child(1),
.main-tbl:not(.exclusive-tbl) th:nth-child(1),
.secondary-tbl:not(.exclusive-tbl) th:nth-child(1),
.optional-tbl:not(.exclusive-tbl) th:nth-child(1) {
  width: 20%;
}

.gear-tbl {
  margin: 10px 0 0 0;
  width: 320px;
}
.gear-tbl .tooltip {
  transform: translateY(-100px);
}
.gear-tbl .tooltip input {
  height: 100px;
}
.gear-tbl tr:not(thead tr) {
  height: 80px;
}
.gear-tbl span {
  transform: translateY(-2px);
}
.gear-tbl .pic {
  width: 80px;
  height: 80px;
}

.pic {
  background: center/cover;
}
.pic:not(.hawp) {
  cursor: pointer;
}

.tooltip {
  width: 100%;
  height: 100%;
}
.tooltip p {
  transform: translateY(18px);
  height: 25px;
}
.tooltip span {
  visibility: hidden;
  text-align: center;
  white-space: nowrap;
  background-color: rgb(34, 34, 34);
  padding: 5px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.2s;
}
.tooltip input {
  width: 100%;
  appearance: none;
  cursor: pointer;
}
.tooltip input:checked + span {
  visibility: visible;
  opacity: 1;
}

.notes {
  margin: 20px 0 20px 0;
  padding: 20px;
  width: 85%;
  font-size: 14px;
  line-height: 20px;
}
.notes:hover {
  background-color: rgba(255, 255, 255, 0.8);
  color: black;
}
.notes p {
  font-weight: bold;
}
.notes span {
  font-style: italic;
}

/* return font size based on string length */
/* banner images and name sizes */
#aka-dt {
  background-image: url("../img/Argent_Knight_Artemis_dt.png");
}
#aka-dt ~ .main-name > .dt {
  font-size: 22px;
}

#aka-mb {
  background-image: url("../img/Argent_Knight_Artemis_mb.png");
}
#aka-mb ~ .main-name > .mb {
  font-size: 7vw;
}

#aponia-dt {
  background-image: url("../img/Disciplinary_Perdition_dt.png");
}
#aponia-dt ~ .main-name > .dt {
  font-size: 20px;
}

#aponia-mb {
  background-image: url("../img/Disciplinary_Perdition_mb.png");
}
#aponia-mb ~ .main-name > .mb {
  font-size: 7vw;
}

#bke-dt {
  background-image: url("../img/Bright_Knight_Excelsis_dt.png");
}
#bke-dt ~ .main-name > .dt {
  font-size: 20px;
}

#bke-mb {
  background-image: url("../img/Bright_Knight_Excelsis_mb.png");
}
#bke-mb ~ .main-name > .mb {
  font-size: 7vw;
}

#carole-dt {
  background-image: url("../img/Sweet_n_Spicy_dt.png");
}
#carole-dt ~ .main-name > .dt {
  font-size: 35px;
}

#carole-mb {
  background-image: url("../img/Sweet_n_Spicy_mb.png");
}
#carole-mb ~ .main-name > .mb {
  font-size: 7vw;
}

#cn-dt {
  background-image: url("../img/Chrono_Navi_dt.png");
}
#cn-dt ~ .main-name > .dt {
  font-size: 38px;
}

#cn-mb {
  background-image: url("../img/Chrono_Navi_mb.png");
}
#cn-mb ~ .main-name > .mb {
  font-size: 9vw;
}

#da-dt {
  background-image: url("../img/Dea_Anchora_dt.png");
}
#da-dt ~ .main-name > .dt {
  font-size: 35px;
}

#da-mb {
  background-image: url("../img/Dea_Anchora_mb.png");
}
#da-mb ~ .main-name > .mb {
  font-size: 9vw;
}

#dw-dt {
  background-image: url("../img/Dreamweaver_dt.png");
}
#dw-dt ~ .main-name > .dt {
  font-size: 35px;
}

#dw-mb {
  background-image: url("../img/Dreamweaver_mb.png");
}
#dw-mb ~ .main-name > .mb {
  font-size: 9vw;
}

#eden-dt {
  background-image: url("../img/Golden_Diva_dt.png");
}
#eden-dt ~ .main-name > .dt {
  font-size: 35px;
}

#eden-mb {
  background-image: url("../img/Golden_Diva_mb.png");
}
#eden-mb ~ .main-name > .mb {
  font-size: 9vw;
}

#elysia-dt {
  background-image: url("../img/Miss_Pink_Elf_dt.png");
}
#elysia-dt ~ .main-name > .dt {
  font-size: 35px;
}

#elysia-mb {
  background-image: url("../img/Miss_Pink_Elf_mb.png");
}
#elysia-mb ~ .main-name > .mb {
  font-size: 8vw;
}

#fischl-dt {
  background-image: url("../img/Prinzessin_der_Verurteilung_dt.png");
}
#fischl-dt ~ .main-name > .dt {
  font-size: 16px;
}

#fischl-mb {
  background-image: url("../img/Prinzessin_der_Verurteilung_mb.png");
}
#fischl-mb ~ .main-name > .mb {
  font-size: 7vw;
}

#fr-dt {
  background-image: url("../img/Fallen_Rosemary_dt.png");
}
#fr-dt ~ .main-name > .dt {
  font-size: 30px;
}

#fr-mb {
  background-image: url("../img/Fallen_Rosemary_mb.png");
}
#fr-mb ~ .main-name > .mb {
  font-size: 7vw;
}

#gm-dt {
  background-image: url("../img/Goushinnso_Memento_dt.png");
}
#gm-dt ~ .main-name > .dt {
  font-size: 26px;
}

#gm-mb {
  background-image: url("../img/Goushinnso_Memento_mb.png");
}
#gm-mb ~ .main-name > .mb {
  font-size: 7vw;
}

#griseo-dt {
  background-image: url("../img/Starry_Impression_dt.png");
}
#griseo-dt ~ .main-name > .dt {
  font-size: 26px;
}

#griseo-mb {
  background-image: url("../img/Starry_Impression_mb.png");
}
#griseo-mb ~ .main-name > .mb {
  font-size: 6vw;
}

#hofi-dt {
  background-image: url("../img/Herrscher_of_Finality_dt.png");
}
#hofi-dt ~ .main-name > .dt {
  font-size: 22px;
}

#hofi-mb {
  background-image: url("../img/Herrscher_of_Finality_mb.png");
}
#hofi-mb ~ .main-name > .mb {
  font-size: 7vw;
}

#hofs-dt {
  background-image: url("../img/Herrscher_of_Flamescion_dt.png");
}
#hofs-dt ~ .main-name > .dt {
  font-size: 20px;
}

#hofs-mb {
  background-image: url("../img/Herrscher_of_Flamescion_mb.png");
}
#hofs-mb ~ .main-name > .mb {
  font-size: 7vw;
}

#hoh-dt {
  background-image: url("../img/Herrscher_of_Human_Ego_dt.png");
}
#hoh-dt ~ .main-name > .dt {
  font-size: 20px;
}

#hoh-mb {
  background-image: url("../img/Herrscher_of_Human_Ego_mb.png");
}
#hoh-mb ~ .main-name > .mb {
  font-size: 7vw;
}

#hoo-dt {
  background-image: url("../img/Herrscher_of_Origin_dt.png");
}
#hoo-dt ~ .main-name > .dt {
  font-size: 22px;
}

#hoo-mb {
  background-image: url("../img/Herrscher_of_Origin_mb.png");
}
#hoo-mb ~ .main-name > .mb {
  font-size: 7vw;
}

#hor-dt {
  background-image: url("../img/Herrscher_of_Reason_dt.png");
}
#hor-dt ~ .main-name > .dt {
  font-size: 22px;
}

#hor-mb {
  background-image: url("../img/Herrscher_of_Reason_mb.png");
}
#hor-mb ~ .main-name > .mb {
  font-size: 7vw;
}

#hos-dt {
  background-image: url("../img/Herrscher_of_Sentience_dt.png");
}
#hos-dt ~ .main-name > .dt {
  font-size: 20px;
}

#hos-mb {
  background-image: url("../img/Herrscher_of_Sentience_mb.png");
}
#hos-mb ~ .main-name > .mb {
  font-size: 7vw;
}

#hot-dt {
  background-image: url("../img/Herrscher_of_Thunder_dt.png");
}
#hot-dt ~ .main-name > .dt {
  font-size: 22px;
}

#hot-mb {
  background-image: url("../img/Herrscher_of_Thunder_mb.png");
}
#hot-mb ~ .main-name > .mb {
  font-size: 7vw;
}

#hotr-dt {
  background-image: url("../img/Herrscher_of_Truth_dt.png");
}
#hotr-dt ~ .main-name > .dt {
  font-size: 24px;
}

#hotr-mb {
  background-image: url("../img/Herrscher_of_Truth_mb.png");
}
#hotr-mb ~ .main-name > .mb {
  font-size: 7vw;
}

#hov-dt {
  background-image: url("../img/Herrscher_of_the_Void_dt.png");
}
#hov-dt ~ .main-name > .dt {
  font-size: 22px;
}

#hov-mb {
  background-image: url("../img/Herrscher_of_the_Void_mb.png");
}
#hov-mb ~ .main-name > .mb {
  font-size: 7vw;
}

#kira-dt {
  background-image: url("../img/Sugary_Starburst_dt.png");
}
#kira-dt ~ .main-name > .dt {
  font-size: 30px;
}

#kira-mb {
  background-image: url("../img/Sugary_Starburst_mb.png");
}
#kira-mb ~ .main-name > .mb {
  font-size: 7vw;
}

#lk-dt {
  background-image: url("../img/Luna_Kindred_dt.png");
}
#lk-dt ~ .main-name > .dt {
  font-size: 35px;
}

#lk-mb {
  background-image: url("../img/Luna_Kindred_mb.png");
}
#lk-mb ~ .main-name > .mb {
  font-size: 9vw;
}

#mc-dt {
  background-image: url("../img/Fervent_Tempo_dt.png");
}
#mc-dt ~ .main-name > .dt {
  font-size: 32px;
}

#mc-mb {
  background-image: url("../img/Fervent_Tempo_mb.png");
}
#mc-mb ~ .main-name > .mb {
  font-size: 7vw;
}

#mobius-dt {
  background-image: url("../img/Infinite_Ouroboros_dt.png");
}
#mobius-dt ~ .main-name > .dt {
  font-size: 26px;
}

#mobius-mb {
  background-image: url("../img/Infinite_Ouroboros_mb.png");
}
#mobius-mb ~ .main-name > .mb {
  font-size: 8vw;
}

#nyx-dt {
  background-image: url("../img/Starchasm_Nyx_dt.png");
}
#nyx-dt ~ .main-name > .dt {
  font-size: 35px;
}

#nyx-mb {
  background-image: url("../img/Starchasm_Nyx_mb.png");
}
#nyx-mb ~ .main-name > .mb {
  font-size: 7vw;
}

#pardo-dt {
  background-image: url("../img/Reverist_Calico_dt.png");
}
#pardo-dt ~ .main-name > .dt {
  font-size: 30px;
}

#pardo-mb {
  background-image: url("../img/Reverist_Calico_mb.png");
}
#pardo-mb ~ .main-name > .mb {
  font-size: 7vw;
}

#pe-dt {
  background-image: url("../img/Palatinus_Equinox_dt.png");
}
#pe-dt ~ .main-name > .dt {
  font-size: 26px;
}

#pe-mb {
  background-image: url("../img/Palatinus_Equinox_mb.png");
}
#pe-mb ~ .main-name > .mb {
  font-size: 8vw;
}

#raven-dt {
  background-image: url("../img/Midnight_Absinthe_dt.png");
}
#raven-dt ~ .main-name > .dt {
  font-size: 26px;
}

#raven-mb {
  background-image: url("../img/Midnight_Absinthe_mb.png");
}
#raven-mb ~ .main-name > .mb {
  font-size: 8vw;
}

#ri-dt {
  background-image: url("../img/Ritual_Imayoh_dt.png");
}
#ri-dt ~ .main-name > .dt {
  font-size: 35px;
}

#ri-mb {
  background-image: url("../img/Ritual_Imayoh_mb.png");
}
#ri-mb ~ .main-name > .mb {
  font-size: 8vw;
}

#sk-dt {
  background-image: url("../img/Shadow_Knight_dt.png");
}
#sk-dt ~ .main-name > .dt {
  font-size: 35px;
}

#sk-mb {
  background-image: url("../img/Shadow_Knight_mb.png");
}
#sk-mb ~ .main-name > .mb {
  font-size: 7vw;
}

#sn-dt {
  background-image: url("../img/Stygian_Nymph_dt.png");
}
#sn-dt ~ .main-name > .dt {
  font-size: 35px;
}

#sn-mb {
  background-image: url("../img/Stygian_Nymph_mb.png");
}
#sn-mb ~ .main-name > .mb {
  font-size: 7vw;
}

#spa-dt {
  background-image: url("../img/Spina_Astera_dt.png");
}
#spa-dt ~ .main-name > .dt {
  font-size: 35px;
}

#spa-mb {
  background-image: url("../img/Spina_Astera_mb.png");
}
#spa-mb ~ .main-name > .mb {
  font-size: 9vw;
}

#ss-dt {
  background-image: url("../img/Sixth_Serenade_dt.png");
}
#ss-dt ~ .main-name > .dt {
  font-size: 30px;
}

#ss-mb {
  background-image: url("../img/Sixth_Serenade_mb.png");
}
#ss-mb ~ .main-name > .mb {
  font-size: 7vw;
}

#sus-dt {
  background-image: url("../img/Jade_Knight_dt.png");
}
#sus-dt ~ .main-name > .dt {
  font-size: 35px;
}

#sus-mb {
  background-image: url("../img/Jade_Knight_mb.png");
}
#sus-mb ~ .main-name > .mb {
  font-size: 9vw;
}

#sw-dt {
  background-image: url("../img/Silverwing_N-EX_dt.png");
}
#sw-dt ~ .main-name > .dt {
  font-size: 30px;
}

#sw-mb {
  background-image: url("../img/Silverwing_N-EX_mb.png");
}
#sw-mb ~ .main-name > .mb {
  font-size: 7vw;
}

#ta-dt {
  background-image: url("../img/Terminal_Aide_0017_dt.png");
}
#ta-dt ~ .main-name > .dt {
  font-size: 26px;
}

#ta-mb {
  background-image: url("../img/Terminal_Aide_0017_mb.png");
}
#ta-mb ~ .main-name > .mb {
  font-size: 7vw;
}

#vb-dt {
  background-image: url("../img/Striker_Fulminata_dt.png");
}
#vb-dt ~ .main-name > .dt {
  font-size: 26px;
}

#vb-mb {
  background-image: url("../img/Striker_Fulminata_mb.png");
}
#vb-mb ~ .main-name > .mb {
  font-size: 6vw;
}

#ve-dt {
  background-image: url("../img/Twilight_Paladin_dt.png");
}
#ve-dt ~ .main-name > .dt {
  font-size: 30px;
}

#ve-mb {
  background-image: url("../img/Twilight_Paladin_mb.png");
}
#ve-mb ~ .main-name > .mb {
  font-size: 7vw;
}

#vg-dt {
  background-image: url("../img/Valkyrie_Gloria_dt.png");
}
#vg-dt ~ .main-name > .dt {
  font-size: 30px;
}

#vg-mb {
  background-image: url("../img/Valkyrie_Gloria_mb.png");
}
#vg-mb ~ .main-name > .mb {
  font-size: 7vw;
}

#villv-dt {
  background-image: url("../img/Helical_Contraption_dt.png");
}
#villv-dt ~ .main-name > .dt {
  font-size: 22px;
}

#villv-mb {
  background-image: url("../img/Helical_Contraption_mb.png");
}
#villv-mb ~ .main-name > .mb {
  font-size: 7vw;
}

#vq-dt {
  background-image: url("../img/Valkyrie_Quicksand_dt.png");
}
#vq-dt ~ .main-name > .dt {
  font-size: 26px;
}

#vq-mb {
  background-image: url("../img/Valkyrie_Quicksand_mb.png");
}
#vq-mb ~ .main-name > .mb {
  font-size: 7vw;
}

#vke-dt {
  background-image: url("../img/Vermilion_Knight_Eclipse_dt.png");
}
#vke-dt ~ .main-name > .dt {
  font-size: 18px;
}

#vke-mb {
  background-image: url("../img/Vermilion_Knight_Eclipse_mb.png");
}
#vke-mb ~ .main-name > .mb {
  font-size: 7vw;
}

/* return font size based on string length */
/* signet imaages */
.aponia {
  background-image: url("../img/Aponia_Signet.png");
}

.eden {
  background-image: url("../img/Eden_Signet.png");
}

.griseo {
  background-image: url("../img/Griseo_Signet.png");
}

.hua {
  background-image: url("../img/Hua_Signet.png");
}

.kalpas {
  background-image: url("../img/Kalpas_Signet.png");
}

.kevin {
  background-image: url("../img/Kevin_Signet.png");
}

.kosma {
  background-image: url("../img/Kosma_Signet.png");
}

.mobius {
  background-image: url("../img/Mobius_Signet.png");
}

.pardofelis {
  background-image: url("../img/Pardofelis_Signet.png");
}

.sakura {
  background-image: url("../img/Sakura_Signet.png");
}

.su {
  background-image: url("../img/Su_Signet.png");
}

.vill-v {
  background-image: url("../img/Vill-V_Signet.png");
}

/* return font size based on string length */
/* emblem images */
.aopl {
  background-image: url("../img/An_Old_Pals_Legacy.png");
}

.boy {
  background-image: url("../img/Because_of_You.png");
}

.bf {
  background-image: url("../img/Boundless_Feeling.png");
}

.bl {
  background-image: url("../img/Boundless_Logos.png");
}

.b {
  background-image: url("../img/Burden.png");
}

.dg {
  background-image: url("../img/Dreamful_Gold.png");
}

.els {
  background-image: url("../img/Empty_Like_Shala.png");
}

.fas {
  background-image: url("../img/Faraway_Ship.png");
}

.fipl {
  background-image: url("../img/Falling_in_Past_Light.png");
}

.ff {
  background-image: url("../img/Fragile_Friend.png");
}

.foe {
  background-image: url("../img/Feast_of_Emptiness.png");
}

.fos {
  background-image: url("../img/Forbidden_Seed.png");
}

.fmt {
  background-image: url("../img/Forget_Me_Not.png");
}

.gg {
  background-image: url("../img/Gold_Goblet.png");
}

.god {
  background-image: url("../img/Good_Old_Days.png");
}

.gsr {
  background-image: url("../img/Grey_Scale_Rainbow.png");
}

.h {
  background-image: url("../img/Hometown.png");
}

.haaml {
  background-image: url("../img/Heavy_as_a_Million_Lives.png");
}

.hl {
  background-image: url("../img/Home_Lost.png");
}

.iwbw {
  background-image: url("../img/It_Will_Be_Written.png");
}

.kttd {
  background-image: url("../img/Key_to_the_Deep.png");
}

.laabl {
  background-image: url("../img/Light_as_a_Bodhi_Leaf.png");
}

.mkm {
  background-image: url("../img/Mad_Kings_Mask.png");
}

.m {
  background-image: url("../img/Memory.png");
}

.oor {
  background-image: url("../img/Out_of_Reach.png");
}

.pm {
  background-image: url("../img/Pseudo_Miracle.png");
}

.pogae {
  background-image: url("../img/Proof_of_Good_and_Evil.png");
}

.r {
  background-image: url("../img/Resolve.png");
}

.rl {
  background-image: url("../img/Ruined_Legacy.png");
}

.roa {
  background-image: url("../img/Rainbow_of_Absence.png");
}

.sts {
  background-image: url("../img/Stained_Sakura.png");
}

.tc {
  background-image: url("../img/Thorny_Crown.png");
}

.tf {
  background-image: url("../img/Tin_Flask.png");
}

.tfs {
  background-image: url("../img/The_First_Scale.png");
}

.th {
  background-image: url("../img/Tsukimi_Himiko.png");
}

.tlm {
  background-image: url("../img/The_Lonely_Moon.png");
}

.vot {
  background-image: url("../img/Veil_of_Tears.png");
}

/* return font size based on string length */
/* support valk images */
.ae {
  background-image: url("../img/Azure_Empyrea_Avatar.png");
}

.bke {
  background-image: url("../img/Bright_Knight_Excelsis_Avatar.png");
}

.br {
  background-image: url("../img/Blood_Rose_Avatar.png");
}

.dp {
  background-image: url("../img/Divine_Prayer_Avatar.png");
}

.fr {
  background-image: url("../img/Fallen_Rosemary_Avatar.png");
}

.hb {
  background-image: url("../img/Haxxor_Bunny_Avatar.png");
}

.le {
  background-image: url("../img/Lightning_Empress_Avatar.png");
}

.ma {
  background-image: url("../img/Midnight_Absinthe_Avatar.png");
}

.rc {
  background-image: url("../img/Reverist_Calico_Avatar.png");
}

.sa {
  background-image: url("../img/Starlit_Astrologos_Avatar.png");
}

.sn {
  background-image: url("../img/Stygian_Nymph_Avatar.png");
}

.ss {
  background-image: url("../img/Snowy_Sniper_Avatar.png");
}

.vc {
  background-image: url("../img/Valkyrie_Chariot_Avatar.png");
}

.vke {
  background-image: url("../img/Vermilion_Knight_Eclipse_Avatar.png");
}

/* return font size based on string length */
/* weapon images */
.hawp {
  background-image: url("../img/0_high_atk_weap.png");
}

.abfl {
  background-image: url("../img/Abyss_Flower_Liminal_Spiral.png");
}

.asdi {
  background-image: url("../img/Astral_Divide_Pisces.png");
}

.baim {
  background-image: url("../img/Basilisks_Image_Deathshroud.png");
}

.blda {
  background-image: url("../img/Blood_Dance.png");
}

.codu {
  background-image: url("../img/Cosmic_Duality.png");
}

.dabr {
  background-image: url("../img/Dawn_Breaker_Talwar.png");
}

.doeg {
  background-image: url("../img/Domain_of_Ego_Flawless_Return.png");
}

.doin {
  background-image: url("../img/Domain_of_Incandescence.png");
}

.dore {
  background-image: url("../img/Domain_of_Revelation.png");
}

.dosa {
  background-image: url("../img/Domain_of_Sanction.png");
}

.dose {
  background-image: url("../img/Domain_of_Sentience.png");
}

.dovo {
  background-image: url("../img/Domain_of_the_Void.png");
}

.ecpa {
  background-image: url("../img/Echo_of_Paradise.png");
}

.elas {
  background-image: url("../img/Elysian_Astra_Hearts_Color.png");
}

.eogl {
  background-image: url("../img/Eos_Gloria.png");
}

.fafl {
  background-image: url("../img/Falcon_Flare_FINAL.png");
}

.frna {
  background-image: url("../img/Frozen_Naraka.png");
}

.heso {
  background-image: url("../img/Hekates_Sombre.png");
}

.irhe {
  background-image: url("../img/Iris_of_Helheim.png");
}

.kevo {
  background-image: url("../img/Keys_of_the_Void.png");
}

.loco {
  background-image: url("../img/Lost_Conviction_Damnation.png");
}

.miat {
  background-image: url("../img/Midnight_Ataegina.png");
}

.miec {
  background-image: url("../img/Midnight_Eclipse.png");
}

.miki {
  background-image: url("../img/Miracle_Kissy_Pillow.png");
}

.miwa {
  background-image: url("../img/Mitternachts_Waltz.png");
}

.mubl {
  background-image: url("../img/Muramasa_Bloodlust.png");
}

.nost {
  background-image: url("../img/Nocturnal_Stealth_Beam.png");
}

.nure {
  background-image: url("../img/Nuadas_Revenge.png");
}

.obdo {
  background-image: url("../img/Oblivion_Down.png");
}

.obwi {
  background-image: url("../img/Obscuring_Wing.png");
}

.paac {
  background-image: url("../img/Path_to_Acheron_Kindred.png");
}

.pobl {
  background-image: url("../img/Positron_Blasters.png");
}

.puph {
  background-image: url("../img/Purana_Phantasma.png");
}

.rudr {
  background-image: url("../img/Rudder_in_Dream.png");
}

.saas {
  background-image: url("../img/Sagittarius_Astra.png");
}

.saga {
  background-image: url("../img/Sanguine_Gaze.png");
}

.saun {
  background-image: url("../img/Sanguine_Gaze_Union.png");
}

.sena {
  background-image: url("../img/Seven_Thunders_of_Retribution_Narukami.png");
}

.seru {
  background-image: url("../img/Seven_Thunders_of_Retribution_Rumble.png");
}

.shur {
  background-image: url("../img/Shuhadaku_of_Uriel.png");
}

.skth {
  background-image: url("../img/Skadi_of_Thrymheim.png");
}

.sldr {
  background-image: url("../img/Sleepers_Dream.png");
}

.sted {
  background-image: url("../img/Star_of_Eden_World.png");
}

.sumu {
  background-image: url("../img/Surtr_Muspellsverd.png");
}

.thsa {
  background-image: url("../img/3rd_Sacred_Relic.png");
}

.topa {
  background-image: url("../img/Tower_of_the_Past_Silk_Ladder.png");
}

.whpa {
  background-image: url("../img/Whisper_of_the_Past_Sonnet.png");
}

/* return font size based on string length */
/* stigmata images */
.allt {
  background-image: url("../img/Allan_Poe_T.png");
}

.allm {
  background-image: url("../img/Allan_Poe_M.png");
}

.allb {
  background-image: url("../img/Allan_Poe_B.png");
}

.anat {
  background-image: url("../img/Ana_Schariac_T.png");
}

.anam {
  background-image: url("../img/Ana_Schariac_M.png");
}

.anab {
  background-image: url("../img/Ana_Schariac_B.png");
}

.aslt {
  background-image: url("../img/Aslaug_T.png");
}

.aslm {
  background-image: url("../img/Aslaug_M.png");
}

.aslb {
  background-image: url("../img/Aslaug_B.png");
}

.bast {
  background-image: url("../img/Bastet_T.png");
}

.basm {
  background-image: url("../img/Bastet_M.png");
}

.basb {
  background-image: url("../img/Bastet_B.png");
}

.bent {
  background-image: url("../img/Benares_Awakening_T.png");
}

.benm {
  background-image: url("../img/Benares_Awakening_M.png");
}

.benb {
  background-image: url("../img/Benares_Awakening_B.png");
}

.biat {
  background-image: url("../img/Bianka_Theatre_T.png");
}

.biam {
  background-image: url("../img/Bianka_Theatre_M.png");
}

.biab {
  background-image: url("../img/Bianka_Theatre_B.png");
}

.brot {
  background-image: url("../img/Bronya_N-EX_T.png");
}

.brom {
  background-image: url("../img/Bronya_N-EX_M.png");
}

.brob {
  background-image: url("../img/Bronya_N-EX_B.png");
}

.cart {
  background-image: url("../img/Carlo_Collodi_T.png");
}

.carm {
  background-image: url("../img/Carlo_Collodi_M.png");
}

.carb {
  background-image: url("../img/Carlo_Collodi_B.png");
}

.cezt {
  background-image: url("../img/Cezanne_T.png");
}

.cezm {
  background-image: url("../img/Cezanne_M.png");
}

.cezb {
  background-image: url("../img/Cezanne_B.png");
}

.chrt {
  background-image: url("../img/Idol_Transformation_T.png");
}

.chrm {
  background-image: url("../img/Idol_Transformation_M.png");
}

.chrb {
  background-image: url("../img/Idol_Transformation_B.png");
}

.dant {
  background-image: url("../img/Dante_T.png");
}

.danm {
  background-image: url("../img/Dante_M.png");
}

.danb {
  background-image: url("../img/Dante_B.png");
}

.dirt {
  background-image: url("../img/Dirac_T.png");
}

.dirm {
  background-image: url("../img/Dirac_M.png");
}

.dirb {
  background-image: url("../img/Dirac_B.png");
}

.drat {
  background-image: url("../img/Dracula_T.png");
}

.dram {
  background-image: url("../img/Dracula_M.png");
}

.drab {
  background-image: url("../img/Dracula_B.png");
}

.elpt {
  background-image: url("../img/Elysia_Pristine_T.png");
}

.elpm {
  background-image: url("../img/Elysia_Pristine_M.png");
}

.elpb {
  background-image: url("../img/Elysia_Pristine_B.png");
}

.elyt {
  background-image: url("../img/Elysia_T.png");
}

.elym {
  background-image: url("../img/Elysia_M.png");
}

.elyb {
  background-image: url("../img/Elysia_B.png");
}

.hant {
  background-image: url("../img/Handel_T.png");
}

.hanm {
  background-image: url("../img/Handel_M.png");
}

.hanb {
  background-image: url("../img/Handel_B.png");
}

.iret {
  background-image: url("../img/Irene_Adler_T.png");
}

.irem {
  background-image: url("../img/Irene_Adler_M.png");
}

.ireb {
  background-image: url("../img/Irene_Adler_B.png");
}

.kaft {
  background-image: url("../img/Kafka_T.png");
}

.kafm {
  background-image: url("../img/Kafka_M.png");
}

.kafb {
  background-image: url("../img/Kafka_B.png");
}

.leet {
  background-image: url("../img/Leeuwenhoek_T.png");
}

.leeb {
  background-image: url("../img/Leeuwenhoek_B.png");
}

.list {
  background-image: url("../img/Li_Sushang_Shenzhou_Reminiscence_T.png");
}

.lism {
  background-image: url("../img/Li_Sushang_Shenzhou_Reminiscence_M.png");
}

.lisb {
  background-image: url("../img/Li_Sushang_Shenzhou_Reminiscence_B.png");
}

.lint {
  background-image: url("../img/Linnaeus_T.png");
}

.linm {
  background-image: url("../img/Linnaeus_M.png");
}

.linb {
  background-image: url("../img/Linnaeus_B.png");
}

.marm {
  background-image: url("../img/Marco_Polo_M.png");
}

.mict {
  background-image: url("../img/Michelangelo_T.png");
}

.micb {
  background-image: url("../img/Michelangelo_B.png");
}

.murt {
  background-image: url("../img/Murata_Himeko_T.png");
}

.murm {
  background-image: url("../img/Murata_Himeko_M.png");
}

.murb {
  background-image: url("../img/Murata_Himeko_B.png");
}

.pagt {
  background-image: url("../img/Paganini_T.png");
}

.pagm {
  background-image: url("../img/Paganini_M.png");
}

.pagb {
  background-image: url("../img/Paganini_B.png");
}

.ragt {
  background-image: url("../img/Ragna_T.png");
}

.ragm {
  background-image: url("../img/Ragna_M.png");
}

.ragb {
  background-image: url("../img/Ragna_B.png");
}

.rebt {
  background-image: url("../img/Mei_Spectramancer_T.png");
}

.rebb {
  background-image: url("../img/Fu_Hua_Onyx_Simurgh_B.png");
}

.rot {
  background-image: url("../img/Robert_Peary_T.png");
}

.rom {
  background-image: url("../img/Robert_Peary_M.png");
}

.rob {
  background-image: url("../img/Robert_Peary_B.png");
}

.shat {
  background-image: url("../img/Shakespeare_Adrift_T.png");
}

.sham {
  background-image: url("../img/Shakespeare_Adrift_M.png");
}

.shab {
  background-image: url("../img/Shakespeare_Adrift_B.png");
}

.shst {
  background-image: url("../img/Raksha_T.png");
}

.shsm {
  background-image: url("../img/Sushang_M.png");
}

.shsb {
  background-image: url("../img/Empyrea_Phoenix_B.png");
}

.siem {
  background-image: url("../img/Siegfried_Kaslana_M.png");
}

.sirt {
  background-image: url("../img/Sirin_Ascendant_T.png");
}

.sirm {
  background-image: url("../img/Sirin_Ascendant_M.png");
}

.sirb {
  background-image: url("../img/Sirin_Ascendant_B.png");
}

.tham {
  background-image: url("../img/Thales_M.png");
}

.vert {
  background-image: url("../img/Verne_T.png");
}

.verm {
  background-image: url("../img/Verne_M.png");
}

.verb {
  background-image: url("../img/Verne_B.png");
}

.want {
  background-image: url("../img/Wang_Zhenyi_T.png");
}

.wanm {
  background-image: url("../img/Wang_Zhenyi_M.png");
}

.wanb {
  background-image: url("../img/Wang_Zhenyi_B.png");
}

.welt {
  background-image: url("../img/Welt_Yang_T.png");
}

.welm {
  background-image: url("../img/Welt_Yang_M.png");
}

.welb {
  background-image: url("../img/Welt_Yang_B.png");
}

.wilt {
  background-image: url("../img/Willows_T.png");
}

.wilm {
  background-image: url("../img/Willows_M.png");
}

.wilb {
  background-image: url("../img/Willows_B.png");
}

.zent {
  background-image: url("../img/Zeno_T.png");
}

.zenm {
  background-image: url("../img/Zeno_M.png");
}

.zenb {
  background-image: url("../img/Zeno_B.png");
}

/* return font size based on string length */
#guide-container {
  width: 100%;
  height: 100%;
  position: fixed;
}
#guide-container::before {
  content: "";
  position: absolute;
  z-index: 1;
  opacity: 0;
  width: 100%;
  height: 5px;
}
#guide-container::after {
  content: "";
  position: absolute;
  z-index: 1;
  opacity: 0;
  width: 100%;
  height: 3em;
  background-image: linear-gradient(0deg, black 0%, rgba(0, 0, 0, 0.8) 40%, transparent 100%);
}

.bg-fade-in {
  animation: bgfadein 0.5s forwards;
}

.bg-fade-out {
  animation: bgfadeout 0.5s forwards;
}

@keyframes bgfadein {
  from {
    background-color: transparent;
  }
  to {
    background-color: rgba(0, 0, 0, 0.3);
  }
}
@keyframes bgfadeout {
  from {
    background-color: rgba(0, 0, 0, 0.3);
  }
  to {
    background-color: transparent;
  }
}
.guide-content {
  scrollbar-width: none !important;
  overflow-x: hidden;
  overflow-y: scroll;
  transition: 0.3s ease;
  position: relative;
  left: 50%;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 5px;
}
.guide-content ::-webkit-scrollbar {
  display: none;
}
.guide-content .ribbon {
  background: rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.8);
}
.guide-content.mb {
  width: 100%;
  height: calc(100% - 25vw);
  transform: translateX(-50%);
}
.guide-content.mb.upper {
  margin: 25vw 0 0 0;
}
.guide-content.mb .ribbon {
  top: 20px;
  left: 0px;
  padding: 5px 15px;
  font-size: 22px;
}
.guide-content.dt {
  width: 600px;
  border: 3px solid rgba(255, 255, 255, 0.5);
  transform: translate(-50%, 15%);
}
.guide-content.dt .ribbon {
  padding: 20px 0 7px 0;
  top: -7px;
  left: -35px;
  width: 100px;
  transform: rotate(-45deg);
  text-align: center;
  font-size: 20px;
}
.guide-content .material-symbols-outlined {
  font-size: 20px;
}
.guide-content .material-symbols-outlined:first-child {
  margin: 0 5px 0 0;
}
.guide-content .material-symbols-outlined:last-child {
  margin: 0 0 0 5px;
}

@media only screen and (min-height: 950px) {
  .guide-content.dt {
    height: 800px;
  }
}
@media only screen and (max-height: 949px) {
  .guide-content.dt {
    height: calc(100vh - 15px);
  }
}
/* desktop (innerHeight >= 950px) */
.guide-entry-desktop-n {
  animation: guideentrydesktopn 0.6s forwards;
}

@keyframes guideentrydesktopn {
  from {
    transform: translate(-50%, -100px);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 15%);
    opacity: 1;
  }
}
.guide-exit-desktop-n {
  animation: guideexitdesktopn 0.6s forwards;
}

@keyframes guideexitdesktopn {
  from {
    transform: translate(-50%, 15%);
    opacity: 1;
  }
  to {
    transform: translate(-50%, -100px);
    opacity: 0;
  }
}
/* desktop (innerHeight <= 949px) */
.guide-entry-desktop-s {
  animation: guideentrydesktops 0.6s forwards;
}

@keyframes guideentrydesktops {
  from {
    transform: translate(-50%, -100px);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 5px);
    opacity: 1;
  }
}
.guide-exit-desktop-s {
  animation: guideexitdesktops 0.6s forwards;
}

@keyframes guideexitdesktops {
  from {
    transform: translate(-50%, 5px);
    opacity: 1;
  }
  to {
    transform: translate(-50%, -100px);
    opacity: 0;
  }
}
/* mobile */
.guide-top-entry-mobile {
  animation: guideopenentrymobile 0.6s ease-out forwards;
}

@keyframes guideopenentrymobile {
  from {
    transform: translate(-50%, -100px);
    opacity: 0;
  }
  to {
    transform: translateX(-50%);
    opacity: 1;
  }
}
.guide-top-exit-mobile {
  animation: guideopenexitmobile 0.5s ease-in forwards;
}

@keyframes guideopenexitmobile {
  from {
    transform: translateX(-50%);
    opacity: 1;
  }
  to {
    transform: translate(-50%, -100px);
    opacity: 0;
  }
}
.guide-bot-entry-mobile {
  animation: guidebotentrymobile 0.6s ease-out forwards;
}

@keyframes guidebotentrymobile {
  from {
    transform: translate(-50%, 100px);
    opacity: 0;
  }
  to {
    transform: translateX(-50%);
    opacity: 1;
  }
}
.guide-bot-exit-mobile {
  animation: guidebotexitmobile 0.5s ease-in forwards;
}

@keyframes guidebotexitmobile {
  from {
    transform: translateX(-50%);
    opacity: 1;
  }
  to {
    transform: translate(-50%, 100px);
    opacity: 0;
  }
}
/* return font size based on string length */
/* about page */
#about #container {
  background-color: rgba(0, 0, 0, 0.83);
  height: 100vh;
}
#about #sub-container {
  scrollbar-color: rgb(40, 40, 40) transparent !important;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  width: 600px;
  max-width: 90%;
  padding: 20px;
  overflow-y: auto;
}
#about #sub-container::-webkit-scrollbar-track {
  background-color: transparent;
}
#about .cell-center {
  width: 25px;
}
#about .sideways {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}
#about #timeline {
  max-width: 400px;
}
#about #timeline th:nth-child(1) {
  width: 10%;
}
#about h5 {
  font-size: 30px;
}
#about h6 {
  font-size: 24px;
}
#about p, #about li {
  line-height: 1.2;
}
#about table {
  margin: auto;
}
#about table td, #about table th {
  border: 1px solid rgba(255, 255, 255, 0.8);
}
#about table th {
  vertical-align: middle;
  font-size: unset;
  width: 20%;
}
#about hr, #about a {
  color: rgba(255, 255, 255, 0.8);
}

@media only screen and (max-width: 640px) {
  #sub-container {
    width: auto;
    height: unset;
    overflow-y: unset;
  }
  #about #container {
    height: initial;
  }
}
* {
  -webkit-user-select: none;
  user-select: none;
}
*:focus {
  outline: none;
}

.flex {
  display: flex;
}

.fh-center {
  justify-content: center;
}

.fv-center {
  align-items: center;
}

.f-col {
  flex-direction: column;
}

.f-row {
  flex-direction: row;
}

.pos-abs {
  position: absolute;
}

.pos-rel {
  position: relative;
}

.overflow-hide {
  overflow: hidden;
}

.no-display {
  display: none !important;
}

.fade {
  animation: fade 1s forwards;
}

@keyframes fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.hidden {
  opacity: 0 !important;
}

/* desktop banner animaitons */
.fade-in-up {
  animation: fadeinup 2s;
}

@keyframes fadeinup {
  from {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0px);
    opacity: 1;
  }
}
.fade-in-down {
  animation: fadeindown 2s;
}

@keyframes fadeindown {
  from {
    transform: translateY(-100px);
    opacity: 0;
  }
  to {
    transform: translateY(0px);
    opacity: 1;
  }
}
/* mobile banner animations */
.fade-in-left {
  animation: fadeinleft 2s;
}

@keyframes fadeinleft {
  from {
    transform: translateX(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0px);
    opacity: 1;
  }
}
.fade-in-right {
  animation: fadeinright 2s;
}

@keyframes fadeinright {
  from {
    transform: translateX(-100px);
    opacity: 0;
  }
  to {
    transform: translateY(0px);
    opacity: 1;
  }
}
.table-cell-hover {
  background-color: rgba(255, 255, 255, 0.8);
  color: black;
}

body {
  min-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  color: rgba(255, 255, 255, 0.8);
}

#bg {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  position: fixed;
  z-index: -1;
}

.bg-dt {
  background: url("../img/bg-dt.png") top center no-repeat;
}

.bg-mb {
  background: url("../img/bg-mb.png") top center no-repeat;
}

header {
  background-color: rgba(0, 0, 0, 0.83);
  flex-grow: 1;
}
header * {
  animation: headeranim 5s;
}
header p {
  margin: 20px 0 10px 0;
  font-family: "Plus Jakarta Sans";
  font-style: italic;
}
header a {
  color: rgba(255, 255, 255, 0.8);
  font-family: "Plus Jakarta Sans";
  font-size: 12px;
}
header a:hover {
  color: white;
}

@media only screen and (max-height: 1100px) {
  header {
    padding: 20px 0 20px 0;
  }
}
@keyframes headeranim {
  from {
    color: transparent;
  }
  to {
    color: rgba(255, 255, 255, 0.8);
  }
}
main {
  background-color: rgba(0, 0, 0, 0.83);
}

footer {
  background-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0.75));
  flex-grow: 2;
}

h1 {
  font-size: 6em;
  text-align: center;
  font-family: "Raleway";
  font-weight: 100;
  letter-spacing: 10px;
  text-transform: uppercase;
}

h2 {
  font-size: 40px;
  text-align: center;
  margin: 10px 0 0 0;
  letter-spacing: 3px;
}

h3 {
  font-size: 30px;
  text-align: center;
  margin: 20px 0 0 0;
  line-height: 40px;
  text-transform: capitalize;
}

td, th, #about table th {
  background: center/cover;
  text-align: center;
  vertical-align: middle;
}

th {
  font-size: 20px;
}

tr {
  height: 50px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}

tr:last-child:not(thead tr) {
  border-bottom: unset;
}

#close {
  visibility: hidden;
  position: fixed;
  cursor: pointer;
  border: none;
  z-index: 1;
  background-color: transparent;
  color: rgba(255, 255, 255, 0.6);
}
#close .material-icons {
  font-size: 35px;
}
#close:hover {
  color: rgba(255, 255, 255, 0.8);
}

#goToTop {
  visibility: hidden;
  position: fixed;
  cursor: pointer;
  border: none;
  border-radius: 50%;
  background-color: rgb(60, 60, 60);
  color: rgba(255, 255, 255, 0.8);
  width: 50px;
  height: 50px;
  padding: 5px 0 0 0;
}
#goToTop .material-icons {
  font-size: 35px;
}
#goToTop:hover {
  background-color: rgba(60, 60, 60, 0.8);
}

li {
  margin: 0 0 10px 15px;
  list-style: initial;
}

strong {
  font-weight: bold;
}