/* Common Styles for Both Pages */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    /* animation: colorChange 5s linear infinite; */
    background: linear-gradient(to right, #ff5733, #33ff57, #5733ff);
}

:root {
    --color-1: #ff5733;
    --color-2: #33ff57;
    --color-3: #5733ff;
}

.colored-background {

    background: var(--color-1);
    animation: colorChange 10s linear infinite;
    /* Adjust animation duration as needed */
    transition: background 0.5s ease-in-out;
    /* Smoothly transition background changes */
}

@keyframes colorChange {

    0%,
    100% {
        background: var(--color-1);
    }

    33.33% {
        background: var(--color-2);
    }

    66.66% {
        background: var(--color-3);
    }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Styles for Article Listings (index.html) */
h1 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 20px;
    color: #333;
}

#article-list {
    width: 80%;
    margin: auto;
}

.article-list {
    display: grid;
    /* Use CSS Grid for layout */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    /* Create a responsive grid with a minimum column width of 300px */
    grid-gap: 20px;
    /* Add a gap between grid items */
}

.article-item {
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
    display: flex;
    /* Use flexbox for nested content layout */
}

.article-item:hover {
    transform: translateY(-5px);
}

/* Style the image within the article */
.article-image {
    margin: auto;
    height: 200px;
    width: 200px;
    /* border: 1px solid red; */
    /* margin-left: 20%; */
}

.article-image img {
    margin: a;
    width: 100%;
    height: 100%;
    display: block;
    margin-right: 20px;
    /* Add spacing between image and details */
}

/* Add styles for the article details */
.article-details {

    text-align: center;
    flex: 1;
    /* Take remaining space in the flex container */
}

/* Add more responsive styles for smaller screens */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }

    .article-list {
        grid-template-columns: 1fr;
        /* Display one column on smaller screens */
    }

    .article-item {
        padding: 10px;
        margin: 0;
        /* Remove margin between items */
        flex-direction: column;
        /* Stack image and details vertically */
    }

    .article-image img {
        margin-bottom: 10px;
        /* Add spacing between image and details */
        margin-right: 0;
        /* Reset margin */
    }
}