/* The `FONT FACES` section in the CSS code is defining custom fonts using the `@font-face` rule. It
allows you to specify the font family, source URL, font weight, font style, and font display for
each custom font. These custom fonts can then be used throughout the rest of the CSS code by
referencing their font family name. */

@font-face {
  font-family: Gotham;
  src: url('fonts/GothamPro.woff') format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: Gotham;
  src: url('fonts/GothamPro-Medium.woff') format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: Gotham;
  src: url('fonts/GothamPro-Bold.woff') format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap
}

/* The `@media` rule in CSS is used to apply different styles to a webpage based on the characteristics
of the device or viewport. In this code snippet, there are multiple `@media` rules that target
different screen widths. */
@media (min-width: 1440px) {

  #gameStartScreen,
  #gameOverScreen {
    width: 600px;
  }

  #scoreLabel,
  #timeLabel {
    font-size: 1.4rem;
  }
}

@media (max-width: 1439px) {

  #gameStartScreen,
  #gameOverScreen {
    width: 500px;
  }

  #scoreLabel,
  #timeLabel {
    font-size: 1.4rem;
  }
}

@media (max-width: 1279px) {

  #gameStartScreen,
  #gameOverScreen {
    width: 500px;
  }

  #scoreLabel,
  #timeLabel {
    font-size: 1.2rem;
  }
}

@media (max-width: 1023px) {

  #gameStartScreen,
  #gameOverScreen {
    width: 400px;
  }

  #scoreLabel,
  #timeLabel {
    font-size: 1.1rem;
  }
}

@media (max-width: 600px) {

  #gameStartScreen,
  #gameOverScreen {
    width: 80%;
  }

  #scoreLabel,
  #timeLabel {
    font-size: 1.05rem;
  }
}

@media (max-width: 500px) {

  #gameStartScreen,
  #gameOverScreen {
    width: 90%;
  }

  #scoreLabel,
  #timeLabel {
    font-size: 1rem;
  }
}

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

body {
  font-family: Gotham, Open Sans, Helvetica Neue, arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  overflow: hidden;
  background-color: #161223;
  background: url('img/background/1.jpg') no-repeat center center fixed;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  -webkit-transition: background-image 0.5s ease-out;
  -moz-transition: background-image 0.5s ease-out;
  -ms-transition: background-image 0.5s ease-out;
  -o-transition: background-image 0.5s ease-out;
  transition: background-image 0.5s ease-out;
}

canvas {
  display: block;
  margin: 0 auto;
}

#gameCanvas {
  transform-origin: center center;
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

.logo img {
  display: block;
  height: 100px;
  max-height: 100%;
}

#countDownPopup {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: rgba(20, 23, 28, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 25px 90px -30px rgba(0, 0, 0, 0.8);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#countdown {
  display: none;
  font-size: 4rem;
  font-weight: 700;
  color: #fc0;
}

#gameStartScreen {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: rgba(20, 23, 28, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 25px 90px -30px rgba(0, 0, 0, 0.8);
  padding: 20px;
  border-radius: 10px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#startQuestion {
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
}

#startButton {
  display: block;
  position: relative;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

button {
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit;
  -webkit-tap-highlight-color: transparent;
}

:focus {
  outline-style: solid;
  outline-color: transparent;
}

.button-style {
  position: relative;
  font-size: 1.4rem;
  color: white;
  text-decoration: none;
  letter-spacing: 1px;
  border: 1px solid white;
  border-radius: 12px;
  padding: 15px;
  margin-block-start: 1em;
  margin-block-end: 1em;
  transition-property: border-color;
  transition-duration: .2s;
  cursor: pointer;

  &:hover,
  &:focus-visible {
    border-color: transparent;

    &::before {
      opacity: 1;
    }
  }

  &:active {
    &::after {
      opacity: 1;
    }
  }
}

.button-style::before,
.button-style::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition-property: opacity;
}

.button-style::before {
  box-shadow:
    0 0 2px #fff,
    0 -2px 6px #f3c523,
    2px 0 6px #94c535,
    -2px 0 6px #ba6ea4,
    0 2px 6px #43acc9;
  transition-duration: .15s;
}

.button-style::after {
  box-shadow:
    0 0 8px 4px #fff,
    0 -4px 12px 4px #f3c523,
    0 4px 12px 4px #43acc9,
    -4px 0 12px 4px #e6514d,
    4px 0 12px 4px #94c535;
  transition-duration: .2s;
}

#scoreLabel {
  display: none;
  position: absolute;
  pointer-events: none;
  top: 10px;
  left: 10px;
  padding: 5px;
  border-radius: 5px;
  background-color: rgba(20, 23, 28, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: white;
  font-family: Gotham, Open Sans, Helvetica Neue, arial, sans-serif;
  font-weight: 500;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  z-index: 1;
}

#timeLabel {
  display: none;
  position: absolute;
  pointer-events: none;
  top: 10px;
  right: 10px;
  padding: 5px;
  border-radius: 5px;
  background-color: rgba(20, 23, 28, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: white;
  font-family: Gotham, Open Sans, Helvetica Neue, arial, sans-serif;
  font-weight: 500;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  z-index: 1;
}

.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

#gameOverScreen {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: rgba(20, 23, 28, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 25px 90px -30px rgba(0, 0, 0, 0.8);
  padding: 20px;
  text-align: center;
  font-size: 1.4rem;
  color: white;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

.fadeIn {
  -webkit-animation: fadeIn .25s ease-in-out alternate;
  -moz-animation: fadeIn .25s ease-in-out alternate;
  -o-animation: fadeIn .25s ease-in-out alternate;
  animation: fadeIn .25s ease-in-out alternate;
}

#restartButton {
  display: none;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

.be-better {
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
}

.accordion_container {
  display: block;
  /* height: 65px; */
  position: relative;
  padding: 25px;
}

.accordion {
  color: white;
  border: 1px solid white;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  border-radius: 12px;
}

.accordion:not(:last-of-type) {
  margin-bottom: 10px;
}

.accordion_top {
  position: relative;
  padding: 15px 25px;
  font-size: 1.1rem;
  font-weight: 500;
  cursor: pointer;
}

.accordion_top::after {
  content: "+";
  position: absolute;
  right: 24px;
}

.accordion_top:hover {
  box-shadow: 0 0 2px #fff, 0 -2px 6px #f3c523, 2px 0 6px #94c535, -2px 0 6px #ba6ea4, 0 2px 6px #43acc9;
  transition-duration: .15s;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  border-radius: 12px;
}

.accordion_opened>.accordion_top {
  border-bottom: 2px solid white;
}

.accordion_opened>.accordion_top::after {
  content: "-";
}

.accordion_body {
  max-height: 0px;
  overflow: hidden;
  -webkit-transition: height ease-out 0.25s, padding ease-out 0.15s;
  -moz-transition: height ease-out 0.25s, padding ease-out 0.15s;
  -ms-transition: height ease-out 0.25s, padding ease-out 0.15s;
  -o-transition: height ease-out 0.25s, padding ease-out 0.15s;
  transition: height ease-out 0.25s, padding ease-out 0.15s;
}

.accordion_body ol,
.accordion_body ul {
  padding: 0 10px;
}

.accordion_body ol li:not(:last-child),
.accordion_body ul li:not(:last-child) {
  margin-bottom: 10px;
}

.accordion_opened>.accordion_body {
  max-height: max-content;
  text-align: left;
  line-height: 1.2;
  padding: 20px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}