body {

      font-family: 'Roboto', sans-serif;

      background: #f8f9fa;

      padding: 10%;
      padding-top: 15%;
      padding-bottom: 10%;

      text-align: center;

      
      background-image: linear-gradient(130deg, #0F1541, #E8308A);
      background-repeat: no-repeat;   /* stops tiling */
      background-attachment: fixed;   /* keeps gradient fixed while scrolling */
      background-size: cover;         /* makes sure it fills the whole screen */



    }

    .quiz-container {

      max-width: 600px;

      margin: auto;

      background: white;

      padding: 5%;
      padding-bottom: 2%;
      padding-top: 10%;

      border-radius: 12px;

      box-shadow: 0 4px 8px rgba(0,0,0,0.1);

    }

    .question {

      font-size: 24px;

      font-family: 'Roboto', sans-serif;
      margin-bottom: 5%;

    }

    button {

      display: block;

      margin: 8px auto;

      padding: 3% 3%;

      border: none;

      border-radius: 8px;

      background: #E8308A;

      color: white;

      cursor: pointer;

      transition: background 0.2s;

      width: 90%;

      max-width: 500px;

      box-shadow: #0F1541;

      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);

       border: 1px solid #ff22aa;

       font-size: 80%;

    }

    button:hover {

      background: #0056b3;

    }

    #result {

      font-size: 18px;

      font-weight: bold;

      margin-top: 30px;

    }

    .secondary {

      font-size: 80%;

      font-weight: normal;

      margin-top: 15px;

      color: #444;

    }

    h1 {
        color: #f8f9fa;

    }