/* Modernized and Optimized Styling */
:root {
  --primary-color: #00689b;
  --secondary-color: #005f85;
  --text-color: #333;
  --header-color: #002f47;
  --background-color: #f4f7f9;
  --box-shadow-light: 0 4px 12px rgba(0, 0, 0, 0.1);
  --box-shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.15);
  --border-radius: 12px;
  --transition: all 0.3s ease;
}

/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Main Body Styling */
body {
  font-family: "Cairo", sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
  position: relative;
  top: 20px;
}

/* Header Styling */
h1 {
  color: var(--header-color);
  font-size: clamp(28px, 4vw, 36px);
  text-align: center;
  margin-bottom: 16px;
  font-weight: 600;
  position: relative;
  top: 15px;
}
  
yy {
  font-size: clamp(14px, 2vw, 17px); /* Flexible font size */
  color: #001; /* Changed black color to #000 for proper syntax */
  position: relative;
  top: 0px; /* Default top position */
}

/* Adjust for small devices (mobile phones) */
@media (max-width: 768px) {
  yy {
    font-size: clamp(12px, 3vw, 15px); /* Smaller font size for mobile */
    top: -10px; /* Adjust position for mobile */
  }
}

/* Adjust for medium devices (tablets) */
@media (min-width: 769px) and (max-width: 1024px) {
  yy {
    font-size: clamp(13px, 2.5vw, 16px); /* Adjust font size for tablets */
    top: -12px; /* Slight adjustment for tablets */
  }
}

/* Adjust for larger devices (desktops) */
@media (min-width: 1200px) {
  yy {
    font-size: clamp(14px, 2vw, 17px); /* Larger font size for desktops */
    top: -10px; /* Default position for large devices */
  }
}

/* Subtext with Modern Button Style */
.subtext {
  color: #fff;
  background-color: var(--primary-color);
  font-size: clamp(12px, 2vw, 14px); /* Flexible font size */
  font-weight: 700;
  text-align: center;
  padding: 10px 16px;
  border-radius: 12px;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  position: relative;
  top: 25px;
}

/* Adjust for small devices (mobile phones) */
@media (max-width: 768px) {
  .subtext {
    font-size: clamp(10px, 3vw, 12px); /* Smaller font size for mobile */
    top: 20px; /* Adjust positioning for small devices */
    padding: 8px 14px; /* Slightly smaller padding for mobile */
  }
}

/* Adjust for medium devices (tablets) */
@media (min-width: 769px) and (max-width: 1024px) {
  .subtext {
    font-size: clamp(11px, 2.5vw, 13px); /* Adjust font size for tablets */
    top: 22px; /* Adjust positioning for tablets */
    padding: 9px 15px; /* Slightly adjusted padding */
  }
}

/* Adjust for larger devices (desktops) */
@media (min-width: 1200px) {
  .subtext {
    font-size: clamp(12px, 2vw, 14px); /* Larger font size for desktops */
    top: 25px; /* Position remains as original for large devices */
  }
}

.subtext:hover {
  background-color: var(--secondary-color);
  transform: translateY(-4px);
}

#fixed-timer {
  position: fixed;
  top: 200px; /* Distance from the top */
  right: 20px; /* Adjust right positioning to be more flexible */
  background-color: var(--primary-color);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 10px;
  box-shadow: var(--box-shadow-light);
  z-index: 999; /* Ensures it stays above other content */
  transition: right 0.3s ease, top 0.3s ease; /* Smooth transition for positioning changes */
}

/* Adjust timer for smaller screens (mobile-first) */
@media (max-width: 600px) {
  #fixed-timer {
    right: 10px; /* Ensure it's not too far to the right on small screens */
    top: 150px; /* Adjust distance from the top for better visibility on smaller screens */
    font-size: 12px; /* Reduce font size for better fitting on smaller screens */
    padding: 8px 15px; /* Adjust padding for smaller screens */
  }
}

#fixed-timer span {
  font-weight: bold;
}

 /* Styling for the audio player container */
    audio {
      width: 100%; /* Make it responsive */
      max-width: 300px; /* Set a maximum width */
      height: 50px; /* Set the height */
      margin: 20px auto;
      position: relative;
  top: -5.5px;/* Center it vertically with some space 
      */
    
      background-color: #f5f5f5; /* Light background for player */
      border: 2px solid #ddd; /* Add a border */
      border-radius: 8px; /* Rounded corners */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow */
    }

    /* Add hover effects */
    audio:hover {
      border-color: #bbb; /* Darker border on hover */
      box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Slightly stronger shadow */
    }

    /* Responsive design for smaller devices */
    @media (max-width: 600px) {
      audio {
        max-width: 90%; /* Make sure it fits smaller screens */
      }

/* Image Styling */
.side-image {
  width: 100%;
  max-width: 250px;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow-light);
  margin: 20px auto;
  transition: var(--transition);
  position: relative;
  top: 10px;
}

percentage {
  display: none;
}

.side-image:hover {
  transform: scale(1.05);
  box-shadow: var(--box-shadow-hover);
}

/* Question Container */
.question {
  background: #fff;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow-light);
  padding: 20px;
  margin-bottom: 20px;
  transition: var(--transition);
  position: relative;
  top: -5px;
}

.question:hover {
  box-shadow: var(--box-shadow-hover);
  transform: translateY(-3px);
}

/* Hover effect for the instructions message */
#instructions-message:hover {
  background-color: #e0f7fa; /* Lighter cyan background when hovered */
  transform: scale(1.05); /* Slightly enlarge the message on hover */
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15); /* Deeper shadow on hover */
}

/* Responsive design for smaller devices */
@media (max-width: 768px) {
  #instructions-message {
    font-size: 16px; /* Slightly smaller font size for mobile */
    padding: 15px; /* Reduced padding for smaller screens */
    max-width: 90%; /* Make the container take up more space on mobile */
  }
}

@media (max-width: 480px) {
  #instructions-message {
    font-size: 14px; /* Further reduce font size for very small screens */
    padding: 12px; /* Reduce padding even more */
    max-width: 95%; /* Max width closer to full screen on very small screens */
  }
}

.question p {
  color: var(--text-color);
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 12px;
  position: relative;
  top: -3px;
}

/* Input Radio Styling */
input[type="radio"] {
  margin-right: 8px;
  cursor: pointer;
  accent-color: var(--primary-color);
  transition: var(--transition);
  position: relative;
  top: 1.3px;
}

input[type="radio"]:hover {
  transform: scale(1.1);
}

/* Button Styling */
button,
.submit-btn {
  background-color: var(--primary-color);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: block;
  margin: 20px auto 0;
  transition: var(--transition);
  position: relative;
  top: 8px;
}

button:hover,
.submit-btn:hover {
  background-color: var(--secondary-color);
  transform: scale(1.2);
}

/* Responsive Design */
@media (max-width: 768px) {
  h1 {
    font-size: 28px;
  }

  .question p {
    font-size: 16px;
  }

  .side-image {
    max-width: 180px;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 24px;
  }

  .subtext {
    font-size: 14px;
    padding: 8px 16px;
  }

  .side-image {
    max-width: 150px;
  }

  button {
    font-size: 14px;
    padding: 10px 16px;
  }
}