/* Basic styles */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #e0e0e0; /* Light gray text for better readability */
    background-color: #1e1e1e; /* Dark gray background */
}

/* Container for centering content */
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh; /* Full viewport height */
    text-align: center;
}

/* Header styling */
h1 {
    font-size: 3.3em;
    font-family: 'Roboto', sans-serif; /* Stylish font for the header */
    color: #ffffff;
    margin-top: -300px; /* Add margin at the top for spacing */
}

/* Button styles */
.buttons {
    margin-top: 50px; /* Space between the header and buttons */
}

.button {
    display: inline-block;
    padding: 15px 25px;
    margin: 10px;
    background-color: #333333; /* Dark gray for buttons */
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.5em;
    font-family: 'Verdana', sans-serif; /* Different font for buttons */
}

.button:hover {
    background-color: #555555; /* Slightly lighter gray on hover */
}

/* Media queries for responsiveness */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5em; /* Reduce font size for smaller screens */
        margin-top: 30px; /* Adjust top margin for smaller screens */
    }

    .button {
        padding: 12px 20px; /* Reduce button padding */
        font-size: 1em; /* Adjust font size for smaller screens */
        margin: 8px; /* Adjust margin for smaller screens */
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 2em; /* Further reduce font size for very small screens */
        margin-top: 20px; /* Further adjust top margin */
    }

    .button {
        padding: 10px 15px; /* Further reduce button padding */
        font-size: 0.9em; /* Further adjust font size */
        margin: 5px; /* Further adjust margin */
    }
}