/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    background-color: #f0f0f0; /* Light grey background */
    position: relative; /* Needed for absolute positioning of canvas */
    min-height: 100vh;
    display: flex; /* Helps center container if needed */
    justify-content: center; /* Centers container horizontally */
    align-items: center; /* Centers container vertically */
    overflow: hidden; /* Hide potential scrollbars caused by canvas */
}

#background-canvas {
    position: fixed; /* Fixed position covers the whole viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Place canvas behind everything else */
}

.container {
    width: 90%;
    max-width: 900px; /* Max width for larger screens */
    background-color: rgba(240, 240, 240, 0.8); /* Slightly transparent background to see canvas */
    padding: 20px;
    border-radius: 10px; /* Optional: rounded corners for the container */
    z-index: 1; /* Ensure container is above canvas */
    display: flex;
    flex-direction: column;
    min-height: 80vh; /* Ensure container takes up significant height */
}

header, footer {
    background-color: #adebeb; /* Light aqua/blue background */
    color: #333;
    text-align: center;
    padding: 15px;
    border-radius: 5px; /* Optional rounded corners */
}

header h1 {
    font-size: 1.8em;
}

footer p {
    font-size: 1em;
}

.ftp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Responsive grid */
    gap: 30px; /* Space between circles */
    padding: 40px 20px; /* Padding around the grid */
    flex-grow: 1; /* Allows grid to take available space */
    align-content: center; /* Center items vertically within the grid space */
}

.ftp-link {
    display: flex; /* Use flexbox to center text */
    justify-content: center;
    align-items: center;
    background-color: #bfff00; /* Lime green */
    color: #8b4513; /* Dark brown/maroon text */
    font-weight: bold;
    text-decoration: none;
    aspect-ratio: 1 / 1; /* Make it square */
    border-radius: 50%; /* Make it circular */
    font-size: 1.2em;
    transition: transform 0.2s ease, background-color 0.2s ease;
    min-height: 100px; /* Minimum height */
    text-align: center;
}

.ftp-link:hover {
    background-color: #aee600; /* Slightly darker green on hover */
    transform: scale(1.05); /* Slightly enlarge on hover */
}

/* Media query for smaller screens if needed */
@media (max-width: 600px) {
    header h1 {
        font-size: 1.4em;
    }
    .ftp-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on smaller screens */
        gap: 20px;
    }
    .ftp-link {
        font-size: 1em;
    }
}

@media (max-width: 400px) {
    .ftp-grid {
        grid-template-columns: 1fr; /* 1 column on very small screens */
    }
}