/* Reset margin and padding for all elements */
/* box-sizing: border-box; - Disabled for now */
* {
    margin: 0;
    padding: 0;
}

/* Set up basic styling for html and body */
body {
    height: 100%; /* Ensure body height covers the viewport */
    font-family: "Play", sans-serif; /* Use "Play" font for the entire document */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    overflow-y: visible; /* Allow vertical scrolling */
}

/* Main content box styling */
.main-box {
    display: flex; /* Use flexbox for layout */
    background-color: white; /* Set background to white */
}

/* Footer styling */
.footer-box {
    background-color: #000000; /* Black background */
    position: fixed; /* Stick footer to the bottom */
    bottom: 0; /* Position at the bottom of the page */
    width: 100%; /* Full width of the viewport */
}

/* Footer text styling */
.footer-box p {
    font-size: 15px; /* Set text size */
    color: grey; /* Set text color to grey */
}

/* ------------------------------------------------------------------------ */
/* Container box styling */
.container {
    background-color: #000000; /* Black background */
    color: rgb(255, 255, 255); /* White text */
    padding: 40px; /* Padding inside the container */
    border-radius: 15px; /* Rounded corners */
    width: 400px; /* Fixed width */
    text-align: center; /* Center text */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
}

/* Header title styling */
header h1 {
    margin: 0; /* Remove margin */
    font-size: 2em; /* Larger font size */
}

/* Header paragraph styling */
header p {
    margin: 10px 0; /* Add margin above and below */
    color: #9CA3AF; /* Set text color to grey */
}

/* Main heading styling */
main h2 {
    margin-bottom: 20px; /* Space below heading */
    font-size: 1.5em; /* Set font size */
}

/* Form styling */
form {
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack form elements vertically */
}

/* Input and textarea field styling */
input, textarea {
    margin-bottom: 10px; /* Space below each field */
    padding: 10px; /* Padding inside fields */
    border: none; /* Remove borders */
    border-radius: 5px; /* Rounded corners */
}

/* Text and URL input fields, and textarea styling */
input[type="text"], 
input[type="url"], 
textarea {
    background-color: #F9FAFB; /* Light grey background */
    color: #374151; /* Dark grey text */
}

/* Button styling */
button {
    background-color: #ff0000; /* Red background */
    color: white; /* White text */
    padding: 10px; /* Padding inside the button */
    border: none; /* Remove borders */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    margin-top: 20px; /* Space above button */
}

/* Button hover effect */
button:hover {
    background-color: #cd0000; /* Darker red on hover */
}

/* Paragraph styling */
p {
    margin-top: 10px; /* Space above paragraph */
}

/* Box styling for centering content */
.box {
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    padding-top: 40px; /* Space above content */
}

/* Submission message box styling */
#submission-message {
    display: none; /* Initially hidden */
    color: green; /* Green text color */
    font-size: 18px; /* Set font size */
    margin-top: 20px; /* Space above message */
    text-align: center; /* Center text */
    position: relative; /* Position relative for pseudo-element */
    padding: 10px; /* Padding inside the message box */
    border: 1px solid green; /* Green border */
    border-radius: 5px; /* Rounded corners */
    background-color: #e6ffe6; /* Light green background */
}

/* Checkmark icon before the submission message */
#submission-message::before {
    content: "✔"; /* Unicode for the check mark */
    font-size: 20px; /* Larger checkmark */
    color: green; /* Green color */
    margin-right: 10px; /* Space after checkmark */
    vertical-align: middle; /* Align checkmark with text */
}

label{
    text-align: left;
}