/* style.css */

/* Custom styles for Inter font and general body */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f0f2f5; /* Light gray background */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align items to the start to allow scrolling */
    min-height: 100vh; /* Minimum height to fill viewport */
    padding: 2rem 1rem; /* Padding around the content */
    box-sizing: border-box; /* Include padding in element's total width and height */
}

/* Styling for the main container of events */
.events-container {
    max-width: 800px; /* Max width for better readability on large screens */
    width: 100%; /* Full width on smaller screens */
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Space between year cards */
}

/* Styling for each year card */
.year-card {
    background-color: #ffffff; /* White background for cards */
    border-radius: 1rem; /* Rounded corners for cards */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Soft shadow */
    padding: 1.5rem; /* Padding inside cards */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Smooth transition for hover effects */
}

.year-card:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
}

/* Specific background colors for different years to make them distinct */
.year-2024 { background-color: #e0f2fe; /* Light Blue */ }
.year-2023 { background-color: #ffe0e0; /* Light Red */ }
.year-2022 { background-color: #e6ffe0; /* Light Green */ }
.year-2021 { background-color: #fffbe0; /* Light Yellow */ }
.year-2020 { background-color: #f0e0ff; /* Light Purple */ }
/* Add more colors for additional years if needed */

/* Styling for the detail link (button-like appearance) */
.detail-link {
    display: inline-block; /* Treat as block to apply padding/margin */
    background-color: #4f46e5; /* Indigo */
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem; /* More rounded button */
    font-weight: 600; /* Semi-bold text */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth transition for hover */
    text-decoration: none; /* Remove underline for links */
    margin-top: 1rem; /* Space between year title and button */
}

.detail-link:hover {
    background-color: #4338ca; /* Darker indigo on hover */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 640px) {
    body {
        padding: 1rem;
    }
    .year-card {
        padding: 1rem;
    }
    .detail-link {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }
}