body {
  font-family: "Inter", sans-serif;
  color: #1a202c;
  background-color: #14b8a6;
}
.bg-pattern {
  background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23e2e8f0" fill-opacity="0.2"%3E%3Cpath d="M36 34.6c-.9-.9-1.3-2.1-1.3-3.6 0-2.3 2-4.1 4.5-4.1 1.2 0 2.3.5 3.1 1.3V.5h-5.2V5h-5V.5H23.5v5h-5V.5H13.2v5h-5V.5H3V.5h10.2V10h5.2v-5h5V10h5.2V5h5V10h5.2V5H57v5h-5.2v-5H41.5v5H36v-5h-5V10h-5.2V5h-5.2V10H13.2V5H8V10H3V.5H3zM18 56.6c-.9-.9-1.3-2.1-1.3-3.6 0-2.3 2-4.1 4.5-4.1 1.2 0 2.3.5 3.1 1.3V.5h-5.2V5h-5V.5H23.5v5h-5V.5H13.2v5h-5V.5H3V.5h10.2V10h5.2v-5h5V10h5.2V5h5V10h5.2V5H57v5h-5.2v-5H41.5v5H36v-5h-5V10h-5.2V5h-5.2V10H13.2V5H8V10H3V.5H3z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}
.modal {
  display: none;
}
.modal.is-active {
  display: flex;
}
.results-box {
  background-color: #f3f4f6;
  border-left: 4px solid #14b8a6;
  padding: 1rem;
  border-radius: 0.5rem;
  text-align: left;
  margin-top: 1.5rem;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Custom Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 1s ease-out forwards;
}
.responsive-iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 75%; /* 4:3 aspect ratio (400/600 * 100) */
  height: 0;
  overflow: hidden;
}
.responsive-iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* Style for the overlay background */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
}

/* Style for the modal content box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    position: relative;
}

/* Style for the close button */
.close-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
}