body{
    margin: 0;
    padding: 0;
    color: rgb(116, 114, 114);
    overflow: hidden;
    *font-family: 'Alfa Slab One', cursive;
}


main{
    display: flex;
    height: 90vh;
    width: 100vw;
    min-width: 1080px;
}

::-webkit-scrollbar{
    width: 20px;
    
}
::-webkit-scrollbar-track{
    background-color: rgba(0,0,0,0.5);
    
}
::-webkit-scrollbar-thumb{
    background-color: rgba(113, 89, 193, 10);
}


.header_main{
    width: 250px;
    height: 90vh;
    background-color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.header_main img{
   width: 175px;
   margin-top: 30px;
}

.made{
    color: #FFF;
    margin-bottom: 10px;
    font-size: 12px;
}

.made span{
    color:rgb(113, 89, 193);
}

.container_direita{
    width: 100%;
    height: 90vh;
    background-color: #1D1D1D;
}

.container_direita header{
    width: 100%;
    height: 5vh;
    display: flex; 
}

.arrows{
    display: flex;
    align-items: center;
    width: 90%;
    padding-left: 20px;
}

.arrow_right{
    margin-left: 20px;
    width: 30px;
    height: 30px;
    background-color: #000;
    border-radius: 50%;
    cursor: pointer;
}

.arrow_left{
    width: 30px;
    height: 30px;
    background-color: #000;
    border-radius: 50%;
    cursor: pointer;
}

.content{
    display: flex;
    width: 100%;
    height: 85vh;
    flex-wrap: wrap;
    justify-content: center;
    overflow-y: scroll;
    font-size:13px;
}


.col{
    width: 25%;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.card{
    width: 175px;
    height: 200px;

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

    background-color: rgba(113, 89, 193, 0.7);
    border-radius: 12px;

    cursor: pointer;
    

    box-shadow: 1px 3px 9px rgba(48, 47, 47, 0.7);

    color: #FFF;
}


.teste{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.teste div{
    padding-top: 15px;
}

.card img{
    width: 120px;
    height: 115px;
}

footer{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-width: 1080px;
    height: 10vh;
    background-color: rgba(113, 89, 193, 0.7);
    background-color: #7159C1;
    border-top: 1px solid rgb(255, 255,255, 0.5);
}

.footer_container{
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.play{
    width: 30px;
    height: 30px;
    fill: #FFF;
    cursor: pointer;
}

.play:hover{
    width: 32px;
    height: 32px;
}


.icons{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40%;
}

.icon_minor{
    padding: 0px 20px;
    fill: #b3b3b3;
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.icon_minor:hover{
    fill: #FFF;
}

.lazer{
    width: 70%;
    height: 4px;
    background-color: #1D1D1D;
    margin-top: 10px;
    border-radius: 20px;
}