@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&display=swap');

* {
  font-size: 30px;
  font-family: 'Gaegu', cursive;
}

.grey {
  /* ref: https://codemyui.com/grayscale-emoji-using-css/ */
  -webkit-filter: grayscale(100%);
   filter: grayscale(100%);
}

.correct-answer {
  color: red;
}

body {
  font-family: sans-serif;
  background-color: #191919;
}

.container {
  padding: 2%;
  background-color: orange;
  margin: auto;
  margin-top: 5%;
  border-radius: 25px;
  width: 50%;
  height: 60%;
}

.score-area {
  margin-top: 2%;
  text-align: center;
}

.question-display {
  margin-top: 10%;
  text-align: center;
}

.choice-display {
  margin-left: auto;
  text-align: center;
}

.user-answer {
  margin-bottom: 5%;
  text-align: center;
}

.image-display img {
  /* width: 350px; */
  width: 70%;
  margin-left: 15%;
  object-fit: cover;
}

.next-question {
  margin-left: auto;
  margin-top: 5%;
  text-align: center;
}

button { 
  font-size: 24px;
  margin-right: 20px;
  padding: 2%;
}


/* Button from Josh Comeau: https://www.joshwcomeau.com/animation/3d-button/ */

.pushable {
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline-offset: 4px;
  transition: filter 250ms;
}

.shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: hsl(0deg 0% 0% / 0.25);
  will-change: transform;
  transform: translateY(2px);
  transition:
    transform
    600ms
    cubic-bezier(.3, .7, .4, 1);
}
.edge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(
    to left,
    hsl(340deg 100% 16%) 0%,
    hsl(340deg 100% 32%) 8%,
    hsl(340deg 100% 32%) 92%,
    hsl(340deg 100% 16%) 100%
  );
}
.front {
  display: block;
  position: relative;
  padding: 12px 42px;
  border-radius: 12px;
  font-size: 1.25rem;
  color: white;
  background: hsl(345deg 100% 47%);
  will-change: transform;
  transform: translateY(-4px);
  transition:
    transform
    600ms
    cubic-bezier(.3, .7, .4, 1);
}
.pushable:hover {
  filter: brightness(110%);
}
.pushable:hover .front {
  transform: translateY(-6px);
  transition:
    transform
    250ms
    cubic-bezier(.3, .7, .4, 1.5);
}
.pushable:active .front {
  transform: translateY(-2px);
  transition: transform 34ms;
}
.pushable:hover .shadow {
  transform: translateY(4px);
  transition:
    transform
    250ms
    cubic-bezier(.3, .7, .4, 1.5);
}
.pushable:active .shadow {
  transform: translateY(1px);
  transition: transform 34ms;
}
.pushable:focus:not(:focus-visible) {
  outline: none;
}


@media screen and (max-width:570px) {
  /* for displays 0~320px */
  * {
        /* background-color: blue; */
        font-size: 45px;
      line-height: .8;
    }
  
      .container {
        padding: 2%;
        background-color: orange;
        margin: auto;
        margin-top: 5%;
        border-radius: 25px;
        width: 80%;
        height: 75%;
      }
      .question-display {
        margin-top: 10%;
        text-align: center;}

      .front {
        display: block;
        position: relative;
        padding: 23px 24px;
        border-radius: 12px;
        font-size: 1.25rem;
        color: white;
        will-change: transform;
        transform: translateY(-4px);
        transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
    }

    .score-area {
      margin-top: 8%;
    }

    .user-answer {
      margin-bottom: 2%;
      margin-top: 5%;
      text-align: center;
  }


}

@media screen and (min-width:571px) and (max-width:639px) {
  /* for displays between 321px and 639px */
    * {
      /* background-color: khaki; */
      font-size: 45px;}

    .container {
      padding: 2%;
      background-color: orange;
      margin: auto;
      margin-top: 5%;
      border-radius: 25px;
      width: 80%;
      height: 75%;
    }
    .question-display {
      margin-top: 10%;
      text-align: center;
    }
    



}
@media screen and (min-width:640px) and (max-width:959px) {
  /* for displays between 640px and 959px */
* {
  /* background-color: blue; */
}
    .question-display {
      font-size: 50px;
    }

    .container {
      width: 80%;
    }

}
@media screen and (min-width:960px) and (max-width:1279px) {
  /* for displays between 960px and 1279px */
* {
  /* background-color: beige; */
}

.question-display {
  font-size: 50px;
}

.container {
  padding: 2px;
  width: 80%;
  height: 20%;
}

.image-display img {
  width: 65%;
  margin-left: 15%;
  object-fit: cover;
}

.question-display {
  margin-top: 5%;
  text-align: center;
}


}
@media screen and (min-width:1280px) and (max-width:1599px) {
  /* for displays between 1280px and 1599 px */

}
@media screen and (min-width:1600px) {
  /* for displays larger than 1600px */

}
@media screen and (min-width:1920px) {
  /* for displays larger than 1920px */

}
@media print {
  /* for print layout */

}