/* Import Poppins font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');

/* General Page Style */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #0B3142;
    font-family: "Poppins", sans-serif; /* Updated font-family correctly */
    position: relative;
}

/* Top-left Legend Style */
.teaser {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 20px; 
    font-weight: 400; 
    color: white; 
}

/* Bottom-right Image Style */
.cat-image {
    position: absolute;
    bottom: -20px; /* Move the image closer to the bottom */
    right: 0px; /* Fully displace the image to the right */
    width: 350px; /* Size of the image */
    height: 180px; /* Size of the image */
    background-image: url("../../resources/cat_sleeping_with_line.svg");
    background-size: contain; /* Prevent cropping */
    background-position: center; /* Ensure image is centered */
    background-repeat: no-repeat; /* Prevent image from repeating */
}

#support-form {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    justify-content: center; /* Center content vertically */
    position: absolute;
    top: 50%;  /* Move the form to the middle of the screen vertically */
    left: 50%; /* Move the form to the middle of the screen horizontally */
    transform: translate(-50%, -50%); /* Center the form exactly by translating half of its width and height */
}

#support-form button {
    background-color: #C9BA5B; /* Yellow background for button */
    color: rgb(0, 0, 0); /* Ensure button text is readable */
    border: none; /* Remove border from button */
    cursor: pointer; /* Change cursor to pointer for better UX */
    font-size: 16px; /* Set font size to 16px */
    width: 375px; /* Ensure consistent width with input */
    padding: 12px; /* Maintained proportional padding */
    border-radius: 20px; /* Maintain consistent style */
    margin: 5px; /* Add margin for spacing */
    box-sizing: border-box; /* Include padding and border in the width and height */
}

#name-input, #subject-input, #email-input, #message-textarea {
    background-color: transparent; /* Make the input background transparent */
    color: #C1CDED; /* Set the text color */
    border: 1px solid #7985A6; /* Set the border color */
    outline: none; /* Remove default outline on focus */
    font-size: 16px; /* Set font size to 16px */
    width: 375px; /* Ensure consistent width with button */
    padding: 12px; /* Maintained proportional padding */
    border-radius: 20px; /* Maintain consistent style */
    margin: 5px; /* Add margin for spacing */
    box-sizing: border-box; /* Include padding and border in the width and height */
    text-align: left; /* Center the text inside the input */
    font-family: "Poppins", sans-serif; /* Ensure Poppins is applied */
}

#message-textarea {
    min-height: calc(20px * 5); /* Display approximately 5 lines */
    resize: none; /* Prevent user from resizing if desired */
}

#support-form button, #name-input, #subject-input, #email-input, #message-textarea {
    width: 375px; /* Desktop width */
    /* other styles... */
}

.thank-you-message, .error-message {
    color: white;
    font-size: 1.2em;
    margin-top: 10px;
    text-align: center;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .teaser {
        font-size: 18px; 
    }

    .cat-image {
        position: absolute;
        width: 300px; /* Adjust the size for mobile */
        height: 140px; /* Adjust the size for mobile */
    }

    #support-form button, #name-input, #subject-input, #email-input, #message-textarea {
        width: 300px;
        border-radius: 25px; /* Ensure perfect rounding */

    }
}