@font-face {
  font-family: "Bangers";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(""), url("./fonts/bangers-v13-latin-regular.woff2") format("woff2"), url("./fonts/bangers-v13-latin-regular.woff") format("woff");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(""), url("./fonts/roboto-v29-latin-regular.woff2") format("woff2"), url("./fonts/roboto-v29-latin-regular.woff") format("woff");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local(""), url("./fonts/roboto-v29-latin-700.woff2") format("woff2"), url("./fonts/roboto-v29-latin-700.woff") format("woff");
}
@font-face {
  font-family: "Albula";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(""), url("./fonts/Albula-Regular.woff2") format("woff2"), url("./fonts/Albula-Regular.woff") format("woff");
}
@font-face {
  font-family: "Albula";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local(""), url("./fonts/Albula-Bold.woff2") format("woff2"), url("./fonts/Albula-Bold.woff") format("woff");
}
@font-face {
  font-family: "Albula";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local(""), url("./fonts/Albula-Heavy.woff2") format("woff2"), url("./fonts/Albula-Heavy.woff") format("woff");
}
html {
  font-size: clamp(14px, 11px + 0.35vw, 50px);
}

html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

body {
  background: #402DB3;
  background: -o-radial-gradient(circle, #362496 0%, #0e0a67 63%);
  background: radial-gradient(circle, #362496 0%, #0e0a67 63%);
  background-attachment: fixed;
  font-family: Roboto;
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.pages {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0 1rem;
}

.page {
  display: none;
}
.page.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.hidden {
  display: none !important;
  pointer-events: none;
  -webkit-transition: opacity 0.4s ease;
  -o-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
}
.hidden.show {
  display: block !important;
  pointer-events: initial;
}

h1 {
  font-family: Albula, sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 2em;
  text-align: center;
  line-height: 1.2em;
}
@media (max-width: 767px) {
  h1 {
    font-size: 1.7rem;
    margin-top: 1rem;
  }
}

h2 {
  font-family: Albula, sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2em;
}
@media (max-width: 767px) {
  h2 {
    font-size: 1.5rem;
  }
}

.page.home {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.page.home h1 {
  text-align: center;
  font-size: 3rem;
  margin-bottom: 3rem;
}
.page.home h1 small {
  display: block;
  font-size: 0.6em;
  opacity: 0.6;
  line-height: 100%;
}

.game-cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
}

.page.capital-nerd-classic .flag-container {
  min-height: 13rem !important;
}

.page.country-nerd {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}
@media (min-width: 768px) {
  .page.country-nerd {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.page.country-nerd .letters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.6rem;
}
@media (min-width: 768px) {
  .page.country-nerd .letters {
    max-width: 45rem;
  }
}
.page.country-nerd .letters.hide .letter {
  opacity: 0;
}
.page.country-nerd .letters .letter:nth-child(1) {
  -webkit-transition: opacity 0.2s ease 0.1s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.1s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  -o-transition: opacity 0.2s ease 0.1s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.1s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.1s, transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.page.country-nerd .letters .letter:nth-child(2) {
  -webkit-transition: opacity 0.2s ease 0.2s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.2s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  -o-transition: opacity 0.2s ease 0.2s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.2s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.2s, transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.page.country-nerd .letters .letter:nth-child(3) {
  -webkit-transition: opacity 0.2s ease 0.11s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.11s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  -o-transition: opacity 0.2s ease 0.11s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.11s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.11s, transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.page.country-nerd .letters .letter:nth-child(4) {
  -webkit-transition: opacity 0.2s ease 0.3s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.3s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  -o-transition: opacity 0.2s ease 0.3s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.3s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.3s, transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.page.country-nerd .letters .letter:nth-child(5) {
  -webkit-transition: opacity 0.2s ease 0.18s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.18s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  -o-transition: opacity 0.2s ease 0.18s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.18s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.18s, transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.page.country-nerd .letters .letter:nth-child(6) {
  -webkit-transition: opacity 0.2s ease 0.13s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.13s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  -o-transition: opacity 0.2s ease 0.13s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.13s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.13s, transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.page.country-nerd .letters .letter:nth-child(7) {
  -webkit-transition: opacity 0.2s ease 0.21s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.21s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  -o-transition: opacity 0.2s ease 0.21s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.21s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.21s, transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.page.country-nerd .letters .letter:nth-child(8) {
  -webkit-transition: opacity 0.2s ease 0.05s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.05s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  -o-transition: opacity 0.2s ease 0.05s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.05s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.05s, transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.page.country-nerd .letters .letter:nth-child(9) {
  -webkit-transition: opacity 0.2s ease 0.35s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.35s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  -o-transition: opacity 0.2s ease 0.35s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.35s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.35s, transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.page.country-nerd .letters .letter:nth-child(10) {
  -webkit-transition: opacity 0.2s ease 0.2s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.2s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  -o-transition: opacity 0.2s ease 0.2s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.2s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.2s, transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.page.country-nerd .letters .letter:nth-child(11) {
  -webkit-transition: opacity 0.2s ease 0.22s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.22s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  -o-transition: opacity 0.2s ease 0.22s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.22s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.22s, transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.page.country-nerd .letters .letter:nth-child(12) {
  -webkit-transition: opacity 0.2s ease 0.17s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.17s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  -o-transition: opacity 0.2s ease 0.17s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.17s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.17s, transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.page.country-nerd .letters .letter:nth-child(13) {
  -webkit-transition: opacity 0.2s ease 0.03s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.03s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  -o-transition: opacity 0.2s ease 0.03s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.03s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.03s, transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.page.country-nerd .letters .letter:nth-child(14) {
  -webkit-transition: opacity 0.2s ease 0.09s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.09s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  -o-transition: opacity 0.2s ease 0.09s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.09s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.09s, transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.page.country-nerd .letters .letter:nth-child(15) {
  -webkit-transition: opacity 0.2s ease 0.11s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.11s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  -o-transition: opacity 0.2s ease 0.11s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.11s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.11s, transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.page.country-nerd .letters .letter:nth-child(16) {
  -webkit-transition: opacity 0.2s ease 0.2s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.2s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  -o-transition: opacity 0.2s ease 0.2s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.2s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.2s, transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.page.country-nerd .letters .letter:nth-child(17) {
  -webkit-transition: opacity 0.2s ease 0.35s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.35s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  -o-transition: opacity 0.2s ease 0.35s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.35s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.35s, transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.page.country-nerd .letters .letter:nth-child(18) {
  -webkit-transition: opacity 0.2s ease 0.31s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.31s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  -o-transition: opacity 0.2s ease 0.31s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.31s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.31s, transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.page.country-nerd .letters .letter:nth-child(19) {
  -webkit-transition: opacity 0.2s ease 0.2s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.2s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  -o-transition: opacity 0.2s ease 0.2s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.2s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.2s, transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.page.country-nerd .letters .letter:nth-child(20) {
  -webkit-transition: opacity 0.2s ease 0.14s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.14s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  -o-transition: opacity 0.2s ease 0.14s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.14s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.14s, transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.page.country-nerd .letters .letter:nth-child(21) {
  -webkit-transition: opacity 0.2s ease 0.25s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.25s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  -o-transition: opacity 0.2s ease 0.25s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.25s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.25s, transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.page.country-nerd .letters .letter:nth-child(22) {
  -webkit-transition: opacity 0.2s ease 0.06s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.06s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  -o-transition: opacity 0.2s ease 0.06s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.06s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.06s, transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.page.country-nerd .letters .letter:nth-child(23) {
  -webkit-transition: opacity 0.2s ease 0.17s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.17s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  -o-transition: opacity 0.2s ease 0.17s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.17s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.17s, transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.page.country-nerd .letters .letter:nth-child(24) {
  -webkit-transition: opacity 0.2s ease 0.24s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.24s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  -o-transition: opacity 0.2s ease 0.24s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.24s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.24s, transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.page.country-nerd .letters .letter:nth-child(25) {
  -webkit-transition: opacity 0.2s ease 0.36s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.36s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  -o-transition: opacity 0.2s ease 0.36s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.36s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.36s, transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.page.country-nerd .letters .letter:nth-child(26) {
  -webkit-transition: opacity 0.2s ease 0.37s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.37s, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  -o-transition: opacity 0.2s ease 0.37s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.37s, transform 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease 0.37s, transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.page.country-nerd .letter {
  height: 4rem;
  width: 4rem;
  border-radius: 0.4rem;
  background-color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  color: #1c1c1c;
  font-size: 2rem;
  font-weight: 900;
  font-family: Albula, sans-serif;
  -webkit-box-shadow: 2px 2px 5px 4px rgba(0, 0, 0, 0.25);
          box-shadow: 2px 2px 5px 4px rgba(0, 0, 0, 0.25);
  -webkit-transition: -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease;
  transition: -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease;
  -o-transition: transform 0.4s ease, box-shadow 0.4s ease;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  transition: transform 0.4s ease, box-shadow 0.4s ease, -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease;
  will-change: transform;
}
.page.country-nerd .letter:hover {
  -webkit-transform: translate(0.05rem, 0.05rem);
      -ms-transform: translate(0.05rem, 0.05rem);
          transform: translate(0.05rem, 0.05rem);
  -webkit-box-shadow: 0 0 5px 4px rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 5px 4px rgba(0, 0, 0, 0.15);
}
.page.country-nerd .letter.completed {
  background: -o-radial-gradient(67.68% 35.44%, 43.04% 43.04%, #F3CC3F 0%, #FFE600 0.01%, #FFCB46 85.94%);
  background: radial-gradient(43.04% 43.04% at 67.68% 35.44%, #F3CC3F 0%, #FFE600 0.01%, #FFCB46 85.94%);
}
.page.country-nerd .title-container {
  position: relative;
}
.page.country-nerd .title-container h1 {
  padding-left: 2em;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  text-align: left;
}
.page.country-nerd .title-container h1 .icon {
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-45%);
      -ms-transform: translateY(-45%);
          transform: translateY(-45%);
}
@media (max-width: 767px) {
  .page.country-nerd .title-container {
    width: 100%;
  }
  .page.country-nerd .title-container h1 {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
  }
}
.page.country-nerd .title-container .game-title {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  font-family: Albula, sans-serif;
  font-weight: 400;
  white-space: nowrap;
  line-height: 1.3em;
  font-size: 2.5rem;
  padding-left: 2em;
}
@media (max-width: 767px) {
  .page.country-nerd .title-container .game-title {
    font-size: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
.page.country-nerd .title-container .game-title .icon {
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-45%);
      -ms-transform: translateY(-45%);
          transform: translateY(-45%);
}
.page.country-nerd .title-container .letter-placeholder {
  height: 2.5rem;
  width: 2.5rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-size: 1.5rem;
  -webkit-transform: translate(0.1em, -0.1em);
      -ms-transform: translate(0.1em, -0.1em);
          transform: translate(0.1em, -0.1em);
  text-transform: uppercase;
  line-height: 1em;
}
.page.country-nerd .answer-container {
  display: none;
  opacity: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
  width: 100%;
}
@media (max-width: 767px) {
  .page.country-nerd .answer-container {
    gap: 1rem;
  }
}
.page.country-nerd .answer-container.win .tip {
  background-color: #1dd710;
}
.page.country-nerd .input-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
}
.page.country-nerd .answer-input {
  padding: 0 2rem;
  border: none;
  outline: none;
  border-radius: 1000px;
  font-size: 1.2rem;
  height: 3rem;
  width: 100%;
}
@media (min-width: 768px) {
  .page.country-nerd .answer-input {
    max-width: 30rem;
    height: 4rem;
    font-size: 2rem;
  }
}
.page.country-nerd .validate-input {
  height: 4rem;
  width: 6rem;
  border-radius: 1000px;
  background-color: white;
  border: none;
  outline: none;
  font-size: 1.8rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@media (max-width: 767px) {
  .page.country-nerd .validate-input {
    height: 3rem;
    width: 6rem;
    font-size: 1.4rem;
  }
}
.page.country-nerd .answers {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.3rem;
  width: 100%;
}
.page.country-nerd .answers .answer {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid white;
  width: 100%;
  min-width: 15rem;
  max-width: 100%;
  font-size: 1.2rem;
  text-transform: capitalize;
}
@media (min-width: 768px) {
  .page.country-nerd .answers .answer {
    max-width: 25rem;
  }
}
.page.country-nerd .answers .answer .flag {
  -webkit-transform: translateY(1px);
      -ms-transform: translateY(1px);
          transform: translateY(1px);
}
.page.country-nerd .answers .answer.valid::after {
  content: "";
  position: absolute;
  height: 0.8em;
  width: 0.8em;
  top: 40%;
  right: 0;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  background-image: url("/img/checkmark.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
.page.country-nerd .tip {
  background-color: #F05050;
  color: white;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 1000px;
  padding: 0.8rem 1.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}
.page.country-nerd .won-link {
  cursor: pointer;
}
.page.country-nerd .won-link:before {
  background-color: #231961;
}
.page.country-nerd .won-link:after {
  background-color: #2a1e76;
  height: 60rem;
  width: 60rem;
}

.page.capital-nerd-classic,
.page.capital-nerd-hard,
.page.flag-nerd-classic {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.page.capital-nerd-classic h1,
.page.capital-nerd-hard h1,
.page.flag-nerd-classic h1 {
  margin-bottom: 1rem;
}
.page.capital-nerd-classic .flag-container,
.page.capital-nerd-hard .flag-container,
.page.flag-nerd-classic .flag-container {
  margin-top: 1rem;
  width: 15rem;
  min-height: 10rem;
}
.page.capital-nerd-classic .flag-container .flag,
.page.capital-nerd-hard .flag-container .flag,
.page.flag-nerd-classic .flag-container .flag {
  height: 10rem;
  width: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
}
.page.capital-nerd-classic .flag-container .name,
.page.capital-nerd-hard .flag-container .name,
.page.flag-nerd-classic .flag-container .name {
  font-size: 1.3rem;
  text-transform: uppercase;
  text-align: center;
  font-weight: 700;
  margin-top: 0.5rem;
}
.page.capital-nerd-classic .answer-container,
.page.capital-nerd-hard .answer-container,
.page.flag-nerd-classic .answer-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
  min-height: 9rem;
}
@media (min-width: 768px) {
  .page.capital-nerd-classic .answer-container,
.page.capital-nerd-hard .answer-container,
.page.flag-nerd-classic .answer-container {
    gap: 2rem;
  }
}
.page.capital-nerd-classic .answer-container .country,
.page.capital-nerd-hard .answer-container .country,
.page.flag-nerd-classic .answer-container .country {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  -ms-flex-item-align: center;
      align-self: center;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  background-color: white;
  color: #231961;
  padding: 1rem;
  border-radius: 1000px;
  font-size: 1.2rem;
  cursor: pointer;
  -webkit-box-shadow: 0.5rem 0.5rem 3rem 1rem rgba(0, 0, 0, 0.19);
          box-shadow: 0.5rem 0.5rem 3rem 1rem rgba(0, 0, 0, 0.19);
  -webkit-transition: background-color 0.2s ease, -webkit-transform 0.2s ease;
  transition: background-color 0.2s ease, -webkit-transform 0.2s ease;
  -o-transition: transform 0.2s ease, background-color 0.2s ease;
  transition: transform 0.2s ease, background-color 0.2s ease;
  transition: transform 0.2s ease, background-color 0.2s ease, -webkit-transform 0.2s ease;
  will-change: transform;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@media (min-width: 768px) {
  .page.capital-nerd-classic .answer-container .country,
.page.capital-nerd-hard .answer-container .country,
.page.flag-nerd-classic .answer-container .country {
    padding: 1rem 2rem;
  }
}
.page.capital-nerd-classic .answer-container .country:hover,
.page.capital-nerd-hard .answer-container .country:hover,
.page.flag-nerd-classic .answer-container .country:hover {
  -webkit-transform: scale(1.02);
      -ms-transform: scale(1.02);
          transform: scale(1.02);
}
.page.capital-nerd-classic .answer-container .country:active,
.page.capital-nerd-hard .answer-container .country:active,
.page.flag-nerd-classic .answer-container .country:active {
  -webkit-transform: scale(0.98);
      -ms-transform: scale(0.98);
          transform: scale(0.98);
}
.page.capital-nerd-classic .answer-container .valid,
.page.capital-nerd-hard .answer-container .valid,
.page.flag-nerd-classic .answer-container .valid {
  background-color: #1dd710;
  color: white;
  font-weight: 700;
}
.page.capital-nerd-classic .answer-container .invalid,
.page.capital-nerd-hard .answer-container .invalid,
.page.flag-nerd-classic .answer-container .invalid {
  background-color: #F05050;
  color: white;
}
.page.capital-nerd-classic .progress-container,
.page.capital-nerd-hard .progress-container,
.page.flag-nerd-classic .progress-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  margin: 1rem 0;
}
@media (min-width: 768px) {
  .page.capital-nerd-classic .progress-container,
.page.capital-nerd-hard .progress-container,
.page.flag-nerd-classic .progress-container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
.page.capital-nerd-classic .progress,
.page.capital-nerd-hard .progress,
.page.flag-nerd-classic .progress {
  background-color: #231961;
  color: white;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 1000px;
  padding: 0.8rem 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
}
.page.capital-nerd-classic .progress .best,
.page.capital-nerd-hard .progress .best,
.page.flag-nerd-classic .progress .best {
  font-size: 0.7rem;
}
.page.capital-nerd-classic .life-remaining,
.page.capital-nerd-hard .life-remaining,
.page.flag-nerd-classic .life-remaining {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.3rem;
}
.page.capital-nerd-classic .life-remaining .heart,
.page.capital-nerd-hard .life-remaining .heart,
.page.flag-nerd-classic .life-remaining .heart {
  height: 2rem;
  width: 2rem;
}
.page.capital-nerd-classic .life-remaining .heart svg,
.page.capital-nerd-hard .life-remaining .heart svg,
.page.flag-nerd-classic .life-remaining .heart svg {
  height: 100%;
  width: 100%;
}
.page.capital-nerd-classic .life-remaining .heart.loose path,
.page.capital-nerd-hard .life-remaining .heart.loose path,
.page.flag-nerd-classic .life-remaining .heart.loose path {
  fill: none;
}
.page.capital-nerd-classic .game-container,
.page.capital-nerd-hard .game-container,
.page.flag-nerd-classic .game-container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.page.flag-nerd-hard {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.page.flag-nerd-hard h1 {
  margin-bottom: 1rem;
}
.page.flag-nerd-hard .flag-container {
  margin-top: 1rem;
  margin-bottom: 2rem;
  width: 15rem;
  height: 10rem;
}
.page.flag-nerd-hard .flag-container .flag {
  height: 10rem;
  width: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
}
.page.flag-nerd-hard .input-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
}
.page.flag-nerd-hard .answer-input {
  padding: 0 2rem;
  border: none;
  outline: none;
  border-radius: 1000px;
  font-size: 1.2rem;
  height: 3rem;
  width: 100%;
}
@media (min-width: 768px) {
  .page.flag-nerd-hard .answer-input {
    max-width: 30rem;
    height: 4rem;
    font-size: 2rem;
  }
}
.page.flag-nerd-hard .validate-input {
  height: 4rem;
  width: 6rem;
  border-radius: 1000px;
  background-color: white;
  border: none;
  outline: none;
  font-size: 1.8rem;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@media (max-width: 767px) {
  .page.flag-nerd-hard .validate-input {
    height: 3rem;
    width: 6rem;
    font-size: 1.4rem;
  }
}
.page.flag-nerd-hard .progress-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  margin: 1rem 0;
}
@media (min-width: 768px) {
  .page.flag-nerd-hard .progress-container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
.page.flag-nerd-hard .progress {
  background-color: #231961;
  color: white;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 1000px;
  padding: 0.8rem 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
}
.page.flag-nerd-hard .progress .best {
  font-size: 0.7rem;
}
.page.flag-nerd-hard .life-remaining {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.3rem;
}
.page.flag-nerd-hard .life-remaining .heart {
  height: 2rem;
  width: 2rem;
}
.page.flag-nerd-hard .life-remaining .heart svg {
  height: 100%;
  width: 100%;
}
.page.flag-nerd-hard .life-remaining .heart.loose path {
  fill: none;
}
.page.flag-nerd-hard .game-container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.page.map-nerd-classic {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.page.map-nerd-classic.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.page.map-nerd-classic path {
  fill: white;
  -webkit-transition: fill 0.2s ease-out;
  -o-transition: fill 0.2s ease-out;
  transition: fill 0.2s ease-out;
  stroke: black;
  stroke-width: 0.01px;
  cursor: pointer;
}
.page.map-nerd-classic path:hover {
  fill: #231961;
}
.page.map-nerd-classic .country-to-guess {
  position: absolute;
  z-index: 2;
  top: 10vh;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  background-color: #231961;
  border-radius: 100px;
  color: white;
  padding: 1rem 2rem;
  -webkit-transition: background-color 0.2s ease;
  -o-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
.page.map-nerd-classic .country-to-guess.valid {
  background-color: #1dd710;
}
.page.map-nerd-classic .country-to-guess.invalid {
  background-color: #F05050;
}
.page.map-nerd-classic .country-to-guess .flag-container {
  width: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.page.map-nerd-classic .country-to-guess .flag {
  width: 3rem;
  height: 2rem;
}
.page.map-nerd-classic .country-to-guess .name {
  font-size: 1.2rem;
}

.page.settings {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 2rem;
}
.page.settings h1 {
  margin-bottom: 1rem;
}
.page.settings .settings-inner {
  margin-top: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
}
.page.settings .btn {
  width: 100%;
}
.page.settings .btn.done::before, .page.settings .btn.done::after {
  background-color: #1dd710;
}

.btn {
  position: relative;
  display: block;
  padding: 1rem 1.5rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 6rem;
  color: white;
  border-radius: 1000px;
  font-family: Albula, sans-serif;
  text-align: center;
  text-decoration: none;
  -webkit-box-shadow: 0.5rem 0.5rem 3rem 1rem rgba(0, 0, 0, 0.19);
          box-shadow: 0.5rem 0.5rem 3rem 1rem rgba(0, 0, 0, 0.19);
  overflow: hidden;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  -o-transition: transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
  will-change: transform;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@media (min-width: 768px) {
  .btn {
    padding: 1rem 2.5rem;
  }
}
.btn::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #F05050;
  border-radius: 1000px;
  z-index: -1;
}
.btn:hover {
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
}
.btn:active {
  -webkit-transform: scale(0.95);
      -ms-transform: scale(0.95);
          transform: scale(0.95);
}
.btn.btn-big {
  font-weight: 900;
  text-transform: uppercase;
}
.btn.classic::before {
  background-color: #231961;
}
.btn.hard::before {
  background-color: #F05050;
}

.flag {
  display: inline-block;
  height: 1.5rem;
  width: 2rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.flag.af {
  background-image: url("/img/flags/af.svg");
}
.flag.za {
  background-image: url("/img/flags/za.svg");
}
.flag.al {
  background-image: url("/img/flags/al.svg");
}
.flag.dz {
  background-image: url("/img/flags/dz.svg");
}
.flag.de {
  background-image: url("/img/flags/de.svg");
}
.flag.ad {
  background-image: url("/img/flags/ad.svg");
}
.flag.ao {
  background-image: url("/img/flags/ao.svg");
}
.flag.ag {
  background-image: url("/img/flags/ag.svg");
}
.flag.sa {
  background-image: url("/img/flags/sa.svg");
}
.flag.ar {
  background-image: url("/img/flags/ar.svg");
}
.flag.am {
  background-image: url("/img/flags/am.svg");
}
.flag.au {
  background-image: url("/img/flags/au.svg");
}
.flag.at {
  background-image: url("/img/flags/at.svg");
}
.flag.az {
  background-image: url("/img/flags/az.svg");
}
.flag.bs {
  background-image: url("/img/flags/bs.svg");
}
.flag.bh {
  background-image: url("/img/flags/bh.svg");
}
.flag.bd {
  background-image: url("/img/flags/bd.svg");
}
.flag.bb {
  background-image: url("/img/flags/bb.svg");
}
.flag.by {
  background-image: url("/img/flags/by.svg");
}
.flag.be {
  background-image: url("/img/flags/be.svg");
}
.flag.bz {
  background-image: url("/img/flags/bz.svg");
}
.flag.bj {
  background-image: url("/img/flags/bj.svg");
}
.flag.bt {
  background-image: url("/img/flags/bt.svg");
}
.flag.bo {
  background-image: url("/img/flags/bo.svg");
}
.flag.ba {
  background-image: url("/img/flags/ba.svg");
}
.flag.bw {
  background-image: url("/img/flags/bw.svg");
}
.flag.br {
  background-image: url("/img/flags/br.svg");
}
.flag.bn {
  background-image: url("/img/flags/bn.svg");
}
.flag.bg {
  background-image: url("/img/flags/bg.svg");
}
.flag.bf {
  background-image: url("/img/flags/bf.svg");
}
.flag.bi {
  background-image: url("/img/flags/bi.svg");
}
.flag.cv {
  background-image: url("/img/flags/cv.svg");
}
.flag.kh {
  background-image: url("/img/flags/kh.svg");
}
.flag.cm {
  background-image: url("/img/flags/cm.svg");
}
.flag.ca {
  background-image: url("/img/flags/ca.svg");
}
.flag.cl {
  background-image: url("/img/flags/cl.svg");
}
.flag.cn {
  background-image: url("/img/flags/cn.svg");
}
.flag.cy {
  background-image: url("/img/flags/cy.svg");
}
.flag.co {
  background-image: url("/img/flags/co.svg");
}
.flag.km {
  background-image: url("/img/flags/km.svg");
}
.flag.cg {
  background-image: url("/img/flags/cg.svg");
}
.flag.cr {
  background-image: url("/img/flags/cr.svg");
}
.flag.ci {
  background-image: url("/img/flags/ci.svg");
}
.flag.hr {
  background-image: url("/img/flags/hr.svg");
}
.flag.cu {
  background-image: url("/img/flags/cu.svg");
}
.flag.dk {
  background-image: url("/img/flags/dk.svg");
}
.flag.dj {
  background-image: url("/img/flags/dj.svg");
}
.flag.dm {
  background-image: url("/img/flags/dm.svg");
}
.flag.eg {
  background-image: url("/img/flags/eg.svg");
}
.flag.sv {
  background-image: url("/img/flags/sv.svg");
}
.flag.ae {
  background-image: url("/img/flags/ae.svg");
}
.flag.ec {
  background-image: url("/img/flags/ec.svg");
}
.flag.er {
  background-image: url("/img/flags/er.svg");
}
.flag.es {
  background-image: url("/img/flags/es.svg");
}
.flag.ee {
  background-image: url("/img/flags/ee.svg");
}
.flag.sz {
  background-image: url("/img/flags/sz.svg");
}
.flag.us {
  background-image: url("/img/flags/us.svg");
}
.flag.et {
  background-image: url("/img/flags/et.svg");
}
.flag.ru {
  background-image: url("/img/flags/ru.svg");
}
.flag.fj {
  background-image: url("/img/flags/fj.svg");
}
.flag.fi {
  background-image: url("/img/flags/fi.svg");
}
.flag.fr {
  background-image: url("/img/flags/fr.svg");
}
.flag.ga {
  background-image: url("/img/flags/ga.svg");
}
.flag.gm {
  background-image: url("/img/flags/gm.svg");
}
.flag.ge {
  background-image: url("/img/flags/ge.svg");
}
.flag.gh {
  background-image: url("/img/flags/gh.svg");
}
.flag.gr {
  background-image: url("/img/flags/gr.svg");
}
.flag.gd {
  background-image: url("/img/flags/gd.svg");
}
.flag.gt {
  background-image: url("/img/flags/gt.svg");
}
.flag.gn {
  background-image: url("/img/flags/gn.svg");
}
.flag.gw {
  background-image: url("/img/flags/gw.svg");
}
.flag.gq {
  background-image: url("/img/flags/gq.svg");
}
.flag.gy {
  background-image: url("/img/flags/gy.svg");
}
.flag.ht {
  background-image: url("/img/flags/ht.svg");
}
.flag.hn {
  background-image: url("/img/flags/hn.svg");
}
.flag.hu {
  background-image: url("/img/flags/hu.svg");
}
.flag.mh {
  background-image: url("/img/flags/mh.svg");
}
.flag.sb {
  background-image: url("/img/flags/sb.svg");
}
.flag.in {
  background-image: url("/img/flags/in.svg");
}
.flag.id {
  background-image: url("/img/flags/id.svg");
}
.flag.ir {
  background-image: url("/img/flags/ir.svg");
}
.flag.iq {
  background-image: url("/img/flags/iq.svg");
}
.flag.ie {
  background-image: url("/img/flags/ie.svg");
}
.flag.is {
  background-image: url("/img/flags/is.svg");
}
.flag.il {
  background-image: url("/img/flags/il.svg");
}
.flag.it {
  background-image: url("/img/flags/it.svg");
}
.flag.jm {
  background-image: url("/img/flags/jm.svg");
}
.flag.jp {
  background-image: url("/img/flags/jp.svg");
}
.flag.jo {
  background-image: url("/img/flags/jo.svg");
}
.flag.kz {
  background-image: url("/img/flags/kz.svg");
}
.flag.ke {
  background-image: url("/img/flags/ke.svg");
}
.flag.kg {
  background-image: url("/img/flags/kg.svg");
}
.flag.ki {
  background-image: url("/img/flags/ki.svg");
}
.flag.kw {
  background-image: url("/img/flags/kw.svg");
}
.flag.ls {
  background-image: url("/img/flags/ls.svg");
}
.flag.lv {
  background-image: url("/img/flags/lv.svg");
}
.flag.lb {
  background-image: url("/img/flags/lb.svg");
}
.flag.lr {
  background-image: url("/img/flags/lr.svg");
}
.flag.ly {
  background-image: url("/img/flags/ly.svg");
}
.flag.li {
  background-image: url("/img/flags/li.svg");
}
.flag.lt {
  background-image: url("/img/flags/lt.svg");
}
.flag.lu {
  background-image: url("/img/flags/lu.svg");
}
.flag.mk {
  background-image: url("/img/flags/mk.svg");
}
.flag.mg {
  background-image: url("/img/flags/mg.svg");
}
.flag.my {
  background-image: url("/img/flags/my.svg");
}
.flag.mw {
  background-image: url("/img/flags/mw.svg");
}
.flag.mv {
  background-image: url("/img/flags/mv.svg");
}
.flag.ml {
  background-image: url("/img/flags/ml.svg");
}
.flag.mt {
  background-image: url("/img/flags/mt.svg");
}
.flag.ma {
  background-image: url("/img/flags/ma.svg");
}
.flag.mu {
  background-image: url("/img/flags/mu.svg");
}
.flag.mr {
  background-image: url("/img/flags/mr.svg");
}
.flag.mx {
  background-image: url("/img/flags/mx.svg");
}
.flag.fm {
  background-image: url("/img/flags/fm.svg");
}
.flag.mc {
  background-image: url("/img/flags/mc.svg");
}
.flag.mn {
  background-image: url("/img/flags/mn.svg");
}
.flag.me {
  background-image: url("/img/flags/me.svg");
}
.flag.mz {
  background-image: url("/img/flags/mz.svg");
}
.flag.mm {
  background-image: url("/img/flags/mm.svg");
}
.flag.na {
  background-image: url("/img/flags/na.svg");
}
.flag.nr {
  background-image: url("/img/flags/nr.svg");
}
.flag.np {
  background-image: url("/img/flags/np.svg");
}
.flag.ni {
  background-image: url("/img/flags/ni.svg");
}
.flag.ne {
  background-image: url("/img/flags/ne.svg");
}
.flag.ng {
  background-image: url("/img/flags/ng.svg");
}
.flag.no {
  background-image: url("/img/flags/no.svg");
}
.flag.nz {
  background-image: url("/img/flags/nz.svg");
}
.flag.om {
  background-image: url("/img/flags/om.svg");
}
.flag.ug {
  background-image: url("/img/flags/ug.svg");
}
.flag.uz {
  background-image: url("/img/flags/uz.svg");
}
.flag.pk {
  background-image: url("/img/flags/pk.svg");
}
.flag.pw {
  background-image: url("/img/flags/pw.svg");
}
.flag.pa {
  background-image: url("/img/flags/pa.svg");
}
.flag.pg {
  background-image: url("/img/flags/pg.svg");
}
.flag.py {
  background-image: url("/img/flags/py.svg");
}
.flag.nl {
  background-image: url("/img/flags/nl.svg");
}
.flag.pe {
  background-image: url("/img/flags/pe.svg");
}
.flag.ph {
  background-image: url("/img/flags/ph.svg");
}
.flag.pl {
  background-image: url("/img/flags/pl.svg");
}
.flag.pt {
  background-image: url("/img/flags/pt.svg");
}
.flag.qa {
  background-image: url("/img/flags/qa.svg");
}
.flag.sy {
  background-image: url("/img/flags/sy.svg");
}
.flag.cf {
  background-image: url("/img/flags/cf.svg");
}
.flag.kr {
  background-image: url("/img/flags/kr.svg");
}
.flag.cd {
  background-image: url("/img/flags/cd.svg");
}
.flag.la {
  background-image: url("/img/flags/la.svg");
}
.flag.md {
  background-image: url("/img/flags/md.svg");
}
.flag.do {
  background-image: url("/img/flags/do.svg");
}
.flag.kp {
  background-image: url("/img/flags/kp.svg");
}
.flag.cz {
  background-image: url("/img/flags/cz.svg");
}
.flag.tz {
  background-image: url("/img/flags/tz.svg");
}
.flag.ro {
  background-image: url("/img/flags/ro.svg");
}
.flag.gb {
  background-image: url("/img/flags/gb.svg");
}
.flag.rw {
  background-image: url("/img/flags/rw.svg");
}
.flag.lc {
  background-image: url("/img/flags/lc.svg");
}
.flag.kn {
  background-image: url("/img/flags/kn.svg");
}
.flag.sm {
  background-image: url("/img/flags/sm.svg");
}
.flag.vc {
  background-image: url("/img/flags/vc.svg");
}
.flag.ws {
  background-image: url("/img/flags/ws.svg");
}
.flag.st {
  background-image: url("/img/flags/st.svg");
}
.flag.sn {
  background-image: url("/img/flags/sn.svg");
}
.flag.rs {
  background-image: url("/img/flags/rs.svg");
}
.flag.sc {
  background-image: url("/img/flags/sc.svg");
}
.flag.sl {
  background-image: url("/img/flags/sl.svg");
}
.flag.sg {
  background-image: url("/img/flags/sg.svg");
}
.flag.sk {
  background-image: url("/img/flags/sk.svg");
}
.flag.si {
  background-image: url("/img/flags/si.svg");
}
.flag.so {
  background-image: url("/img/flags/so.svg");
}
.flag.sd {
  background-image: url("/img/flags/sd.svg");
}
.flag.ss {
  background-image: url("/img/flags/ss.svg");
}
.flag.lk {
  background-image: url("/img/flags/lk.svg");
}
.flag.se {
  background-image: url("/img/flags/se.svg");
}
.flag.ch {
  background-image: url("/img/flags/ch.svg");
}
.flag.sr {
  background-image: url("/img/flags/sr.svg");
}
.flag.tj {
  background-image: url("/img/flags/tj.svg");
}
.flag.td {
  background-image: url("/img/flags/td.svg");
}
.flag.th {
  background-image: url("/img/flags/th.svg");
}
.flag.tl {
  background-image: url("/img/flags/tl.svg");
}
.flag.tg {
  background-image: url("/img/flags/tg.svg");
}
.flag.to {
  background-image: url("/img/flags/to.svg");
}
.flag.tt {
  background-image: url("/img/flags/tt.svg");
}
.flag.tn {
  background-image: url("/img/flags/tn.svg");
}
.flag.tm {
  background-image: url("/img/flags/tm.svg");
}
.flag.tr {
  background-image: url("/img/flags/tr.svg");
}
.flag.tv {
  background-image: url("/img/flags/tv.svg");
}
.flag.ua {
  background-image: url("/img/flags/ua.svg");
}
.flag.uy {
  background-image: url("/img/flags/uy.svg");
}
.flag.vu {
  background-image: url("/img/flags/vu.svg");
}
.flag.ve {
  background-image: url("/img/flags/ve.svg");
}
.flag.vn {
  background-image: url("/img/flags/vn.svg");
}
.flag.ye {
  background-image: url("/img/flags/ye.svg");
}
.flag.zm {
  background-image: url("/img/flags/zm.svg");
}
.flag.zw {
  background-image: url("/img/flags/zw.svg");
}

footer {
  padding: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
footer .copyrights {
  font-size: 0.7rem;
  opacity: 0.8;
}
footer .copyrights a {
  color: white;
}

.game-card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 2rem;
  padding: 2rem;
  width: 100%;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@media (min-width: 390px) {
  .game-card {
    width: 47%;
  }
}
@media (min-width: 768px) {
  .game-card {
    width: 16rem;
  }
}
.game-card .background {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 2rem;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  -o-transition: transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
  will-change: transform;
  overflow: hidden;
}
.game-card .background::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #231961;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  -o-transition: transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
  will-change: transform;
}
.game-card .background::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(35, 25, 97, 0.8)), to(rgba(35, 25, 97, 0.6)));
  background-image: -o-linear-gradient(top, rgba(35, 25, 97, 0.8), rgba(35, 25, 97, 0.6));
  background-image: linear-gradient(to bottom, rgba(35, 25, 97, 0.8), rgba(35, 25, 97, 0.6));
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  -o-transition: transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
  will-change: transform;
}
.game-card.flag-nerd .background::before {
  background-image: url("/img/cards/flag-nerd.webp");
}
.game-card.capital-nerd .background::before {
  background-image: url("/img/cards/capital-nerd.webp");
}
@media (max-width: 767px) {
  .game-card.map-nerd {
    display: none;
  }
}
.game-card.map-nerd .background::before {
  background-image: url("/img/cards/map-nerd.webp");
}
.game-card.country-nerd .background::before {
  background-image: url("/img/cards/country-nerd.webp");
}
.game-card.country-nerd .background::after {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(35, 25, 97, 0.8)), to(rgba(35, 25, 97, 0.6)));
  background-image: -o-linear-gradient(top, rgba(35, 25, 97, 0.8), rgba(35, 25, 97, 0.6));
  background-image: linear-gradient(to bottom, rgba(35, 25, 97, 0.8), rgba(35, 25, 97, 0.6));
}
.game-card .card-inner {
  position: relative;
  height: 100%;
}
.game-card .card-first-step {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  cursor: pointer;
  -webkit-transition: opacity 0.3s ease-out;
  -o-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
}
.game-card .card-second-step {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.3s ease-out;
  -o-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
}
.game-card .card-second-step .card-mode-link {
  width: 100%;
}
.game-card.show-second-step .background::after {
  background-color: black;
}
.game-card.show-second-step .card-first-step {
  opacity: 0;
  pointer-events: none;
}
.game-card.show-second-step .card-second-step {
  opacity: 1;
  pointer-events: initial;
}
.game-card .card-title {
  margin-top: 0;
  position: relative;
}
.game-card .subtitle {
  font-size: 0.8rem;
}
.game-card .card-link {
  color: white;
  text-decoration: none;
  max-width: 10rem;
  font-size: 0.8rem;
}
.game-card .card-link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.game-card .card-bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.game-card .card-bottom .btn {
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  -o-transition: transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
  will-change: transform;
}
.game-card:hover .background {
  overflow: hidden;
}
.game-card:hover .background::before {
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
}
.game-card:hover .btn {
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
}

header {
  position: relative;
  z-index: 1;
  padding: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  pointer-events: none;
}
@media (max-width: 767px) {
  header {
    padding: 1rem;
  }
}
header .logo {
  pointer-events: initial;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  text-transform: uppercase;
  font-family: Albula, sans-serif;
  font-size: 2rem;
  line-height: 1em;
  font-weight: 900;
  color: white;
  text-decoration: none;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  -o-transition: transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
  will-change: transform;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
header .logo img {
  width: 11rem;
  height: 3rem;
  -webkit-transition: opacity 0.2s ease-out, -webkit-transform 0.2s ease-out;
  transition: opacity 0.2s ease-out, -webkit-transform 0.2s ease-out;
  -o-transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}
header .logo span {
  display: block;
}
header .logo:hover img {
  opacity: 0.9;
}
header .logo:active img {
  -webkit-transform: scale(0.96);
      -ms-transform: scale(0.96);
          transform: scale(0.96);
}
header .menu {
  pointer-events: initial;
  height: 4rem;
  width: 4rem;
  background-color: #31238a;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  -webkit-box-shadow: 0.1rem 0.1rem 1rem 0.5rem rgba(0, 0, 0, 0.08);
          box-shadow: 0.1rem 0.1rem 1rem 0.5rem rgba(0, 0, 0, 0.08);
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  -o-transition: transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
  will-change: transform;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
header .menu::before {
  content: "";
  position: absolute;
  height: 70%;
  width: 70%;
  top: 55%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-image: url("/img/settings.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
header .menu:hover {
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
}

.icon {
  display: none;
  height: 1.5em;
  width: 1.5em;
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: white;
  border-radius: 50%;
}
.icon.icon-country {
  background-image: url("/img/icon-country-nerd.svg");
}
.icon.icon-capital {
  background-image: url("/img/icon-capital-city-nerd.svg");
}
.icon.icon-flag {
  background-image: url("/img/icon-flag-nerd.svg");
}

.win-message {
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1.2rem;
  text-transform: uppercase;
  font-weight: 700;
  text-align: left;
}
.win-message.show {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.win-message p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.win-message .bigger {
  font-size: 2em;
  margin-right: 1rem;
}
.win-message .btn {
  margin-top: 1rem;
}
@media (max-width: 767px) {
  .win-message br {
    display: none;
  }
}

.loose-message {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  display: none;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 90%;
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1.2rem;
}
.loose-message.show {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.loose-message .btn {
  margin-top: 1rem;
}
/*# sourceMappingURL=app.css.map */