#answers {
      text-align: center;
}

.answer_btn {
      transition: 0.20s ease-in-out;
      border: solid 2px #151922;
      cursor: pointer;
      color: white;
      background-color: #222831;
      text-align: center;
}

.answer_btn:hover {
      background-color: #36454F;
}

.refresh_before {
      width: 55vw;
      height: 1px;
      margin: 2.5vh;
      background-color: white;
      border: none;
}

.refresh_after {
      font-weight: 900;
      background-color: #222831;
      border: solid 2px #151922;
      color: white;
}

.refresh_after:hover {
      background-color: #36454F;
      cursor: pointer;
}

#refresh {
      transition: all 0.25s ease-in-out;
}

#question_section {
      display: flex;
      flex-direction: column;
      align-items: center;
      vertical-align: super;
}

#calc {
      position: absolute;
      text-align: center;
      font-weight: 700;
}

#correct {
      color: green;
}

#incorrect {
      color: red;
}

#percentage {
      color: blueviolet;
}

@media screen and (orientation: landscape) {
      .refresh_after {
            width: 15vw;
            height: 6vh;
            margin: 1vh;
            font-size: 3vh;
      }

      #answers {
            display: flex;
            justify-content: space-between;
            width: 70vw;
      }

      .answer_btn {
            width: 33vw;
            height: 8vh;
            margin: 1vw;
            font-size: 1.6vh;
      }

      #question_section {
            width: 75vw;
      }
      
      .question {
            font-size: 2.5vh;
            height: 7vh;
            font-weight: 700;
            text-shadow: black 0px 5px 5px;
            text-align: center;
            padding: 2vh;
      }

      img, video {
            margin: 1vh;
            max-height: 17vw;
            max-width: 35vw;
      }

      #calc {
            left: 3vh;
            font-size: 2vh;
      }
}

@media screen and (orientation: portrait) {
      .refresh_after {
            width: 15vh;
            height: 6vw;
            font-size: 2.5vw;
            margin: 2vw;
      }

      #answers {
            display: flex;
            justify-content: space-between;
            width: 100vw;
      }

      #left {
            margin-left: 2vh;
      }

      #right {
            margin-right: 2vh;
      }

      .answer_btn {
            width: 40vw;
            height: 6vh;
            margin: 1vh;
            font-size: 2vw;
      }

      #question_section {
            height: auto;
            width: 70vh;
      }
      
      .question {
            font-size: 2.5vw;
            height: 10vw;
            font-weight: 700;
            text-shadow: black 0px 5px 5px;
            text-align: center;
            padding: 2vw;
      }

      img, video {
            margin: 1vh;
            max-height: 10vh;
            max-width: 50vw;
      }

      #calc {
            left: 3vw;
            font-size: 2vw;
      }
}