*{
    box-sizing: border-box;

    padding: 0;
    margin: 0;

    font-family: Arial, Helvetica, sans-serif;

    image-rendering: crisp-edges !important;
}
/*
:root{

}
*/
/* -------------------------------------------------------------------------------------- BODY */

html, body{
    height: 100%;

    background-color: rgb(0, 0, 0);

    color: rgb(255, 255, 255);
    font-size: 1vw;
    text-align: center;
}

/* -------------------------------------------------------------------------------------- TIMER */

.time_bar{
    position: relative;

    margin-top: 0.5vw;

    width: 5.5vw;
    height: 0.25vw;

    background-color: rgba(255, 255, 255, 0.1);

    border-radius: 0.5vw;

    overflow: hidden;
}

.timer_progress{
    width: 0%;
    height: 100%;

    background-color: white;
}

/* -------------------------------------------------------------------------------------- BUTTONS */

.buttons{
    position: absolute;
    top: 28%;
    right: 2%;

    z-index: 11;
}

.buttons button{
    background-color: rgba(0, 0, 0, 0.5);

    width: 2.5vw;
    height: 3vw;

    transition: 0.3s;

    font-family: monospace;
    font-size: 1.5vw;
    color: rgb(255, 255, 255);

    border-radius: 20%;
    border: none;
}

.buttons button:hover{
    background-color: rgba(255, 255, 255, 0.5);

    color: rgb(0, 0, 0);
}

/* -------------------------------------------------------------------------------------- background */

.background{
    height: 100vh;
    margin-top: -2vw;
}

.background .list .item{
    position: absolute;
    inset: 0 0 0 0;

    opacity: 0;
    transition: 0.4s;
}

.background .list .item img{
    width: 100%;
    height: 100%;
    
    object-fit: cover;
}

.background .list .item::after{
    content: '';

    width: 100%;
    height: 100%;
    
    position: absolute;
    left: 0;

    background-image: linear-gradient(to top, #000 33%, transparent);
}

.background .list .item .content{
    position: absolute;
    left: 10%;
    top: 20%;
    width: 26vw;
    max-width: 80%;
    z-index: 11;
}

.background .list .item .content p:nth-child(1){
    letter-spacing: 0.5vw;
    font-size: 1vw;
}

.background .list .item .content h2{
    font-size: 5vw;
    margin: 0;

    color: white;
    -webkit-text-stroke: 3px black;
}

.background .list .item.active{
    opacity: 1;
    z-index: 10;
}

.background .list .item.active p:nth-child(1), .background .list .item.active h2, .background .list .item.active p:nth-child(3){
    transform: translateY(0.5vw);
    filter: blur(0.5vw);
    opacity: 0;
    animation: textAppear 0.4s 0.1s ease-in-out forwards;
}

.background .list .item.active h2{
    animation-delay: 0.5s;

    color: white;
    -webkit-text-stroke: 0.12vw black;
}

.background .list .item.active p:nth-child(3){
    animation-delay: 0.8s;
}

/* -------------------------------------------------------------------------------------- THUMBNAIL */

.thumbnail{
    display: flex;
    justify-content: center;
    /* justify-content: flex-start; */

    position: absolute;
    bottom: 0.05vw;
    
    gap: 0.5vw;
    padding-inline: 0.5vw;

    width: 100%;
    height: 17vw;

    color: white;
    text-shadow: 1px 0 0 black, 0 -1px 0 black, 0 1px 0 black, -1px 0 0 black;

    z-index: 11;
   
    overflow-x: auto;
    scroll-behavior: smooth;

    scrollbar-width: none;
}

.thumbnail .item{
    position: relative;
    bottom: 0vw;

    width: 8vw;
    height: 11vw;

    filter: brightness(0.3);
    transition: 0.4s;

    flex: 0 0 auto;
}

.thumbnail .item .icon_top img{
    position: relative;
    bottom: -2vw;

    width: 50%;
    height: 50%;
}

.thumbnail .item img{
    width: 100%;
    height: 100%;
    
    border-radius: 0.5vw;
}

.thumbnail .item.active{
    position: relative;

    bottom: 0.8vw;

    filter: brightness(1.0);
    
}

.thumbnail .item .content{
    position: relative;

    bottom: 1.5vw;

    text-align: center;
}

.thumbnail .item.disabled{
    display: none;
}

/* -------------------------------------------------------------------------------------- CHANGES */

@keyframes textAppear{
    to{
        transform: translateY(0);
        filter: blur(0);
        opacity: 1;
    }
}