/*General styling*/
body {
    margin:0.5rem;
    font-family: 'Playfair Display', serif;
    background-image: url("../images/background.png");
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    }

.quiz-card { 
   padding: 0.1rem;
  background-color: #fffaf7;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border: 2px solid #e2c6b6;
  border-radius: 20px;
  width: 100%;
  max-width: 300px;
  text-align: center;
}

#title{
      font-family: 'Dancing Script', cursive;
      font-size: 1.5rem;
      color: #b76e79;
      background: linear-gradient(to bottom right, #fdf6f0, #f9e1e0);
      border: 2px solid #e2c6b6;
      border-radius: 20px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.5);
      padding: 1rem;
      text-align: center;
      margin-bottom: 2rem;
     letter-spacing: 2px;
}


h2 {
    font-family: 'Playfair Display', cursive;
    font-size: 1.5rem;
    padding-top: 2rem;
    color: #b76e79;
    text-align: center;
   }
    
p {
      margin:1rem;
      font-family: 'Dancing Script', cursive;
      font-size: 1.5rem;
      color: #b76e79;
      background: #fffaf7;
      text-align: center;
   }

button {
      display: block;
      width: 100%;
      margin-bottom: 0.5rem;
      padding: 1rem;
      border: none;
      border-radius: 12px;
      background-color: #f3d6d6;
      color: #4a3c3c;
      font-size: 1rem;
      font-family: 'Playfair Display', serif;
      cursor: pointer;
      }

   /* To show and hide the screens */
.screen {
  display: none;
}

.screen.active {
  display: block;
}

/*Name and player title inputs*/
input, select {
 
      max-width: 100px;
      margin: 0.1rem;
      padding: 0.5rem;
      border: none;
      border-radius: 20px;
      background-color: #f3d6d6 ;
      color: #4a3c3c;
      font-size: 0.9rem;
      font-family: 'Playfair Display', serif;
      cursor: pointer;
}

/* Change input field color */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #f3d6d6 inset !important;
}

  /* Error message  */
.error-msg {
  color: #e74c3c;   /* red */
  font-size: 0.85em;
  display: block;
  margin-top: 4px;
}


/* Quiz screen*/

a {
        text-decoration: none;
    }
    
.quote {
  font-style: italic;
  font-size: 1.5rem;
  margin-top: 20px;
  color: #4a3c3c;
  position: relative;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.quote::before, .quote::after {
  content: '"';
  font-size: 2rem;
  color: #b76e79;
}

.options{
    padding: 0 1rem 1rem;
}

.options button {
  display: block;
  width: 100%;
  margin: 0.6rem 0;
  padding: 0.9rem;
  border: none;
  border-radius: 20px;
  background: linear-gradient(to right, #f9dede, #f3caca);
  color: #333;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

.options button:hover {
  background: linear-gradient(to right, #f7cfcf, #ebbaba);
  transform: translateY(-2px);
}

.options button.correct {
  background: #cde9d6;  /* soft green */
  border: 2px solid #5a8f64;
  color: #2f5132;
  transition: background-color 0.5s ease;
}

.options button.wrong {
  background: #f6d0d5;  /* soft red */
  border: 2px solid #b45c6e;
  color: #5c1f2e;
  transition: background-color 0.5s ease;
}

/* Score and question tracker*/
.quiz-info p{
    margin:0;
}
.quiz-info  {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Mute buttons*/

.mute-button button{
 display: block;
  width: 30%;
  max-width: 50px;
  margin: 5px;
  padding:0.5rem;
  border: none;
  border-radius: 20px;
  background: linear-gradient(to right, #f9dede, #f3caca);
  color: #4a3c3c;
   cursor: pointer;
  position: absolute;
   z-index: 1;
   font-size: 1rem;
}


/* High score screen*/

table {
      margin: 0 auto;
      border-collapse: collapse;
      width: 80%;
      max-width: 500px;
       color: #b76e79;
      background: linear-gradient(to bottom right, #fdf6f0, #f9e1e0);
      border: 2px solid #e2c6b6;
      box-shadow: 0 4px 20px rgba(0,0,0,0.5);
      padding: 1rem;
    }
    th, td {
      border: 1px solid #333;
         
    }
    th {
     font-size: 1rem;
    }

    /*Error page 404*/

body.centered {
  display: flex;
  margin: 0;
  height: 100vh;
  max-height: 100vh;
  align-items: center;
  justify-content: center;
}

#error-page .quiz-card{
  justify-content: center;
  width:100%
}

#error-page h1 {
    color: #b76e79;
     font-size: 3rem;
}

.button  {  
      margin-bottom: 0.5rem;
      padding: 1rem;
      border: none;
      border-radius: 12px;
      background-color: #f3d6d6;
}

.button a {
 color: #4a3c3c;
 font-size: 1rem;
 cursor: pointer;
 display: block;
 width:100%;
}


/* RESPONSIVE DESIGN */
@media (min-width: 425px) {
  /* for screens of 425px and bigger */

body {
   margin:2.5rem;
    max-height: 100vh;
    padding: 0;
    }

.quiz-card {

  max-width: 800px;
  width: 400px;
   padding: 15px;
}
  
#title{
    font-size: 2rem;
    padding:2rem;
    margin-bottom: 4rem;
      }

 h2, p {
    font-size: 2rem;
    padding:0;
    margin-bottom: 2rem;
    letter-spacing: 1px;
    }

h1 {
    font-size: 3rem;
    margin:0;
    padding-top: 2rem;
  }

 button{
     margin: 0.5rem 0;
      padding: 0.8rem;
    font-size: 1.5rem;
  }

 input, select {
 
      max-width:200px;
       margin: 0;
      padding: 0.5rem;
      font-size: 1rem;
      margin-top: 1rem;
 }

 #element {
    display:flex;
   justify-content: center;
   gap: 1.5rem;
  }

.quiz-info  {
  display: flex;
flex-direction: row;
  justify-content: space-between;
}

.quiz-info p {
 font-size: 1.5rem;
 padding: 0 1rem;
}

th, td {      
      padding: 0.5rem 1rem;
    }

.button a {

   font-size: 1.5rem;  
}

#error-page h1 {

     font-size: 5rem;
}

}

@media (min-width: 768px) {
  /* for screens of 768px and bigger */

 .quiz-card {
  width: 700px;
  
 }
}