/* Custom Scrollbar */

::-webkit-scrollbar {
    width: 0.75vw;
}

::-webkit-scrollbar-track {
    background-color: rgb(42, 64, 82);
    border-radius: 100vw;
}

::-webkit-scrollbar-thumb {
    background-color: rgb(78, 116, 147);
    border-radius: 100vw;
}



/* Media Scroller */

.media-scroller {
    --scroller-spacer: 1.8rem ;
    margin-top: 4vh;
    color: azure;
    gap: var(--scroller-spacer);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 21%;

    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.scroller-media {
    display: grid;
    grid-template-rows: min-content;
    gap: var(--scroller-spacer);
    padding: var(--scroller-spacer);
    background: #343a40;
    border-radius: 1rem;
}

.scroller-media > img {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.snaps-inline {
    scroll-snap-type: inline mandatory;
    scroll-padding-inline: var(--scroller-spacer);
}

.snaps-inline > * {
    scroll-snap-align: start;
}

/* EASTER EGGS */

.easter-eggs {
position: relative;
display: none; /* got rid of it for now */
}

.snake-secret {
    position: absolute;
    color: #343a40;
    text-decoration: none;
    
    font-size: 4vmin;
    transform: rotate(30deg);
}

.snake-secret a {
    text-decoration: none;
    font-style: none;
    color: hsl(200, 20%, 20%);
  }

  @media (max-width: 30vw) {
    .snake-secret {
        margin-top: 82vh;
    }
  }