/* General Styles */
/* Center the content inside the header */
header {
    text-align: center;
    /* Center-aligns text and inline elements */
    padding: 20px;
    /* Adds some padding around the content */
    background-color: #f8f8f8;
    /* Optional: background color for the header */
}

#logo {
    max-width: 100%;
    /* Ensures the logo doesn't overflow the header */
    height: auto;
    /* Maintains the aspect ratio of the logo */
    margin-bottom: 10px;
    /* Space between the logo and the heading */
}

body {
    font-family: sans-serif;
    /* Choose your preferred font */
    display: flex;
    /* Enable Flexbox for centering */
    flex-direction: column;
    /* Align content vertically */
    justify-content: center;
    /* Center vertically */
    align-items: center;
    /* Center horizontally */
    min-height: 100vh;
    /* Ensure the body fills the viewport height */
    margin: 0;
    /* Remove default margins */
    background-color: #f0f0f0;
    /* Optional background color */
}

/* Heading Styles */
h1 {
    text-align: center;
    /* Center the heading text */
}

/* Button Styles */
#registerBtn {
    background-color: #007bff;
    /* Impact Blue */
    color: white;
    padding: 15px 30px;
    /* Adjust padding as needed */
    border: none;
    border-radius: 25px;
    /* Rounded corners */
    cursor: pointer;
    font-size: 18px;
    transition: background-color 0.3s ease;
    /* Smooth transition on hover */
}

#registerBtn:hover {
    background-color: #0069d9;
    /* Darker shade of blue on hover */
}

.centered-text {
    text-align: center;
    /* Center-align the text */
    font-size: 20px;
    /* Increase the font size */
    line-height: 1.6;
    /* Optional: Adjust line height for better readability */
    margin: 20px 20px;
    /* Add some margin for spacing */
}