@font-face {
    font-family: 'HoeflerTextRegular';
    src: url('../fonts/Hoefler Text Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NeuzeitSLTBook';
    src: url('../fonts/Neuzeit S LT Std Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
    --background-color: #f8f8f8;
    font-size: 62.5%;
}

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

body {
    font-family: 'NeuzeitSLTBook', sans-serif;
    font-size: 1.8rem;
    overflow-x: hidden;
    overflow-y: hidden;
    background: var(--background-color);
}

h1 {
    font-family: 'HoeflerTextRegular', serif;
    font-size: 5.4rem;
    color: #000000; 
}

h1 > span {
    font-size: 2.4rem;
    font-weight: 500;
}

h2 {
    font-family: 'HoeflerTextRegular', serif;
    font-size: 3rem;
    margin-bottom: 4rem;
    font-weight: 700;
    color: #000000; 
}

h3 {
    font-family: 'HoeflerTextRegular', serif;
    font-size: 2.8rem;
    margin-bottom: 4rem;
    font-weight: 700;
    color: #000000; 
}

/* UTILITIES */

.container {
    width: 100vh;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
}
  
.container > * {
    width: 100%;
}

.choice-container label {
    font-size: 2rem;
}

.image-container {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  
.image-container img {
    width: 100%;
    display: block;
  }
  
.flex-column {
    display: flex;
    flex-direction: column;
}
  
.flex-center {
    justify-content: center;
    align-items: center;
}
  
.justify-center {
    justify-content: center;
}
  
.text-center {
    text-align: center;
}
  
.hidden {
    display: none;
}

.terms {
    width: 100%; 
    text-align: center;
    margin: 0 auto; 
}

.btn-container {
    width: 80%;
    text-align: center;
    margin: 4rem auto;
}

.info-container {
    margin: 1rem auto;
    text-align: left;
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; 
    opacity: 0.1;
    background: url('graphic.webp') center/cover no-repeat; 
}

.transparent-box {
    background-color: rgba(255, 255, 255, 0.61); 
    padding: 20px; 
    border: 1px solid #6e6e6e; 
    color: #000000;
    position: relative; 
    overflow: hidden;
    max-height: 100%; /* Ensure it doesn't exceed the container */
    max-height: 90vh; /* Ensure it doesn't exceed the container */
    overflow-y: auto;
}

.input-container {
  background-color: transparent; /* Fully transparent container */
  padding: 20px; 
  border: 1px solid #6e6e6e; 
  border: none; /* Remove any border if not needed */
  position: relative;
  text-align: left; /* Align contents to the left */
}

#text-answer {
  width: 100%; /* Full width */
  padding: 1rem;
  font-size: 1.8rem;
  border: 0.1rem solid #009a71;
  margin-bottom: 1rem;
  font-family: 'NeuzeitSLTBook', sans-serif;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.61); /* Match the transparency of the question box */
  color: #000000;
  text-align: left; /* Align text to the left */
}

/* HYPERLINKS */
a {
    color: #009a71; 
    text-decoration: none; 
}

a:hover {
    color: #00c58f; 
}

  
/* BUTTONS */
.btn {
    font-size: 1.8rem;
    padding: 1rem 1rem;
    width: 20rem;
    text-align: center;
    border: 0.1rem solid #00c58f;
    margin-bottom: 1rem;
    text-decoration: none;
    color: #000000; 
    background-color: transparent; 
    transition: background-color 150ms, color 150ms; 
}

.btn:hover {
    cursor: pointer;
    transform: translateY(-0.1rem);
    background-color: #00c58f; 
    color: #ffffff; 
}

.btn[disabled]:hover {
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* BLOB ANIMATION */

.background-blob {
    position: fixed; /* Keep the background fixed relative to the viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: url("../svg/blob.svg") center/cover no-repeat; /* Cover the entire area */
    background-size: cover; /* Ensures the image covers the entire container */
    background-attachment: fixed; /* Keeps the background fixed while scrolling */
}

/* MOBILE RESPONSIVE */

@media only screen and (max-width: 600px) {
    :root {
      font-size: 50%; 
    }
  
    body {
      font-size: 1.6rem; 
    }
  
    h1 {
      font-size: 3.6rem; 
    }
  
    h2,
    h3 {
      font-size: 2.4rem; 
    }
  
    .container {
      width: 90%; 
      max-width: none; 
    }
  }
  
  @media only screen and (min-width: 601px) and (max-width: 1024px) {
    .container {
      width: 80%; 
    }
  }
  
  @media only screen and (min-width: 1025px) {
    .container {
      width: 60%; 
    }
  }

  @media only screen and (max-width: 600px) {
    .info-container {
        width: 100%; /* Ensure full width on mobile */
        align-items: flex-start; /* Align items to the left */
    }

    .info-container label {
        font-size: 1.4rem;
        width: 100%;
        text-align: left; /* Align text to the left */
    }

    .info-container input[type="text"],
    .info-container select {
        font-size: 1.4rem; /* Slightly smaller font size for mobile */
        padding: 0.6rem; /* Reduce padding for smaller screens */
    }

    .info-container input[type="checkbox"] {
        margin-right: 0.4rem; /* Adjust spacing for checkboxes */
    }
}