@import url(style.css);

main div.container{
    width: 90vw;
    height: 80vh;

    display: flex;
    align-items: center;
    justify-content: center;

}

main div.container div.selecionar-capitulo{
    width: 80%;
    height: 80%;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    background-color: var(--preto);

}

main div.container div.selecionar-capitulo h1{
    width: 100%;
    height: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 2em;

    color: var(--branco);
}
main div.container div.selecionar-capitulo section{
    max-width: 90%;
    width: 90%;
    height: 90%;
    
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 10px;
}


main div.container div.selecionar-capitulo section a{
    height: 100%;
    min-width: 12vw;
    /* border: 1px solid black; */


    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: end;

    text-decoration: none;
    color: var(--branco);

    
    
    transition: .3s linear;
    cursor: pointer;


}
main div.container div.selecionar-capitulo section a:hover{
    transform: translateY(-6px);
    transition: .3s;
}
main div.container div.selecionar-capitulo section a:active{
    transform: translateY(-3px);
    transition: .3s;
}
main div.container div.selecionar-capitulo section a::before{
    content: '';
    border-radius: 2px;
    
    /* ;../img/HaikyuuCapitulo01-banner.png */
    background-position: center;
    background-size: cover;

    height: 100%;
    width: 100%;
    min-width: 12vw;    

    filter: brightness(40%);

}
main div.container div.selecionar-capitulo section a:nth-child(1)::before{
    background-image: url(../img/HaikyuuCapitulo01/HaikyuuCapitulo01_003.jpg);
}
main div.container div.selecionar-capitulo section a:nth-child(2)::before{
    background-image: url(../img/HaikyuuCapitulo02/HaikyuuCapitulo02_003.jpg);
}
main div.container div.selecionar-capitulo section a:nth-child(3)::before{
    background-image: url(../img/HaikyuuCapitulo03/HaikyuuCapitulo03_003.jpg);
}
main div.container div.selecionar-capitulo section a:nth-child(4)::before{
    background-image: url(../img/HaikyuuCapitulo04/HaikyuuCapitulo04_003.jpg);
}
main div.container div.selecionar-capitulo section a:nth-child(5)::before{
    background-image: url(../img/HaikyuuCapitulo05/HaikyuuCapitulo05_003.jpg);
}
main div.container div.selecionar-capitulo section a:nth-child(6)::before{
    background-image: url(../img/HaikyuuCapitulo06/HaikyuuCapitulo06_003.jpg);
}

main div.container div.selecionar-capitulo section a p{
    /* margin-top: ; */

    font-size: 1.4em;
    font-weight: bold;




}
@media screen and (max-width: 500px) {
    main div.container{
        width: 90vw;
        height: auto;
    }
    main div.container div.selecionar-capitulo{
        width: 95vw;
        height: 80vh;
        /* background-color: red; */
    }
    main div.container div.selecionar-capitulo section{
        overflow-x: auto;
        max-width: 90vw;
        gap: 5vw;
        /* background-color: green; */
    }

    main div.container div.selecionar-capitulo section a{
        width: 70vw;
        min-width: 70vw;


    }
    main div.container div.selecionar-capitulo section a p{
        font-size: 2em;
    }
}