html,
body {
  margin: 0;
  padding: 0;
  font-family: "Libre Franklin", sans-serif;
}

html {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  background: #440112;
  background: radial-gradient(circle, rgba(227, 10, 51, 0.3) 0%, rgba(68, 1, 18, 0.5) 80%), linear-gradient(90deg, rgba(68, 1, 18, 0.5) 0%, rgba(120, 1, 26, 0.5) 8%, rgba(227, 10, 51, 0.5) 50%, rgba(120, 1, 26, 0.5) 91%, rgba(68, 1, 18, 0.5) 100%), linear-gradient(180deg, #440112 0%, #78011a 4%, #e30a33 20%, #440112 100%);
  background-repeat: no-repeat;
  font-family: Roboto, sans-serif;
  color: white;
  font-size: min(3vh, 15px);
}

html:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 35vw;
  background: transparent url(images/aside-hc.png) no-repeat bottom right;
  background-size: cover;
  z-index: 3;
}

@media screen and (max-height: 800px) {
  html:after {
    width: 30vw;
  }
}

@media screen and (max-height: 800px) and (min-width: 1500px) {
  html:after {
    background-size: contain;
  }
}

@media screen and (max-aspect-ratio: 3 / 2) {
  html:after {
    display: none;
  }
}

html.game-bc:after {
  background-image: url(images/aside-bc.png) !important;
}

@media screen and (min-height: 800px) {
  html.game-bc:after {
    background-size: 60vh;
  }
}

.green-basic-btn {
  --btn-height: 7.83vh;
  --btn-min-height: 30px;
  text-decoration: none;
  height: var(--btn-height);
  min-height: var(--btn-min-height);
  left: 1.887vh;
  right: 1.887vh;
  display: block;
  padding: 0;
  border: none;
  border-radius: 1.698vh;
  background: #4d8e11 linear-gradient(to bottom, #104c22, #89d000) no-repeat;
  box-shadow: inset 0.094vh 0.377vh 3px rgba(255, 255, 255, 0.8), inset 0 -0.283vh 2px rgba(0, 0, 0, 0.2), 0 0 7px rgba(0, 0, 0, 0.65), 0 0 3px rgba(0, 0, 0, 0.65);
  transition: filter .1s ease-out, box-shadow .1s ease-out;
  cursor: pointer;
}

@media screen and (min-height: 800px) {
  .green-basic-btn {
    --btn-height: 6vh;
  }
}

.green-basic-btn .effect-layer-1 {
  position: relative;
  display: block;
}

.green-basic-btn .effect-layer-1:after {
  content: '';
  display: block;
  position: absolute;
  top: 0.943vh;
  left: 0.943vh;
  right: 0.943vh;
  height: 1.887vh;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), transparent);
  border-radius: 1.887vh;
}

.green-basic-btn .effect-layer-2 {
  display: block;
}

.green-basic-btn .btn-text {
  padding: 0 1em;
  display: block;
  box-sizing: border-box;
  height: var(--btn-height);
  min-height: var(--btn-min-height);
  line-height: var(--btn-height);
  line-height: max(var(--btn-height), 30px);
  width: 100%;
  color: white;
  font-size: min(3.774vh, 25px);
  text-shadow: 0 2px 1px rgba(0, 0, 0, 0.6);
  font-weight: normal;
  font-family: sans-serif;
}

.container {
  width: 90%;
  margin: auto;
}

@media screen and (min-aspect-ratio: 3 / 2) {
  .container {
    width: 50%;
  }
}

.header,
.footer {
  padding-bottom: 1.5em;
  margin-bottom: 1.5em;
  position: relative;
  text-align: center;
}

.header:before,
.footer:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -5%;
  border-top: solid 1px white;
  width: 100vw;
  box-shadow: 0 0 10px white, 0 0 5px white, 0 0 2px white;
  z-index: 2;
}

@media screen and (min-aspect-ratio: 3 / 2) {
  .header:before,
  .footer:before {
    left: -50%;
  }
}

.header:after,
.footer:after {
  content: '';
  height: 8vh;
  position: absolute;
  bottom: -4vh;
  left: -5%;
  width: 100vw;
  background: radial-gradient(closest-side, rgba(254, 33, 33, 0.4) 0%, rgba(254, 33, 33, 0) 80%), linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 49.9%, rgba(254, 33, 33, 0.3) 50%, rgba(254, 33, 33, 0) 100%);
  z-index: 1;
}

@media screen and (min-aspect-ratio: 3 / 2) {
  .header:after,
  .footer:after {
    left: -50%;
  }
}

.body {
  position: relative;
  z-index: 10;
}

.footer {
  padding-top: 1.5em;
  padding-bottom: 0;
  margin-top: 1.5em;
  margin-bottom: 0;
  font-size: 0.9em;
}

.footer:before {
  top: 0;
  bottom: auto;
}

.footer:after {
  top: -4vh;
  bottom: auto;
}

h1 {
  margin-bottom: 0;
  font-weight: normal;
  font-size: min(7vh,5em);
}

h1 + div {
  font-size: 3vh;
}

@media all and (max-aspect-ratio: 1 / 1) {
  h1 {
    font-size: 5vh;
  }
}

.code-row {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 30vw;
  max-width: 400px;
  min-width: 300px;
  margin: auto;
}

.code-row .code-digit {
  width: 100%;
  background: transparent;
  border: solid 1px rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  padding: 15px 0;
  font-size: max(5vh, 4em);
  text-align: center;
  color: white;
}

.copy-form {
  display: flex;
  justify-content: center;
  padding: 2em;
}

.description {
  text-align: center;
  font-size: 1.2em;
}