/*-***** Carousel *****-*/

.carousel-container {
    position: relative;
    width: 100%;
    /* height: 80vh; */
    perspective: 800px;
    user-select: none;
}

.carousel {
    transition: all 0.5s ease-in-out;
    height: 100%;
    row-gap: 2rem;
}


.carousel-item {
    color: gainsboro;
    vertical-align: top;
    height: 250px;
    margin: 0px 2rem;
    margin-bottom: 2rem;
    padding: 2rem;
    text-align: center;
    background-color: rgb(31, 30, 30);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}


.btn {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    background-color: var(--secondary-color);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    margin-top: 1rem;
    transition: all 0.5s ease-out;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.carousel-item:first-of-type .btn { background-color: var(--cv-color); }
.carousel-item:first-of-type h2 { color: var(--cv-color); }
.carousel-item:first-of-type:has(.btn:hover) { 
    border-bottom: solid 10px var(--cv-color);
    border-top: none;
    transform: scaleX(1.01) scaleY(1.04);
}
.carousel-item:nth-of-type(2) .btn { background-color: var(--web-color); }
.carousel-item:nth-of-type(2) h2 { color: var(--web-color); }
.carousel-item:nth-of-type(2):has(.btn:hover) { 
    border-bottom: solid 10px var(--web-color); 
    transform: scaleX(1.01) scaleY(1.04);
}
.carousel-item:nth-of-type(3) .btn { background-color: var(--c2d-color); }
.carousel-item:nth-of-type(3) h2 { color: var(--c2d-color); }
.carousel-item:nth-of-type(3):has(.btn:hover) { 
    border-bottom: solid 10px var(--c2d-color);
    transform: scaleX(1.01) scaleY(1.04); 
}
.carousel-item:nth-of-type(4) .btn { background-color: var(--c3d-color); }
.carousel-item:nth-of-type(4) h2 { color: var(--c3d-color); }
.carousel-item:nth-of-type(4):has(.btn:hover) { 
    border-bottom: solid 10px var(--c3d-color); 
    transform: scaleX(1.01) scaleY(1.04);
}
.carousel-item:nth-of-type(5) .btn { background-color: var(--jeu-color); }
.carousel-item:nth-of-type(5) h2 { color: var(--jeu-color); }
.carousel-item:nth-of-type(5):has(.btn:hover) { 
    border-bottom: solid 10px var(--jeu-color);
    transform: scaleX(1.01) scaleY(1.04);
}


.carousel-item:first-of-type .btn:hover {
    background-color: #fff;
    border: solid 3px var(--cv-color);
    color: black;
}

.carousel-item:nth-of-type(2) .btn:hover {
    background-color: #fff;
    border: solid 3px var(--web-color);
    color: black;
}
.carousel-item:nth-of-type(3) .btn:hover {
    background-color: #fff;
    border: solid 3px var(--c2d-color);
    color: black;
}
.carousel-item:nth-of-type(4) .btn:hover {
    background-color: #fff;
    border: solid 3px var(--c3d-color);
    color: black;
}
.carousel-item:nth-of-type(5) .btn:hover {
    background-color: #fff;
    border: solid 3px var(--jeu-color);
    color: black;
}

main {
    max-width: 100%;
}
.carousel-item:first-of-type {
    animation: itemAnimFirst ease-in infinite;
    animation-duration: 13s;
    animation-delay: 0s;
    animation-play-state: running;
    animation-fill-mode: forwards;
    border-bottom: solid 6px #468795;
}

.carousel-item:nth-of-type(2) {
    animation-name: itemAnimSecond;
}
.carousel-item:nth-of-type(3) {
    animation-name: itemAnimThird;
}
.carousel-item:nth-of-type(4) {
    animation-name: itemAnimFourth;
}
.carousel-item:nth-of-type(5) {
    animation-name: itemAnimFifth;
}

.carousel-item:nth-of-type(2),
.carousel-item:nth-of-type(3),
.carousel-item:nth-of-type(4),
.carousel-item:nth-of-type(5) {
    display: inline-block;
    width: calc(50% - 4.3rem);
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    animation-play-state: running;
    animation-fill-mode: forwards;
}

.carousel-item:nth-of-type(2) {
    animation-delay: 2s;
    border-bottom: solid 6px var(--web-color);
}
.carousel-item:nth-of-type(3) {
    animation-delay: 3s;
    border-bottom: solid 6px var(--c2d-color); 
}
.carousel-item:nth-of-type(4) {
    animation-delay: 4s;
    border-bottom: solid 6px var(--c3d-color); 
}
.carousel-item:nth-of-type(5) {
    animation-delay: 5s;
    border-bottom: solid 6px var(--jeu-color); 
}

@keyframes itemAnimFirst {
    0% { box-shadow: 0px 0px 7px 0px var(--cv-color);}
    40%   { box-shadow: 0px 0px 7px 7px var(--cv-color);}
    50%   {box-shadow: 0px 0px 7px 2px var(--cv-color);}
    60%   { box-shadow: 0px 0px 7px 7px var(--cv-color);}
    100%   { box-shadow: 0px 0px 7px 0px var(--cv-color);}
}

@keyframes itemAnimSecond {
    0% { box-shadow: 0px 0px 7px 0px var(--web-color);}
    40%   { box-shadow: 0px 0px 7px 7px var(--web-color);}
    50%   {box-shadow: 0px 0px 7px 2px var(--web-color);}
    60%   { box-shadow: 0px 0px 7px 7px var(--web-color);}
    100%   { box-shadow: 0px 0px 7px 0px var(--web-color);}
}

@keyframes itemAnimThird {
    0% { box-shadow: 2px 2px 5px var(--c2d-color);}
    0% { box-shadow: 0px 0px 7px 0px var(--c2d-color);}
    40%   { box-shadow: 0px 0px 7px 7px var(--c2d-color);}
    50%   {box-shadow: 0px 0px 7px 2px var(--c2d-color);}
    60%   { box-shadow: 0px 0px 7px 7px var(--c2d-color);}
    100%   { box-shadow: 0px 0px 7px 0px var(--c2d-color);}
}

@keyframes itemAnimFourth {
    0% { box-shadow: 0px 0px 7px 0px var(--c3d-color);}
    40%   { box-shadow: 0px 0px 7px 7px var(--c3d-color);}
    50%   {box-shadow: 0px 0px 7px 2px var(--c3d-color);}
    60%   { box-shadow: 0px 0px 7px 7px var(--c3d-color);}
    100%   { box-shadow: 0px 0px 7px 0px var(--c3d-color);}
}

@keyframes itemAnimFifth {
    0% { box-shadow: 0px 0px 7px 0px var(--jeu-color);}
    40%   { box-shadow: 0px 0px 7px 7px var(--jeu-color);}
    50%   {box-shadow: 0px 0px 7px 2px var(--jeu-color);}
    60%   { box-shadow: 0px 0px 7px 7px var(--jeu-color);}
    100%   { box-shadow: 0px 0px 7px 0px var(--jeu-color);}
    
}

@media not all and (min-width: 640px){

    .carousel-item h2 {
        margin: 5px 0px;
    }
    .carousel-item p {
        margin: 5px 0px;
    }
    .carousel-item {
        height: 150px;
        padding: 10px;
        margin: 0px 1rem 1rem;
        width: calc(100% - 2rem);
    }

    .carousel-item:nth-of-type(2),
    .carousel-item:nth-of-type(3),
    .carousel-item:nth-of-type(4),
    .carousel-item:nth-of-type(5) {
        width: calc(100% - 2rem);
    }

}