body {
      font-family: sans-serif;
      text-align: center;
      padding: 20px;
      background-color: #f4f4f4;
    }
    #quiz-container {
      background-color: white;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      max-width: 500px;
      margin: auto;
    }
  
    #question-area {
      text-align: left;
    }
    .question-block {
      margin-bottom: 25px;
      border-bottom: 1px solid #eee;
      padding-bottom: 20px;
    }
    .question-block p {
      font-size: 1.3em;
      margin-bottom: 15px;
      font-weight: bold;
    }
    
    .options label {
      display: block;
      width: 90%;
      padding: 15px;
      margin-bottom: 10px;
      font-size: 1.1em;
      cursor: pointer;
      border: 2px solid #007bff;
      background-color: white;
      color: #007bff;
      border-radius: 5px;
      transition: all 0.3s;
    }
    .options label:hover {
      background-color: #e6f2ff;
    }
    .options input[type="radio"] {
      display: none;
    }
    .options input[type="radio"]:checked + label {
      background-color: #007bff;
      color: white;
    }
    
    #submit-btn {
      width: 100%;
      padding: 15px;
      font-size: 1.2em;
      cursor: pointer;
      background-color: #28a745;
      color: white;
      border: none;
      border-radius: 5px;
      transition: background-color 0.3s;
    }
    #submit-btn:hover {
      background-color: #218838;
    }
    #error-msg {
      color: #dc3545;
      margin-top: 10px;
      display: none; 
    }

    #result {
      margin-top: 20px;
      font-size: 1.2em;
      text-align: left;
    }
    #result h3 {
      text-align: center;
      color: #dc3545;
    }

    #result-text {
      display: flex;
      flex-wrap: nowrap; 
      overflow-x: auto;
      justify-content: flex-start; 
      padding-bottom: 10px;
      align-items: stretch;
    }

    #result-text.single-result {
      justify-content: center;
      overflow-x: hidden;
    }

    .result-card {
      border: 1px solid #ddd;
      border-radius: 10px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      padding: 15px;
      margin: 10px;
      background-color: #f9f9f9;
      
      width: 300px; 
      flex-shrink: 0; 
      min-width: unset;
      
      box-sizing: border-box;
      text-align: center;
      
      display: flex;
      flex-direction: column;
    }

    #result-text.single-result .result-card {
      width: 80%;
      max-width: 400px;
      flex-shrink: 1;
    }

    .result-card img {
      width: 100%;
      max-width: 250px;
      height: auto;
      border-radius: 8px;
      margin: 0 auto 10px auto;
    }
    
    .result-card-name {
      font-size: 1.3em;
      font-weight: bold;
      margin-top: 10px;
      color: #333;
    }
    
    .result-comment {
      font-size: 0.95em;
      color: #555;
      margin-top: 15px;
      background-color: #fff;
      border: 1px dashed #ccc;
      padding: 10px;
      border-radius: 5px;
      text-align: left;
      
      flex-grow: 1; 
    }

@media (max-width: 600px) {

  body {
    padding: 10px;
  }

  #quiz-container {
    padding: 20px 15px; 
  }

  .question-block p {
    font-size: 1.2em;
  }

  .options label {
    font-size: 1.0em;
    padding: 12px;
    width: 95%; 
    margin: 0 auto 10px auto; 
  }

#result-text {

    flex-wrap: nowrap; 
    overflow-x: auto;  
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start; 
    padding-bottom: 10px;
  }

  .result-card {
    width: 250px;
    flex-shrink: 0; 
    min-width: unset; 
    margin: 10px; 
  }

  #result-text.single-result .result-card {
    width: 90%; 
    flex-shrink: 1; 
  }

  .result-card-name {
    font-size: 1.2em;
  }

  .result-comment {
    font-size: 0.9em;
  }
}
#retry-btn {

  display: flex;            
  align-items: center;      
  justify-content: center;   
  
  width: 80%;
  max-width: 300px;
  margin: 40px auto 0;       
  padding: 12px 20px;       
  
  font-size: 1.1em;
  color: #333;               
  cursor: pointer;
  font-family: sans-serif;   

  background-color: white;   
  border: 1px solid #ccc;    
  border-radius: 50px;    
  
  transition: all 0.3s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
}

#retry-btn:hover {
  background-color: #f9f9f9; 
  border-color: #999;       
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
}

#retry-btn svg {
  width: 2.2em;
  height: 2.2em;
}

#share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  
  width: 80%;
  max-width: 300px;
  margin: 30px auto 15px; 
  padding: 12px 20px;
  
  font-size: 1.1em;
  font-family: sans-serif;
  cursor: pointer;

  background-color: #000;
  color: #fff;
  border: 1px solid #000;
  border-radius: 50px;
  
  transition: all 0.3s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

#share-btn:hover {
  background-color: #333; 
  border-color: #333;
  transform: translateY(-2px); 
}