@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.5s ease-in forwards;
}

/* Base styles */
html {
  font-size: 100%; /* Default to 16px */
}

body {
  margin: 0;
  padding: 0;
}

.correct-letter {
  color: #008000;
}

.incorrect-letter {
  color: #cc0000;
}

/* Styles for the image display on desktop */
#wordImage {
  display: block;
  width: 15%; /* Default for desktop */
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
}

/* Adjustments for tablets */
@media (max-width: 768px) {
  #wordImage {
    width: 40%; /* Slightly larger on tablet screens */
    margin-left: auto;
    margin-right: auto;
  }
}

/* Further adjustments for mobile devices */
@media (max-width: 480px) {
  #wordImage {
    width: 60%; /* Even larger on mobile screens */
    margin-left: auto;
    margin-right: auto;
  }
}

/* Styles for the word display */
#wordDisplay {
  font-family: 'Helvetica', sans-serif;
  font-size: 7vw;
  letter-spacing: normal; /* Adjust if needed */
  text-align: center;
  margin: 0 auto; /* Ensure no side margins are pushing the text off-center */
  box-sizing: border-box; /* Include padding and borders in the element's total width and height */
  width: 100%; /* Full width to ensure proper centering */
}

/* Styles for the input field */
.word-input {
  font-family: 'Helvetica', sans-serif;
  font-size: 7vw; /* Larger font size that adjusts based on screen width */
  width: 90%;
  max-width: 800px; /* Optional: You can increase this if you want a larger max width */
  height: 120px; /* Increase the height if needed */
  padding: 15px 0;
  border: 2px solid #ddd;
  border-radius: 5px;
  margin: 10px auto; /* Increase margin if you want more space around the input box */
  text-align: center;
}

/* Styles for the message display */
.message {
  font-family: 'Helvetica', sans-serif;
  font-size: 2vw; /* Increase the font size */
  text-align: center;
  color: #333;
}

/* Center the container */
.container {
  display: flex;
  flex-direction: column;
  align-items: center; /* This will center children horizontally */
  width: 100%;
  margin: 0 auto;
}

.counter {
  font-family: 'Helvetica', sans-serif;
  font-size: 3em;
  color: #333;
  text-align: center;
  margin-top: 20px;
}

.word-input.uppercase {
  font-size: 7vw; /* Adjust this value as needed */
}

.word-input::placeholder {
  color: #666; /* Change placeholder text color as needed */
  opacity: 1; /* Make sure it's fully visible */
  font-style: italic;
}

/* Responsive adjustments with media queries */
@media (max-width: 768px) {
  /* Adjustments for tablets and mobile devices */
  #wordDisplay {
    font-size: 9vw; /* Further increase for smaller screens */
    height: 40px; /* Adjust height for tablets */
    margin-left: auto;
    margin-right: auto;
  }
  
  .word-input {
    font-size: 9vw; /* Adjust the font size for tablets */
    height: 40px; /* Adjust height for tablets */
    margin-top: 10px;
  }
  
  .message {
    font-size: 4vw;
  }

  .container {
    margin-top: 20px; /* Add some top margin on smaller screens */
  }

  .counter {
    margin-top: 5px; /* Add some top margin on very small screens */
  }
}

@media (max-width: 480px) {
  /* Further adjustments for mobile devices */
  #wordDisplay {
    font-size: 9vw; /* Further increase for smaller screens */
    height: 40px; /* Adjust height for tablets */
    margin-left: auto;
    margin-right: auto;
  }
  
  .word-input {
    font-size: 9vw; /* Adjust the font size for tablets */
    height: 40px; /* Adjust height for tablets */
    margin-top: 10px;
  }

  .message {
    font-size: 6vw;
  }

  .container {
    margin-top: 20px; /* Add some top margin on very small screens */
  }
  
  .counter {
    margin-top: 5px; /* Add some top margin on very small screens */
  }
}