@import url(fonts.css);
@import url(../colors.css);
@import url(header.css);
@import url(footer.css);

* {
    margin: 0;
    padding: 0;
    border: 0;
    
}

body{
    font-family: 'Poppins', sans-serif;
    overflow-y: scroll;
    transition: all 0.3s ease-out;
}

body::-webkit-scrollbar{
    width: 8px;
}

body::-webkit-scrollbar-thumb{
    background-color: var(--high-purple);
    border-radius: 45px;
}

section {
    text-align: center;
    background-color: var(--dark-purple);
    overflow: hidden;
    
}

section > .logo {
    position: relative;
    margin-bottom: 30px;
    width: 100%;
    
    height: auto;
    overflow: hidden;
}


.mainLogo{
    margin-top: 40px;
}

 .effect_ball{
    position: absolute;
    top: -220px;
    right: -120px;
    transform: rotate(345deg);
}

.effect_ball--bottom{
    position: absolute;
    left: -170px;
    bottom: -135px;
}


.btn{
    width: 280px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    border-radius: 35px;
    margin: 0 auto;
    cursor: pointer;
    background: var(--button-color);
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    color: var(--white);
    transition: all 0.2s ease-out;
}

.btn > a {
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    color: var(--white);
    transition: all 0.2s ease-out;
}

.btn:hover{
    opacity: 60%;
    width: 270px;
}

.comece_ja{
    box-sizing: border-box;
    margin-top: 50px;
    margin-bottom: 160px;
}


section > h1 {
    width: 90%;
    
    margin: auto;
    color: var(--pink);
    font-family: 'Poppins', sans-serif;
    font-size: 40px;
    
    padding-top: 100px;
    padding-bottom: 80px;
    border-bottom: 2.25px solid var(--high-purple);

}


section > .musicsArea {
    width: 100%;
    height: 600px;
    background-color: var(--dark-purple);

    margin-bottom: 40px;
    
    margin-top: 100px;
}

section > .musicsArea > h2 {
    text-align: start;
    margin-left: 100px;
    color: var(--pink);
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
}

section > .musicsArea > .musicDisplay {
    width: 100%;
    display: flex;
    justify-content: center;
}

section > .musicsArea > .musicDisplay > .malvadao3 {
    width: 25%;
    height: auto;
    margin: 45px;
    text-align: center;
}

section > .musicsArea > .musicDisplay > .malvadao3 > .banner {
    width: 100%;
    height: 250px;
    border-radius: 10px;
    background-image: url(../../Assets/Images/MusicBanner/malvadao3.svg);
    background-size: cover;
    background-repeat: no-repeat;
}

section > .musicsArea > .musicDisplay > .deusEMeuGuia {
    width: 25%;
    height: auto;
    margin: 45px;
    text-align: center;
}

section > .musicsArea > .musicDisplay > .deusEMeuGuia > .banner {
    width: 100%;
    height: 250px;
    border-radius: 10px;
    background-image: url(../../Assets/Images/MusicBanner/deusEMeuGuia.svg);
    background-size: cover;
    background-repeat: no-repeat;
}

section > .musicsArea > .musicDisplay > .pandora {
    width: 25%;
    height: 350px;
    margin: 45px;
    text-align: center;
}

section > .musicsArea > .musicDisplay > .pandora > .banner {
    width: 100%;
    height: 250px;
    border-radius: 10px;
    background-image: url(../../Assets/Images/MusicBanner/pandora.svg);
    background-size: cover;
    background-repeat: no-repeat;
}

section > .musicsArea > .musicDisplay  h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    color: var(--white);
}

section > .musicsArea > .musicDisplay  h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight:500;
    color: var(--white);
}

section > .musicsArea > .musicDisplay  h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--white);
}

@media screen and (max-width: 766px) {
    @media screen and (min-width: 300px){

        section > h1 {
            font-size: 29px;
        }

        section > .musicsArea > h2 {
            width: 50%;
            font-size: 20px;
        }

        section > .musicsArea {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        section > .musicsArea > .musicDisplay {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        section > .musicsArea > .musicDisplay > .malvadao3 {
            width: 50%;
            height: 350px;
            margin: auto;
            margin-top: 50px;
            text-align: center;
        }

        section > .musicsArea > .musicDisplay > .deusEMeuGuia {
            width: 50%;
            height: 350px;
            margin: auto;
            margin-top: 50px;
            text-align: center;
        }

        section > .musicsArea > .musicDisplay > .pandora {
            width: 50%;
            height: 350px;
            margin: auto;
            margin-top: 50px;
            text-align: center;
        }

       .comece_ja{
            margin-bottom: 10px;
       }
        
        .mainLogo{
            margin-top: 50px;
            width: 250px;
        }

        .effect_ball{
            display: none;
        }

        .effect_ball--bottom{
            display: none;
        }

        .btn{
            margin-top: 30px;
            width: 180px;
            height: 50px;
            font-size: 1rem;
        }

    }
}