body {
    background-color: #1a1a1a;
    color: #e2e2e2;
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
        sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    min-height: 100vh;
    margin: 0;
}
main {
    max-width: 600px;
    padding: 2rem;
}
h1 {
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 1rem;
}
blockquote {
    font-size: 1.5rem;
    font-style: italic;
    color: #9a9a9a;

    padding-left: 1rem;
    margin: 2rem 0;
    min-height: 5rem;
}
button {
    background-color: #f44336;
    color: white;
    border: none;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-top: 1rem;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.2s;
}
button:hover {
    background-color: #d32f2f;
}

.custom-input {
    /* Sizing and Spacing */
    width: 50%;
    padding: 15px;
    margin-bottom: 1.5rem; /* Space below the input */
    box-sizing: border-box; /* Ensures padding doesn't affect the total width */

    /* Colors and Font */
    background-color: #333; /* Dark background, same as blockquote border */
    color: #e2e2e2; /* Light text color for what you type */
    font-family: inherit; /* Uses the same font as the body */
    font-size: 16px;

    /* Border and Shape */
    border: 2px solid #555; /* Subtle dark-gray border */
    border-radius: 8px; /* Matches the button's rounded corners */
    outline: none; /* Removes the default browser outline on focus */
    transition: border-color 0.2s; /* Smooth transition for the focus effect */
}

/* Style for the placeholder text */
.custom-input::placeholder {
    color: #888; /* Duller color for the placeholder text */
}

/* Style for when the user clicks into the input field */
.custom-input:focus {
    border-color: #f44336; /* Changes border to the red accent color on focus */
}