/*      inspiração: https://www.w3schools.com/howto/howto_js_slideshow.asp */

.galeria{                       /* fundo */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 30rem;
    background: radial-gradient(circle,hsl(210, 20%, 70%) 0%, hsl(210, 20%, 25%)100%);
}
.galeria .slideshow-box{        /* caixa das imagens */
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    align-items: center;
    width: 100%;                /* caixa das fotos */
    height: 20rem;
}
.galeria .imgslide{             /* as imagens */
    background-color: white;
    padding: 0.8rem;            /* estilo polaroid com fundo branco */
    max-height: 18rem;          /* não estoura a altura do slideshow */
    object-fit: contain;        /* garante não distorção e altura máxima */
    filter: drop-shadow(1px 1px 8px hsl(210, 20%, 25%));
}
.galeria #menu{
    width: 95%;
    height: 2rem;
    text-align: center;
    margin: 0 auto;             /* centraliza */
}
.galeria h2{
    margin: 0.5rem auto;
}
.galeria .prev, .next{          /* BOTÕES */
    font-size: 1.5rem;
    font-weight: bold;
    color: hsl(0, 0%, 90%);
    width: auto;
    cursor: pointer;
    border-radius: 0 3px 3px 0;
    transition: 0.7s ease;
    user-select: none;
}
.galeria .next{                 /* Position the "next button" to the right */
    right: 0;
    border-radius: 3px 0 0 3px;
}
.dot{                           /* The dots/bullets/indicators  */
    display: inline-block;
    height: 0.8rem;
    width: 0.8rem;
    background-color: hsl(0, 0%, 75%);
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.6s ease;
    margin: 0 4px;
}
.active, .dot:hover{
    background-color: hsl(0, 0%, 45%);
}
.fade{                          /* Fading animation */
    animation-name: fade;
    animation-duration: 1.5s;
}
@keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}