@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');

.gallery-container {
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 10px #111;
    height:600px;
    width:900px;
}

.main-page-gallery-container {
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 10px #111;
    height: 300px;
    width: 450px;
}

    .gallery-container img {
        width: 100%;
        animation: burns 20s ease-in-out;
        animation-iteration-count: 1;
        animation-direction: alternate;
    }

.main-page-gallery-container img {
    width: 100%;
    animation: burns 20s ease-in-out;
    animation-iteration-count: 1;
    animation-direction: alternate;
}

@-webkit-keyframes burns {
    0% {
        transform: scale(1);
        transform-origin: bottom left;
    }

    50% {
        transform: scale(1.3) rotate(-2deg);
        transform-origin: center center;
    }

    100% {
        transform: scale(1);
        transform-origin: top right;
    }
}

#slideshow-text {
    font-family: Poiret One;
    position: absolute;
    top: 40%;
    left: 20%;
    font-size: 48px;
    z-index: 1;
    color: white;
    animation: text-ani 20s ease;
    animation-iteration-count: 1;
    animation-direction: alternate;
    transform-origin: center right;
    line-height: .8em;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    text-align: center;
}

#main-page-slideshow-text {
    font-family: Poiret One;
    position: absolute;
    top: 40%;
    left: 20%;
    font-size: 14px;
    z-index: 1;
    color: white;
    animation: text-ani 20s ease;
    animation-iteration-count: 1;
    animation-direction: alternate;
    transform-origin: center right;
    line-height: .8em;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    text-align: center;
}

.main-page-thumbnails-class {
    width: 450px;
}

@media screen and (max-width: 960px) {
    #slideshow-text {
        font-family: Poiret One;
        position: absolute;
        top: 20%;
        left: 20%;
        font-size: 14px;
        z-index: 1;
        color: white;
        animation: text-ani 20s ease;
        animation-iteration-count: 1;
        animation-direction: alternate;
        transform-origin: center right;
        line-height: .8em;
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
        text-align: center;
    }

    .gallery-container, .main-page-gallery-container {
        overflow: hidden;
        position: relative;
        box-shadow: 0 0 10px #111;
        height: 30vh;
        width: 80vw;
    }

    .main-page-gallery-container {
        overflow: hidden;
        position: relative;
        box-shadow: 0 0 10px #111;
        height: 27vh;
        width: 90vw;
    }

    .main-page-thumbnails-class {
        width: 390px;
    }    
}

    slideshow-text strong {
        font-size: 50px;
    }

@-webkit-keyframes text-ani {
    0% {
        transform: scale(1);
        opacity: 0;
    }

    50% {
        transform: scale(1.4);
        opacity: .9;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

/*body {
    background: #1e1e1e;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
*/

#Thumbnails{
    overflow-x:scroll;
    
}