/**
Im a very bad at CSS. So, to be fully transparent, and even though I'm against AI usage in general,
this was built using the help of MDN Web Docs, Claude Sonet (3.7) and ChatGPT (4o).
 */

#container > * { position:relative; }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: none;
}

html, body {
    height: 100%;
    width: 100%;
    overflow: auto;
}

.container {
    display: flex;
    width: 100%;
    height: 100vh;
}

.side-gallery {
    flex: 1;
    padding: 30px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: 100vh;
}

.center {
    flex: 2;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.eyes {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.50);
}

.side-gallery img {
    width: 100%;
    margin-bottom: 30px;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.side-gallery img:hover {
    transform: scale(1.02);
    border: 2px solid black;
}

.footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 5%;

    font-family: "study-variable", sans-serif;
    font-variation-settings: "wght" 400;
    font-size: 20px;
}

.links {
    font-family: 'Times New Roman', Times, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
}

/* Links Styling */

a:link {
    color: black;
    text-decoration: none;
}

a:visited {
    color: black;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

#grain {
    pointer-events: none;
}

/* ==========================================================================
    Mobile
   ========================================================================== */

@media only screen and (max-width: 851px) {
    html, body {
        overflow: hidden;
    }

    .container {
        flex-direction: column;
        height: 100vh;
    }

    .side-gallery {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        height: 35vh; /* Increased from 30vh to 35vh */
        padding: 15px;
    }

    .left-gallery {
        order: 1;
        margin-right: 0;
    }

    .center {
        order: 2;
        flex: 0 0 auto;
        height: 20vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: visible; /* Allow overflow for the scaled image */
    }

    .right-gallery {
        order: 3;
        margin-left: 0;
        margin-bottom: 18vh;
    }

    .side-gallery img {
        height: 100%;
        width: auto;
        margin-right: 30px;
        margin-bottom: 0;
    }

    .eyes {
        position: relative;
        max-width: none;
        width: auto;
        height: auto;
        max-height: none;
        transform: scale(0.25); /* Adjusted scale factor */
        object-fit: contain;
    }

    .footer {
        position: fixed;
        bottom: 2%;
        margin-bottom: 5px;
        font-size: 13px;
    }

    .links {
        font-size: 16px;
    }
}

/* ==========================================================================
    Small Styles Fixes
   ========================================================================== */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}