/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estrutura do container do slider */
.slide-container {
    width: 100vw;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    position: relative;
}

.image-container {
    width: 300vw; /* 3 imagens, cada uma ocupando 100vw */
    height: 100vh;
    display: flex;
    animation: slideAnimation 9s infinite ease-in-out; /* Ciclo completo em 9 segundos */
}

/* Estilo das imagens */
.slider-image {
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* Garante que a imagem preencha sem distorção */
}

/* Controles (botões de navegação) */
.button-container {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 10px;
}

.slider-button {
    display: inline-block;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.slider-button:hover {
    background-color: #888;
}

/* Animação principal */
@keyframes slideAnimation {
    0% { transform: translateX(0); }
    33.33% { transform: translateX(-100vw); }
    66.66% { transform: translateX(-200vw); }
    100% { transform: translateX(0); }
}

/* Regras para navegação manual */
#slider-image1:target ~ .image-container {
    animation: none;
    transform: translateX(0);
}

#slider-image2:target ~ .image-container {
    animation: none;
    transform: translateX(-100vw);
}

#slider-image3:target ~ .image-container {
    animation: none;
    transform: translateX(-200vw);
}

/* Reset automático para voltar à animação */
#reset-target:target ~ .image-container {
    animation: slideAnimation 9s infinite ease-in-out;
}