/* IMPORTANT NOTE SO THAT YOU DONT SPEMD 20 MINS LOOKING THRU UR FILES AGAIN */
/*-----------> firefox.cfg is in /usr/lib/firefox/ <-------------*/

@font-face {
    font-family: "VMS";
    src: url(Fonts/The\ Led\ Display\ St.ttf);
}
@font-face {
    font-family: "TspHV";
    src: url(Fonts/Transport\ Heavy.ttf);
}
@font-face {
    font-family: "ladies";
    src: url(Fonts/Vintage\ Erotique.ttf);
}

body {
    background-image: url("Assets/ladies.jpg");
    overflow: hidden;
    background-size: 100% auto;
    background-position-y: -400px;
    font-family: TspHV;
    a:link {
        text-decoration: none;
        color: orange;
    }
    a:visited {
        text-decoration: none;
        color: orange;
    }
    a:hover {
        text-decoration: none;
        color: salmon;
    }
}

.wrapper {
    border-left: black 0.5vw solid;
    border-top: black 0.5vw solid;
    border-bottom: black 0.5vw solid;
    border-right: black 0.5vw solid;
    background: grey;
    margin: auto;
    margin-top: 2.5%;
    width: 60vw;
    height: 90vh;
    display: grid;
    grid-template-columns: 15% auto;
    grid-template-rows: 10% 30% 30% 30%;
    text-align: center;
}

.navbar {
    ul {
        font-size: 1.5vw;
        list-style-type: none;
        padding: 0;
        padding-top: 7%;
        margin: 0;
    }
    grid-row: 2;
    grid-column: 1;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    select {
        width: 100%;
    }
    IMG {
        width: 100%;
        margin-top: 8%;
    }
}

.Stamps {
    grid-row-start: 3;
    grid-row-end: 5;
    grid-column: 1;
    width: 100%;
    height: 53.47vh;
    border-top: black solid 0.25vw;
    overflow-y: scroll;
    ul {
        font-size: 3vh;
        list-style-type: none;
        padding: 0;
        padding-top: 19%;
        margin: 0;
    }
}

.Main {
    grid-row-start: 2;
    grid-row-end: 5;
    grid-column: 2;
    width: 100%;
    height: 100%;
    border-left: black solid 0.25vw;
    border-bottom: black solid 0.25vw;
    overflow-y: scroll;
    font-size: 1.2vw;
    .content {
        width: auto;
        height: 70vh;
    }
}

.title {
    border-bottom: black double 0.25vw;
    height: 7.7vh;
    width: auto;
    font-size: 1.2vw;
}

.content {
    height: 84.6%;
    width: auto;
    overflow-y: scroll;
}

.buttonlinks {
    height: 24vh;
    width: 21.8vw;
    margin: auto;
    border: 0.1vw solid white;
    overflow-y: scroll;
    IMG {
        width: 88px;
        height: auto;
    }
}

.scrolling-text-container {
    grid-row: 1;
    grid-column: 1;
    column-span: 2;
    width: 667%; /*I have no idea how this works but column-span doesn't...*/
    height: 100%;
    border-bottom: black solid 0.25vw;
    font-family: VMS;
    color: orange;
    font-size: 5.5vh;
    font-weight: 300;
}

/* Container styles */
.scrolling-text-container {
    overflow: hidden;
    background-color: #333;
    z-index: 100;
}

/* Inner container styles */
.scrolling-text-inner {
    display: flex;
    white-space: nowrap;
    padding: 1px 0;
}

/* Text styles */
.scrolling-text {
    display: flex;
}

.scrolling-text-item {
    padding: 0 30px;
}

/* keep your existing rules above; replace animation settings, hover, and keyframes */

.scrolling-text-inner > .scrolling-text {
    /* we'll animate the inner track itself */
    display: flex;
    will-change: transform;
    animation: marquee var(--marquee-speed, 20s) linear infinite;
}

.scrolling-text-container:hover .scrolling-text-inner > .scrolling-text {
    animation-play-state: paused;
}

/* Animate by half the track because we duplicate content once (2 copies) */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Gallery Css */

.thumbnail-container {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Space between thumbnails */
}

.thumbnail {
    cursor: pointer;
    overflow: scroll;
    height: auto;
}

.thumbnail img {
    width: 8.9vw; /* Thumbnail width */
    border: solid black 0.25vw;
    height: auto;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.overlay .full-image {
    max-width: 90%;
    max-height: 90%;
}

.close {
    position: absolute;
    transform: -100px, 100px;
    color: white;
    font-size: 30px;
    cursor: pointer;
}

/* GRAPHICS */
.mystamps {
    width: 50%;
    display: flex;
    border: black dotted 0.25vw;
    height: 30%;
}

.graph {
    width: 50%;
    height: 30%;
    display: flex;
    border: black dotted 0.25vw;
}

/* Whats New? */
.tdl {
    border: black solid 0.3vw;
    width: 20vw;
    height: 22vw;
    margin: auto;
    overflow: scroll;
}

/* PLAYER */
.player {
    position: absolute;
    display: none;
}