body {
  background-color: gold;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* Changed from max-height to min-height to allow for smaller devices */
  overflow-y: auto; /* Changed from hidden to auto to allow scrolling */
  margin: 0;
  box-sizing: border-box;
  font-size: clamp(1rem, 2vw, 1.2rem); /* Responsive font size */
}
header {
  width: 100%;
  padding: 1rem 0; /* Adjust the padding to control the height of the header */
  box-sizing: border-box;
  background: transparent; /* Or set a background color */
  text-align: center; /* This centers the title container */
}
header #page-header {
  color: white;
  text-decoration: none;
  width: auto; /* Allow it to scale with content */
  display: inline-block;
}
#logo {
  position: absolute; /* Positioning it absolutely within the header, but it's still "relative" to header */
  top: 0;
  left: 0; /* Logo will be on the left */
  width: 7vw; /* Adjust width as needed */
  height: 7vh; /* Adjust height as needed */
  margin: 1rem; /* Adjust the margin to control the distance from the corners */
}
/* Title container styles */
.title-container {
  position: relative; /* Positioned relative to the header */
  display: inline-block; /* This allows it to be centered using text-align on the header */
}
.title {
  position: relative; /* Positioned relative to its container */
  font-size: 1.5rem;
}

.title .title-underline {
  display: block; /* Make the underline a block element to occupy its own line */
  height: 0.25rem;
  width: 18rem; /* Width of the underline, adjust as needed */
  background: black;
  margin-top: 0.5rem; /* Adjust the margin to control distance from the title */
  border-radius: 2rem;
}
.container {
  margin-top: 1.8rem;
  position: absolute;
  border: 10px solid black;
  background-color: olive;
  font-size: 1.6rem;
  line-height: 1.5rem;
  width: 40vw;
  max-width: 80vw;
  overflow: hidden;
  height: 60vh;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.container-name {
  color: white;
  margin-top: 3rem;
  line-height: 1.5rem;
}
.container-date {
  color: white;
  margin-top: 1rem;
  line-height: 1.5rem;
}

.container-refresh {
  color: white;
  margin-top: 1rem;
}
.container-today {
  color: black;
  margin-top: 1rem;
}
/* Add this to your CSS to reserve space for the results */
#result,
#dateResult {
  height: 2rem; /* Adjust this height to fit your design */
  overflow: auto; /* Makes the content scrollable if it overflows */
  display: flex; /* To align content vertically */
  align-items: center; /* Centers content vertically */
  justify-content: center; /* Centers content horizontally if needed */
  margin-top: 2rem;
  line-height: 1.5rem;
}
#dateResult {
  text-align: center; /* Align text to the left */
  line-height: 3rem;
  display: block; /* Ensure it's a block-level element */
  word-wrap: break-word; /* Break long words that would overflow */
  overflow: hidden; /* Hide overflow or use 'auto' to allow scrolling */
  height: 8rem;
}
input[type="text"],
button {
  max-width: 90%;
  box-sizing: border-box;
}
.footer {
  text-align: center;
  margin-top: 40%;
}
.footer p {
  font-size: 2rem;
}
.footer p a {
  text-decoration: none;
}
@media (max-width: 768px) {
  header {
    padding: 0.5em;
  }

  #logo {
    width: 15%; /* Scale the logo based on the width of the viewport */
    max-width: 120px; /* But cap it at a maximum size */
    height: auto; /* Maintain aspect ratio */
  }

  /* Title and underline adjustments */
  .title #heading {
    font-size: 1.5em; /* Scale font size */
    top: 0.2rem;
  }

  .title .title-underline {
    width: 3em; /* Scale underline */
  }

  /* Form elements adjustments for better touch interaction */
  input[type="text"],
  button {
    width: 100%; /* Allow elements to fill their container */
    padding: 0.5em;
    margin: 0.5em 0;
  }
  .container {
    border: 10px solid black;
    background-color: olive;
    font-size: 1rem;
    width: 80vw;
    max-width: none;
    height: 30vh;
    text-align: center;
    overflow: hidden;
    margin-bottom: 20%;
  }
  .container-name {
    color: white;
  }
  .container-date {
    color: white;
  }

  /* Base styles for larger screens */
  .container-refresh {
    color: white;
    margin-top: 1rem;
  }

  .container-today {
    color: black;
    margin-top: 1rem;
  }

  #result,
  #dateResult {
    height: 2rem; /* Initial height */
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
    line-height: 1.5rem;
  }

  #dateResult {
    text-align: center;
    line-height: 3rem;
    display: block;
    word-wrap: break-word;
    overflow: hidden; /* Consider changing this to 'auto' if content needs to scroll */
    height: 8rem;
  }

  input[type="text"],
  button {
    max-width: 90%;
    box-sizing: border-box;
  }

  /* Media query for smaller screens */
  @media (max-width: 768px) {
    .container-refresh,
    .container-today {
      margin-top: 0.5rem; /* Reduce margin-top on smaller screens */
    }

    #result,
    #dateResult {
      height: auto; /* Let the height be dynamic */
      margin-top: 1rem; /* Reduce margin-top on smaller screens */
      line-height: normal; /* Adjust line height for better readability */
    }

    #dateResult {
      height: auto; /* Let the height be dynamic to accommodate more content */
      overflow: auto; /* Allow scrolling if content overflows */
    }

    input[type="text"],
    button {
      max-width: 100%; /* Allow inputs and buttons to take full width of the container */
      margin: 0.5rem 0; /* Adjust margin for spacing */
      padding: 0.5rem; /* Add padding for better touch targets */
    }
  }

  .footer {
    text-align: center;
    margin-top: 90%;
  }

  .footer p {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .footer p a {
    text-decoration: none;
  }
}