/* Existing Styles */
.edo-font {
    font-family: 'Edo', sans-serif;
}
body {
    padding-top: 0;
    text-align: center;
    background: url('AObackground.jpg') no-repeat center center fixed;
    background-size: cover;
    font-family: 'Arial', sans-serif;
}
img {
    /* Chrome Frame */
    border: 5px solid #ccc; /* Base color for chrome effect */
    padding: 10px;
    background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.3),
        rgba(0, 0, 0, 0.1),
        rgba(0, 0, 0, 0.25),
        rgba(255, 255, 255, 0.3)
    );

    /* Neon Silver glowing effect */
    box-shadow: 
        0 0 20px 10px rgba(192, 192, 192, 0.7), /* Outer neon silver glow */
        0 0 8px 2px rgba(255, 255, 255, 0.8), /* Bright edge for chrome */
        inset 0 0 8px 2px rgba(255, 255, 255, 0.8), /* Inner bright line for chrome */
        0 0 8px 2px rgba(0, 0, 0, 0.2), /* Outer dark line for chrome */
        inset 0 0 8px 2px rgba(0, 0, 0, 0.2); /* Inner dark line for chrome */
}

/* Banner Container Styles */
.banner-container {
    width: 100%;
    margin: 20px auto;
    text-align: center;
}

.banner-container img {
    width: 100%;
    max-width: 1050px;
    height: auto;
    box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.7);
}

/* New Flex Container for Top Images */
.top-images-container {
    display: flex;
    justify-content: space-between; /* Align children to the edges */
    align-items: flex-start; /* Align children to the top */
    margin-top: 50px; /* Adjust as per your layout */
    padding: 20px; /* Adjust padding as needed */
    gap: 10px; /* Maintains a gap between flex items */
}

.upper-left, .upper-right, .separate-image {
    /* Adjust the flex basis for equal width or as per requirement */
    flex-basis: 33%;
    text-align: center;
}

.upper-left img, .upper-right img {
    max-width: 420px; /* Adjust based on your image size and layout requirement */
    height: auto;
    transition: transform 0.3s ease;
}

.upper-left img:hover, .upper-right img:hover {
    transform: scale(1.1); /* Maintain the hover effect */
}

/* Responsive Adjustments (Example) */
@media (max-width: 768px) {
    .top-images-container {
        flex-direction: column; /* Stack items vertically on smaller screens */
    }

    .upper-left, .upper-right, .separate-image {
        flex-basis: 100%; /* Each item takes full width on smaller screens */
    }
}

/* Updated Styles for Image Gallery */
.image-gallery {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    text-align: center;
    margin: 20px auto;
    padding: 20px;
}

.image-gallery .apocalypse img, .image-gallery .occult img {
    transform: scale(0.7);
    transition: transform 0.3s ease;
}

.image-gallery .apocalypse img:hover, .image-gallery .occult img:hover {
    transform: scale(0.77); /* Slightly larger on hover */
}

/* Updated Styles for Image Gallery */
.image-gallery {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    text-align: center;
    margin: 20px auto;
    padding: 20px;
}

.image-gallery .apocalypse, .image-gallery .occult {
    flex-basis: calc(33% - 20px); /* Adjust based on the gap */
}

.image-gallery .center-column {
    flex-basis: calc(33% - 20px); /* Adjust based on the gap */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Styles for gallery images */
.image-gallery a img {
    max-width: 100%;
    height: auto;
    box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.7);
    transition: transform 0.3s ease;
    margin-bottom: 20px;
}

.image-gallery a img:hover {
    transform: scale(1.1);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .image-gallery {
        flex-direction: column;
    }

    .image-gallery .apocalypse, .image-gallery .occult, .image-gallery .center-column {
        flex-basis: 100%;
    }
}

/* Footer Styles */
footer {
    margin-top: 50px;
    text-align: center;
}