/* Reset margins, paddings, and box sizing */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* Body styles including background image and layout */
    body {
      font-family: "Lexend Giga", serif; /* Historical and readable font */
      background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7)), url('https://i.pinimg.com/736x/4c/44/4f/4c444f3fb1e5c3935e8bf8196b6ba1fb.jpg') no-repeat center center/cover; /* Full-page background image */
      height: 100vh; /* Full viewport height */
      display: flex; /* Flexbox for layout */
      flex-direction: column; /* Arrange elements vertically */
      justify-content: space-between; /* Space out elements vertically */
      align-items: center; /* Center elements horizontally */
      color: white; /* White text for readability */
      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Text shadow for contrast */
      padding: 40px 5%; /* Added top and bottom margin */
      opacity: 0; /* Initially hidden */
      animation: fadeInBackground 1.5s ease-out forwards; /* Fade-in effect for background */
    }

    /* Keyframes for fading in background */
    @keyframes fadeInBackground {
      to {
        opacity: 1;
      }
    }

    /* Center content and add fade-in animation */
    .content {
      text-align: center; /* Center align text */
      width: 100%; /* Full width */
      opacity: 0; /* Initially hidden */
      animation: fadeInContent 1s ease-out forwards; /* Fade-in effect */
      animation-delay: 1.5s; /* Delay to synchronize animations */
    }

    /* Keyframes for fading in content */
    @keyframes fadeInContent {
      to {
        opacity: 1;
      }
    }

    /* Style for the main heading */
    .content h1 {
      font-size: 2rem; /* Heading size */
      margin-bottom: 20px; /* Space below heading */
      word-wrap: break-word; /* Ensure long words break properly */
    }

    /* Center input box vertically */
    .input-container {
      display: flex; /* Flexbox for centering */
      justify-content: center; /* Horizontal centering */
      align-items: center; /* Vertical centering */
      flex: 1; /* Take up available vertical space */
      width: 100%; /* Full width */
      text-align: center; /* Center align text */
      opacity: 0; /* Initially hidden */
      animation: fadeInInput 1s ease-out forwards; /* Fade-in effect */
      animation-delay: 2s; /* Delay to synchronize animations */
    }

    /* Keyframes for fading in input */
    @keyframes fadeInInput {
      to {
        opacity: 1;
      }
    }

    /* Style for the input text area */
    .input-container textarea {
      font-size: 1.25rem; /* Font size for text */
      padding: 10px; /* Inner padding */
      border: none; /* No border */
      border-radius: 8px; /* Rounded corners */
      width: 90%; /* Responsive width */
      max-width: 350px; /* Limit max width */
      height: 150px; /* Default height */
      text-align: center; /* Center align text */
      outline: none; /* No outline */
      word-wrap: break-word; /* Wrap long words */
      white-space: pre-wrap; /* Preserve line breaks */
      resize: none; /* Disable resizing */
      overflow: hidden; /* Hide overflow */
      background: transparent; /* Transparent background */
      color: #ffffff; /* Light text color */
      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); /* Text shadow for contrast */
      caret-color: white; /* White caret */
      font-family: "Lexend Giga", serif; /* Historical and readable font */
    }

    /* Placeholder styling for input box */
    .input-container textarea::placeholder {
      color: #ffffff; /* Light placeholder text color */
      opacity: 1; /* Full visibility */
      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); /* Shadow for better visibility */
    }

    /* Footer section styles */
    .footer {
      display: flex; /* Flexbox layout */
      flex-direction: column; /* Arrange items vertically */
      align-items: center; /* Center items horizontally */
      text-align: center; /* Center align text */
      opacity: 0; /* Initially hidden */
      animation: fadeInFooter 1s ease-out forwards; /* Fade-in effect */
      animation-delay: 2.5s; /* Delay to synchronize animations */
    }

    /* Keyframes for fading in footer */
    @keyframes fadeInFooter {
      to {
        opacity: 1;
      }
    }

    /* Footer text style */
    .footer p {
      font-size: 1rem; /* Font size for footer text */
      margin-bottom: 10px; /* Space below text */
    }

    /* Button styles */
    .footer button {
      font-size: 1rem; /* Button text size */
      padding: 10px 20px; /* Button padding */
      border: none; /* Remove border */
      border-radius: 5px; /* Rounded corners */
      background-color: rgba(144, 69, 30, 1.0); /* Initial gray background */
      color: white; /* White text */
      cursor: pointer; /* Pointer cursor on hover */
      transition: all 0.3s ease; /* Smooth transition for hover effect */
      margin-bottom: 10px; /* Add space between buttons */
      width:100%;
    }

    /* Hover effect for button */
    .footer button:hover {
      background-color: rgba(108, 69, 30, 1.0); /* Slightly darker gray on hover */
    }

    /* Button active state when clicked */
    .footer button.active {
      background-color: rgba(255, 69, 30, 1.0); /* Green background */
      color: white; /* White text */
      cursor: default; /* Default cursor */
    }

    /* Style for suggestion text */
    .suggestion {
      font-size: 1rem; /* Font size for suggestion text */
      margin-top: 10px; /* Space above suggestion */
      font-style: italic; /* Italicize text */
      text-align: center;
    }

    /* Media query for larger screens */
    @media (min-width: 768px) {
      .content h1 {
        font-size: 2.5rem; /* Larger heading size */
      }

      .input-container textarea {
        font-size: 1.5rem; /* Larger text area font */
        max-width: 400px; /* Increased max width */
        height: 200px; /* Increased height */
      }

      .footer p {
        font-size: 1.75rem; /* Larger footer text */
      }

      .footer button {
        font-size: 1.25rem; /* Larger button text */
      }

      .suggestion {
        font-size: 1.5rem; /* Larger suggestion text */
      }
    }