body{
    display: grid;
    grid-template-areas: 
    'header header header header header header header'
    'nav nav main main main main main'
    'footer footer footer footer footer footer footer';
    min-height: 100vh;
    max-width: 100vw;
    overflow-x: hidden;
    grid-template-rows: minmax(10vh, 20vh), 9fr, 2fr;
}

    main h1, main .containerSlide{
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

.botaoCategoria{
    background-color: var(--corNavEscura);
    filter: brightness(1.3) drop-shadow(0px 0px 5px rgba(120, 135, 219, 0.199));
    padding: 10px 5px;
    border: 0;
    border-radius: 5px;
    width: fit-content;
    font-size: 24px;
    transition: 0.4s;
    text-align: center;
    box-sizing: border-box;
    transition: 0.3s;
}
    .botaoCategoria:hover{
        filter: brightness(1.5);
    }
    .botaoCategoria:active{
        transition: 0.1s;
        filter: brightness(1.3);

    }

.containerSlide{
    width: 70vw;
    height: 50vh;
    display: flex;
    justify-content: start;
    align-items: center;
    overflow: hidden;
    border-radius: 10px;
}
    #divTextoPropaganda{
        z-index: 3;
        text-align: center;
        flex-wrap: wrap;
        filter: drop-shadow(0px 4px 10px 5px black);
        user-select: none;
        cursor: default;
        padding: 0.5rem 2rem 0.5rem 2rem;
        position: absolute;
    }
        .textoPropaganda{
            margin-left: auto;
            margin-right: auto;
            color: white;
            text-transform: uppercase;
            flex-wrap: wrap;
            font-weight: 600;
            font-size: 60px;
            filter: drop-shadow(0px 2px 5px black);
        }
    .slider{
        display: flex;
        animation: sliderInicio 30s infinite linear;
    }
        .imgFundoSlide{
            opacity: 0.3;
            height: 50vh;
            width: 300px;
            user-select: none;
        }

#plataformas button, 
#generos button{
    margin: 4px;
}
.containerCategoria{
    margin: var(--paddingPadrao);
    padding: 10px;
    border-radius: 15px;
    display: flex;
    min-height: fit-content;
    background-color: var(--corNavEscura);
    filter: saturate(1.5);
}

.containerCategoria > img{
    margin-left: auto;
    min-width: 70px;
}
#plataformasEscolhidas, 
#generosEscolhidos{
    display: flex;
    flex-wrap: wrap;
}

.escolhido{
    display: flex;
    align-items: center;
    border-radius: 15px;
    border: 1px solid var(--corFundo);
    padding: 8px 12px;
    margin: 4px;
}
.escolhido:hover{
    backdrop-filter: brightness(1.1);
    box-shadow: 0px 0px 3px var(--corSemHover);
}
.escolhido h2{
    margin: 0;
}

@media (width < 50em) { /* */
    /* html{
        max-width: 100vw;

    } */
    body{
        grid-template-areas: 
        'header header header header header header header'
        'nav nav nav nav nav nav nav'
        'main main main main main main main'
        'footer footer footer footer footer footer footer';
        min-height: 100vh;
    }
    /* *{
        padding: 0;
        margin: 0;
        overflow: visible;
    } */

    
/* 
    .headerItem{
        width: 60px;
        padding: 0.5rem;
    } */
    /* .imagemHeader{
        width: 75%;
        height: 75%;
    } */
    /* .navegacaoLateral{
        padding: 0px;
        height: 10vh;
        display: flex;
        justify-content: space-around;
    } */
    main{
        padding: 3rem 0rem;
    }
    .containerSlide{
        width: 100vw;
        border-radius: 0;
    }
        .textoPropaganda{
            font-size: 12vw;
        }
}

@keyframes sliderInicio {
    from{transform: translate(0);}
    to{transform: translate(-2100px);}
}