html, body {
    overflow: hidden; /* Prevent scrolling */
    height: 100%; /* Ensure the height is 100% */
}

body {
    display: flex;
    justify-content: center;
    align-items: center;  
    height: 100vh; 
    margin: 0;
    background-color: #8C90FA;
    font-family: "Varela Round", sans-serif;
    background-image: url("Background.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#content {
    text-align: center;
    width: fit-content;
}

#buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    min-height: 50px;
    transition: opacity 0.5s ease;
    width: 100%; /* Changed from max-content to 100% */
}

#button_subscribe {
    display: flex;
    justify-content: center; /* Changed to center the subscribe button */
    margin-top: 20px;
    min-height: 50px;
    transition: opacity 0.5s ease;
    width: 100%; /* Adjusted for consistent width */
}

button {
    padding: 10px 55px;
    font-size: 1.4em;
    font-family: "Varela Round", sans-serif;
    font-weight: 600;
    background-color: white;
    border-color: black;
    border-radius: 15px;
    transition: background-color 0.3s ease;
    flex-grow: 1; /* Added to allow buttons to grow */
    color: black; /* Ensure the button text color is black */
    text-decoration: none; /* Remove underline */
    -webkit-appearance: none; /* Remove default iOS styling */
    -moz-appearance: none; /* Remove default Mozilla styling */
    appearance: none; /* Remove default styling */
}

#essays {
    margin-right: 0px; /* Added margin for spacing between buttons */
    width: 120%;
}

#subscribe {
    padding: 10px 25px; /* Adjusted padding */
}

h1 { 
    font-weight: bold; 
    font-size: 3.8em; 
}

button:hover {
    background-color: #8C90FA;
    cursor: pointer;
}

/* Subscriber Form */

#mc-embedded-subscribe-form input[type="text"],
#mc-embedded-subscribe-form input[type="email"] {
  border: 1.5px solid rgb(0, 0, 0); /* Example: sets a blue border with a thickness of 2px */
  border-radius: 10px; /* Example: rounds the corners of the border */
  /* Add additional styling properties as needed */
}

#mc-embedded-subscribe-form input[type="text"]:focus,
#mc-embedded-subscribe-form input[type="email"]:focus {
  border-color: #8C90FA !important; 
  border-radius: 10px !important;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    font-family: "Varela Round", sans-serif;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.7); 
}
  
.modal-content {
    background-color: #8C90FA;
    margin: 15% auto;
    border-radius: 15px;
    font-family: "Varela Round", sans-serif;
    padding: 0px;
    border: 15px solid #8C90FA;
    width: 35%;
}
  
/* The Close Button */
.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
  
.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Responsive styles for mobile */
@media (max-width: 500px) {
    body {
        display:flex;
        justify-content: center;
        align-items: center;  
        height: 100vh; 
        margin: 0;
        background-color: #AEB9FF;
        font-family: "Varela Round", sans-serif;
        background-image: url("Background.svg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    
    #essays {
        margin-right: 0px; /* Added margin for spacing between buttons */
        width: 250px;
    }

    #buttons {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-left: 0px;
        margin-top: 0px; /* consistent margin-top for all buttons */
        margin-bottom: 0px; /* add consistent margin-bottom for all buttons */
        width: 70%;
    }

    #button_subscribe {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 0px; /* consistent margin-top for all buttons */
        margin-bottom: 0px; /* add consistent margin-bottom for all buttons */
        width: 70%;
    }
    
    button {
        margin-bottom: 10px; /* adds space between buttons */
        padding: 10px 25px; /* consistent padding */
        font-size: 1.2em;
        width: 250px;
        flex-grow: 0; /* this will make the buttons fill the flex container */
    }

    .modal-content {
        width: 70%;
    }
}