@charset "UTF-8";
@property --rotation {
  syntax: "<angle>";
  initial-value: 0turn;
  inherits: false;
}
@layer reset {
  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  button,
  input {
    font: inherit;
  }
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 1s;
}

.bitcount-single-google-font {
  font-family: "Bitcount Single", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "slnt" 0, "CRSV" 0.5, "ELSH" 0, "ELXP" 0;
}

.red {
  background-color: hsl(0, 81%, 44%);
}

.blue {
  background-color: hsl(240, 82%, 54%);
}

.green {
  background-color: hsl(120, 85%, 33%);
}

.correct-answer {
  color: hsl(120, 85%, 33%);
}

.incorrect-answer {
  color: hsl(0, 81%, 44%);
}

body {
  color: hsl(60, 24%, 96%);
}

body.home-page-body {
  background-image: url("../assets/landing_page_2.png");
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  position: relative;
}
body.home-page-body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.9));
}

body.game-page-body {
  background-image: url("../assets/game_page.png");
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  position: relative;
}
body.game-page-body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.9));
}

.wrapper {
  min-block-size: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
}

.footer {
  padding-block: 1.6em;
  padding-inline: 2em;
}

p {
  margin-block-end: 1.5rem;
}

.button {
  line-height: 2;
  padding-inline: 2ch;
  font-size: 1.2rem;
  cursor: pointer;
  color: hsl(0, 0%, 0%);
  background-color: hsl(60, 24%, 96%);
}
.button:disabled {
  background-color: hsl(0, 0%, 50%);
}
.button--play-game {
  font-size: 1.6rem;
  border: 4px solid transparent;
  background: linear-gradient(hsl(60, 24%, 96%), hsl(60, 24%, 96%)) padding-box, conic-gradient(from var(--rotation), red, green, yellow, blue, purple, red) border-box;
}
@media (prefers-reduced-motion: no-preference) {
  .button--play-game {
    animation-name: color-rotation, bounce;
    animation-duration: 30s, 1100ms;
    animation-iteration-count: infinite;
  }
}
.button--play-game {
  box-shadow: 5px 5px 10px hsl(0, 0%, 0%);
  border-radius: 0.5rem;
}
.button--how-to-play {
  box-shadow: 5px 5px 10px hsl(0, 0%, 0%);
  border: none;
}
.button--submit, .button--next-lvl-or-end-game {
  font-size: 1rem;
}
.button--next-lvl-or-end-game {
  font-weight: 500;
}
.button.end-game-style {
  background-color: hsl(0, 81%, 44%);
  color: hsl(60, 24%, 96%);
}
.button.next-level-style {
  background-color: hsl(240, 82%, 54%);
  color: hsl(60, 24%, 96%);
}

.hidden {
  display: none;
}

.home-page-wrapper {
  block-size: 100%;
}

.play-game-btn-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  row-gap: 2.5em;
  block-size: 100%;
}
.play-game-btn-wrapper__heading {
  font-size: clamp(2.2rem, 8vw, 3rem);
  text-align: center;
}
.play-game-btn-wrapper__span {
  color: hsl(24, 74%, 49%);
}

.dialog {
  margin: auto;
  padding-inline: min(10%, 2.5em);
  padding-block: 2.5em;
  inline-size: min(90%, 600px);
  background-color: rgb(from hsl(0, 0%, 0%) r g calc(b + 10));
  color: hsl(60, 24%, 96%);
  display: none;
  opacity: 0;
  translate: 0 25vh;
  transition: all 1s allow-discrete;
}
.dialog[open] {
  opacity: 1;
  display: block;
  translate: 0 0;
}
@starting-style {
  .dialog[open] {
    opacity: 0;
    translate: 0 25vh;
  }
}
.dialog__heading {
  margin-block-end: 0.5em;
}
@media (width >= 200px) {
  .dialog__heading {
    width: 15ch;
  }
}
@media (width >= 500px) {
  .dialog__heading {
    width: fit-content;
  }
}
.dialog__button {
  border-radius: 100vw;
  border: none;
  position: absolute;
  inset-block-start: 1em;
  inset-inline-end: 1em;
  background-color: rgb(from hsl(0, 0%, 0%) r g calc(b + 40));
}
.dialog__button::before {
  content: " ×";
  font-size: 1.5rem;
  color: hsl(60, 24%, 96%);
}

.high-score-wrapper {
  text-align: center;
  padding: 1.5em;
  backdrop-filter: blur(10px);
  border-radius: 5rem;
}

.game-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  display: none;
  inline-size: min(90%, 600px);
  margin-inline: auto;
  padding-block: 2.5em;
}
.game-wrapper__heading {
  margin-block: 1em;
}
.game-wrapper__board {
  margin-block-end: 0.8em;
}
.game-wrapper__num-of-lives-heading {
  margin-block-end: 0.5em;
  font-size: 0.85rem;
}

.form-wrapper {
  inline-size: 100%;
  padding-inline: 0.2em;
  margin-block-end: 2em;
}

.answer-form__input-wrapper {
  margin-block-end: 1.2em;
}
.answer-form__input-wrapper label {
  display: block;
}
.answer-form__input-wrapper input {
  margin-block-start: 0.5em;
  padding-inline-start: 0.5em;
  padding-block: 0.8em;
  inline-size: 100%;
  background-color: rgb(from hsl(0, 0%, 0%) r g b/calc(alpha - 0.4));
  border-radius: 0.5rem;
  color: inherit;
}
.answer-form__input-wrapper input:disabled {
  background-color: hsl(0, 0%, 50%);
}

.answer-form__btn-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}

.correct-incorrect-text {
  font-size: 1.2rem;
  padding-block: 0.8em;
  margin-block-end: 1rem;
}

.correct-incorrect-text,
.correct-incorrect-text-wrapper__display-correct-answer {
  text-align: center;
}

table {
  background-color: hsl(195, 53%, 79%);
}
table td {
  inline-size: 5em;
  block-size: 3em;
  background-color: hsl(195, 53%, 79%);
}

.popover {
  position: relative;
  margin: auto;
  text-align: center;
  padding: 3em;
  background-color: rgb(from hsl(0, 0%, 0%) r g calc(b + 10));
  color: hsl(60, 24%, 96%);
  border-radius: 1rem;
  inline-size: min(90%, 400px);
}
.popover button {
  border-radius: 100vw;
  border: none;
  position: absolute;
  inset-block-start: 1em;
  inset-inline-end: 1em;
  background-color: rgb(from hsl(0, 0%, 0%) r g calc(b + 40));
}
.popover button::before {
  content: " ×";
  font-size: 1.5rem;
  color: hsl(60, 24%, 96%);
}
.popover__heading {
  margin-block-start: 1.5em;
  margin-block-end: 1em;
}
.popover__new-level-text {
  background: conic-gradient(red, green, yellow, blue, purple, red);
  background-clip: text;
  color: transparent;
  font-size: 1.5rem;
}

@keyframes color-rotation {
  from {
    --rotation: 0turn;
  }
  to {
    --rotation: 1turn;
  }
}
@keyframes bounce {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-3px);
  }
  100% {
    transform: translateY(0px);
  }
}