@font-face {
    font-family: "Consolas";
    src: url("/Fonts/Consolas.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: "Consolas";
    background-image: url("Assets/purple-stars-bg.gif");
    text-align: center;
    margin: 0;
    color: white;
}

.gallery-container {
    width: 100%;
    position: relative; /* Crucial for absolute positioning of children */
    overflow: hidden;
    background-color: #000000; /* Gallery background, might be visible if items don't load */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    min-height: 50px; /* Ensure it has some height even if JS fails early */
}

/* Styles for the elements being positioned by JS (<a> or <img>) */
.image-gallery > * {
    position: absolute; /* Will be set by JS, but good for initial state if JS is slow */
    display: block; /* Anchors behave like blocks for sizing */
    opacity: 0; /* Initially hidden, faded in by JS */
    transition: opacity 0.5s ease-in-out;
    /* No background-color here, to avoid masking issues if images don't show */
}

.image-gallery a img, /* Image directly inside an anchor */
.image-gallery > img {
    /* Image as a direct child (if no anchor) */
    display: block;
    width: 100%; /* Make image fill its container (<a> or the direct cell) */
    height: 100%; /* Make image fill its container (<a> or the direct cell) */
    object-fit: cover; /* Crucial: scales image to fill, maintains aspect ratio, crops if needed */
}

.blue-image {
    filter: sepia(100%) hue-rotate(190deg) saturate(600%);
}

.homeButton {
    position: fixed;
    left: 50px;
    top: 20px;
}

.blueButton {
    position: fixed;
    right: 50px;
    top: 20px;
}