/* 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";
    color: #333; 
    text-align: center; 
    padding: 40px 20px;
    box-sizing: border-box; /* Ensures padding doesn't add to the width/height */

    /* Background Image Settings */
    background-image: url('JufCollie_background.png');
    background-size: cover;       /* Cover the entire page */
    background-position: center top;  /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-attachment: fixed; /* Keep the background fixed when scrolling */
}

h1 { 
    color: #ff6347; /* Tomato color for a fun header */
    font-size: 2.5em;
    margin-bottom: 30px;
    /* Adding a subtle text shadow to make the text pop against the background */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.link-container {
    max-width: 400px;
    margin: 25vh auto 0;
}

a { 
    background-color: rgba(70, 130, 180, 0.9); /* Steel Blue with slight transparency */
    color: #ffffff; 
    text-decoration: none; 
    font-size: 1.5em; 
    display: block; 
    margin: 20px 0;
    padding: 15px;
    border-radius: 10px;
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, background-color 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.3); /* Adds a subtle border */
}

a:hover { 
    background-color: rgba(90, 155, 216, 1); /* Lighter, opaque blue on hover */
    transform: scale(1.03); /* Slight zoom effect on hover */
}