/* Ensures the page takes up the full screen height */
html, body {
    height: 100%;
    margin: 0;
}

body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background-color: #f0f8ff; /* A lighter, more playful background */
    color: #333; 
    text-align: center; 
    padding: 20px 20px;
    box-sizing: border-box; /* Ensures padding doesn't add to the width/height */
}

h1 { 
    color: #ff6347; /* Tomato color for a fun header */
    font-size: 2.5em;
    margin-bottom: 0px;
}

.link-container {
    max-width: 500px;
    margin: 0 auto;
}

a { 
    background-color: #4682b4; /* Steel Blue */
    color: #ffffff; 
    text-decoration: none; 
    font-size: 1.5em; 
    display: block; 
    margin: 20px 0; /* More spacing between links */
    padding: 0px;
    border-radius: 10px;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, background-color 0.2s;
}

a:hover { 
    background-color: #5a9bd8; /* Lighter blue on hover */
    transform: scale(1.03); /* Slight zoom effect on hover */
}