:root {
      --primary-color: #ff6f61;  /* Default Primary Color */
      --secondary-color: #FFE75E; /* Default Secondary Color */
      --button-color: #38BEBA; /* Default button color */
    }

    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f9f7f7;
      color: #333;
	 
      width: 960px;
      max-width: 100vw;
      margin: 0 auto;
    }
	.welcome-container{
	max-width: 800px;
      margin: 20px auto;
      padding: 20px;
      border-radius: 10px;
      background-color: #f0ece2;
	 
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      text-align: center;
	   background-image: url("images/bg.jpg");
	  background-size: contain;
    background-repeat: no-repeat;
	}
    .container {
      max-width: 800px;
      margin: 20px auto;
      padding: 20px;
      border-radius: 10px;
      background-color: #f0ece2;
	 
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      text-align: center;
	  
    }
	.maskarea
	{
	position: relative;
      z-index: 15;
      box-shadow: 0px 0px 16px #AAA;
      width: 100%;
	   background-color: #000;
	}
    h1 {
      color: var(--primary-color);
    }
    .instructions {
      text-align: left;
      margin: 20px 0;
      background-color: #FFF;
      padding: 12px;
      padding-top: 12px;
      border-radius: 8px;
      padding-top: 1px;
    }
    #name-input-section p {
      margin-bottom: 0px;
      margin-top: 36px;
    }
    .button {
      display: inline-block;
      padding: 10px 20px;
      margin: 20px auto;
      background-color: var(--button-color);
      border: none;
      border-radius: 5px;
      color: white;
      font-size: 1rem;
      font-weight: 700;
      text-transform: uppercase;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    .button:hover {
      background-color: #0e918c;
    }
    .logo {
      max-width: 200px;
      margin: 20px auto;
    }
    .image {
      max-width: 100%;
      height: auto;
      margin: 20px 0;
    }
    #quiz-screen {
      position: relative;
      z-index: 2;
      box-shadow: 0px 0px 16px #AAA;
      width: 80vw;
	   background-color: #c1ff72;
	  
    }
    #quiz-screen h1 {
      color: #333;
      font-size: 1rem;
      border-bottom: 1px solid var(--primary-color);
      padding-bottom: 6px;
      margin-bottom: 24px;
    }
    p.question {
      padding: 20px 0;
      text-align: center;
      color: #000;
      font-weight: 700;
      font-size: 1.2em;
      margin: 10px auto;
      background: var(--secondary-color);
      border-radius: 8px;
      box-shadow: 0px 0px 16px #CCC;
      }
    .options {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .option {
      padding: 10px;
      border-radius: 8px;
      background-color: #FFFFFF;
      border: 0px solid #d1d1d1;
      cursor: pointer;
      transition: background-color 0.3s;
      width: 80%;
      margin: 6px auto;
    }
    .option:hover {
      background-color: #EEEEEE;
    }
    .option.correct {
      background-color: #d4edda;
      color: #155724;
    }
    .option.wrong {
      background-color: #f8d7da;
      color: #721c24;
    }
    .score {
      font-size: 1.2rem;
      margin-top: 20px;
      color: #2b5876;
    }
    .gif {
      max-height: 100px;
      margin: 20px 0;
      padding: 12px;
      background-color: #FFF;
      border-radius: 50%;
      box-shadow: 0px 0px 16px #666;
	  background-image:none;
    }
    .feedback {
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      background-color: transparent;
      box-shadow: 0px 0px 0px #FFFFFF;
      border-radius: 0px 0px 8px 8px;
      width: 80%;
      margin: 0px auto;
      margin-top: -20px;
    }
    #feedback-section {
      position: absolute;
      top: 20%;
      z-index: 15;
      width: 200px;
      margin: 0 auto;
      left: 50%;
      transform: translate(-50%, 0%);
      height: 0px;
    }
    #next-button, #try-again-button, #show-summary {
      margin-top: -40px;
      box-shadow: 0px 0px 16px #AAA;
    }
    .name-input {
      margin-top: 10px;
      padding: 10px;
      width: 40%;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 1rem;
      font-size: 1rem;
      min-width: 150px;
      text-align: center;
      font-weight: 700;
    }
    img#welcome {
      max-height: 200px;
      border-radius: 50%;
      display: block;
      margin: 0 auto;
      margin-top: 24px;
    }
    #summary-screen h2 {
      text-align: center;
      color: var(--primary-color);
    }
    #summary-screen p {
      text-align: center;
      line-height: 150%;
      margin: 0px 48px;
    }
    #summary-logo {
      max-width: 125px;
      margin: 0px;
    }
    #summary-screen {
      background-image: url(images/congrats-placeholder-bg.gif);
    }
    #final-score {
      font-size: 5rem;
      color: var(--primary-color);
      font-weight: 700;
      position: absolute;
      left: 50%;
      width: 40px;
      margin-left: -20px;
      transform: translate(0px, 36px);
    }
    #title-area {
      margin-top: 12px;
      margin-bottom: 12px;
    }
    #brandImage {
      padding: 12px;
      border-radius: 12px;
      width: 256px;
      max-width: 80vw;
    }