/* Extra small devices (phones, less than 768px) */
body {
    margin: 0;
    padding: 0;
    font-family: 'Domine';
}

h1 {
    text-align: center;
    font-size: 40px;
    font-weight: normal;
}

p {
    text-align: left;
    font-size: 20px;
    line-height: 1.6;
}

li {
    text-align: left;
    font-size: 20px;
    line-height: 1.6;
}

#heading {
    font-family: 'Domine';
    color: #003F83;
    margin-top: 10%;
}

/* Buttons */
.button_container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 40px;
}

.button {
    width: 200px;
    border: none;
    color: white;
    margin: 10px 20px;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 20px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

iframe {
    width: 100%;
}

/* Small devices */
@media (min-width: 700px) {
    #whitespace {
        height: 450px;
    }
}


/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    #whitespace {
        height: 500px;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    #heading {
        font-family: 'Domine';
        margin-top: 5%;
    }

    #whitespace {
        height: 520px;
    }
}

/* Largest devices (standard desktops, 1920px and up) */
@media (min-width: 1920px) {
    #whitespace {
        height: 520px;
    }
}

.question-container {
    margin-top: 30px;
}

.question-label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 1.2em; /* Slightly larger font for readability */
}

.question-textarea {
    width: 100%;
    max-width: 800px;
    height: 150px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em; /* Increase font size for better visibility */
}


.button-container {
    text-align: center; /* Centers the button horizontally */
    margin-top: 20px; /* Add some space above the button */
}

.submit-button {
    background-color: #4CAF50; /* Green background */
    border: none; /* Remove borders */
    color: white; /* White text */
    padding: 15px 32px; /* Some padding for a larger button */
    text-align: center; /* Center text */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Inline block element */
    font-size: 16px; /* Text size */
    font-weight: bold; /* Make text bold */
    margin: 20px 0; /* Some space above and below the button */
    cursor: pointer; /* Pointer cursor on hover */
    border-radius: 8px; /* Rounded corners */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
}

.submit-button:hover {
    background-color: #45a049; /* Darker green on hover */
}