body {
    background-color: #170000; /* Fond noir */
    color: #fff; /* Texte blanc pour contraste */

}

nmain {
    position: relative;

}

.cycle-slideshow {
    position: relative;
    width: 30vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.cycle-slideshow img {
    border: 2px solid #797979;
    padding: 4px;
    box-sizing: border-box;
}

.cycle-prev,
.cycle-next {
    height: 100%;
    width: 50%;
    z-index: 999;
}

main {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.scrolling-text {
    position: absolute;
    white-space: nowrap;
    font-size: 4em; 
    font-weight: bold;
    color: rgba(216, 0, 0, 0.8);
}

.horizontal {
    width: 100%;
    margin: 0px 0; /* Éloigne le texte des images */
    letter-spacing: 1em; /* Uniformise l'espacement horizontal */
}

.horizontal.top {
    top: 5px; /* Déplace vers le haut */
    left: 0;
    animation: scroll-horizontal 0.0001s linear infinite;  
}

.horizontal.bottom {
    bottom: 5px; /* Déplace vers le bas */
    left: 0;
    animation: scroll-horizontal 0.0001s linear infinite reverse;
}

.vertical {
    height: 100%;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    line-height: 1em; /* Uniformise l'espacement vertical */
    letter-spacing: 0.5em; /* Uniformise l'espacement entre les caractères verticaux */
}

.vertical.left {
    top: 0;
    left: 0px; /* Déplace vers la gauche */
    animation: scroll-vertical 0.0001s linear infinite;
}

.vertical.right {
    top: 0;
    right: 30px; /* Déplace vers la droite */
    animation: scroll-vertical 0.0001s linear infinite reverse;
}

@keyframes scroll-horizontal {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes scroll-vertical {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(-100%);
    }
}