body {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    margin: 0px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.mainpage {
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #404040;
    width: 100%;
    height: 100%;
}

.mainpage h1 {
    font-size: clamp(2rem,4vw,8rem);;
    color: #D4D4D4;
}

.top-sellers {
    overflow-x: hidden;
    overflow-y: hidden;

    position: relative;
    width: 90%;
    height: 30vw;
}



.recommended {
    overflow-x: hidden;
    position: relative;
    overflow-y: hidden;
    width: 90%;
    height: 30vw;
}

.turnedin {
    display: flex;
    width: 100%;
    height: 30vw;
}

@keyframes scrollLeft{

    to {
        left:-165vw;
    }
}

.covercontainer {
    
    position: absolute;
    margin: 0px;
    width: 25vw;
    height: 30vw;
    left: 100%;
    animation-name: scrollLeft;
    animation-duration: 80s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.covercontainer-rec {
    
    position: absolute;
    margin: 0px;
    width: 25vw;
    height: 30vw;
    left: 100%;
    animation-name: scrollLeft;
    animation-duration: 80s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.covercontainer0 {
    animation-delay: calc(80s / 10 * (10 - 1) * -1); /* Delay adjusted for new animation duration */
}

.covercontainer1 {
    animation-delay: calc(80s / 10 * (10 - 2) * -1);
}

.covercontainer2 {
    animation-delay: calc(80s / 10 * (10 - 3) * -1);
}

.covercontainer3 {
    animation-delay: calc(80s / 10 * (10 - 4) * -1);
}

.covercontainer4 {
    animation-delay: calc(80s / 10 * (10 - 5) * -1);
}

.covercontainer5 {
    animation-delay: calc(80s / 10 * (10 - 6) * -1);
}

.covercontainer6 {
    animation-delay: calc(80s / 10 * (10 - 7) * -1);
}

.covercontainer7 {
    animation-delay: calc(80s / 10 * (10 - 8) * -1);
}

.covercontainer8 {
    animation-delay: calc(80s / 10 * (10 - 9) * -1);
}

.covercontainer9 {
    animation-delay: calc(80s / 10 * (10 - 10) * -1);
}

.cover {
    margin: 0px;
    width: 100%;
    height: 100%;
    object-fit:fill
}

.arrangements {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 25%
}

.event-video {
    width: 100%;
    margin: 0px;
    max-height: 12.5rem;
    aspect-ratio: 2/3;
}

.event-figure {
    margin: 0px;
}

.event-img {
    margin: 0px;
    width: 100%;
    max-height: 12.5rem;
    aspect-ratio: 2/3;
}

.event-date {
    position: absolute;
    bottom: 0.1rem;
}

.event-details {
    padding-bottom: 20%;
}

.event {

    position: relative;
    overflow: hidden;
    width: 20%;
    max-width: 100%;
    height: 100%;
    margin: 2rem;
    margin-top: 0rem;
    background-color: white; 
}


.event h2{
    font-size: clamp(1.5rem, 1.5vw, 2.5rem);
}

/* */
@media screen and (max-width:768px){
    .arrangements {
        flex-direction: column;
        height: 35%;
        width: 100%;
    }
    .event {
        width: 80%;
        height: 35%;
    }

    
    
}

.warningloans {
    background-color: red;
    width: fit-content;
    height: fit-content;
}

.recommended:has(.warningloans) {
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Animation from: https://www.youtube.com/watch?v=Reu0hHbis5w */