@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

*{list-style: none;
margin:0;
padding: 0;
}

body{font-family: Inter;}
header{
    display: flex;
    justify-content: space-evenly;
    padding: 20px;
    align-items: center;
}

header h1{
    font-family: Inter;
    font-size: 32px;
    color: #0C0C0C;
}

header input{width: 620px;
height: 40px;
background-color:#EBEBEB;
border: none;
font-size: 18px;
padding-left: 20px;
outline: none;
border-radius: 4px;}

header button{width: 200px;
height: 40px;
color: white;
background-color: #3772FF;
border: none;
font-size: 14px;
font-weight: 800;
border-radius: 4px;}

.bloco-01{display: flex;
justify-content: space-evenly;
align-items: center;}

.texto{display: flex;
flex-direction: column;
justify-content: center;}

.texto-h1{width: 576px;
height: 134px;
font-size: 48px;
line-height: 67px;
font-weight: 600;}

.texto-p{width: 511px;
height: 29px;
line-height: 29px;
font-size: 24px;
font-weight: 400;
color: #737373;}

.texto button{width: 188px;
    height: 40px;
    color: white;
    background-color: #3772FF;
    border: none;
    font-size: 14px;
    margin-top: 40px;
    cursor: pointer;
    margin-bottom: 40px;
    font-weight: 800;
    border-radius: 4px;}

.numeros{display: flex;
align-items: center;}

.numeros p{color: #737373;}

.artista{padding-right:20px;}

.vendas{padding-right: 20px;}

.artista{padding-right:20px;
    display: flex;
flex-direction: column;
align-items: center;}
    
    .vendas{padding-right: 20px;
        display: flex;
        flex-direction: column;
    align-items: center}
    
    .avaliaçoes{display: flex;
        flex-direction: column;
    align-items: center}


.imagem-01{width: 396px;
height: 436px;
border-radius: 4px;}

.imagens-02 {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 50px;
    margin-left:20px;
}

.confira-as-ultimas{
    display: flex;
    flex-direction: column;
    padding-left: 20px;

}
.confira-as-ultimas h1{
    width: 321px;
    height: 96px;
    font-size: 30px;
    padding-bottom: 25px;
    font-weight: 500;
    color: #0C0C0C;
}

.confira-as-ultimas button{width: 188px;
height: 40px;
color: white;
background-color: #3772FF;
border-radius: 4px;
font-size: 14px;
font-weight: 800;
border:none;
cursor:pointer;}

.artistas{display: flex;
flex-direction: column;}

.title-artistas{ padding: 50px;}

.lista-de-artistas{display: flex;
justify-content: space-around;
flex-wrap: wrap;}

.lista-de-artistas img{width: 396px;
height: 484px;
}

.artista-texto-01{position:absolute;
margin: 30px;
color: #F9F9F9;}

.artista-texto-02{position:absolute;
margin: 30px;
color: #F9F9F9;}

.artista-texto-03{position: absolute;
margin: 30px;
color: #F9F9F9;}

footer{display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;}

footer h1{margin: 40px;}

ul{display: flex;}

li{margin: 40px;
cursor: pointer;}
li:hover{color:rgb(49, 49, 49) ;}

@media only screen and (max-width:700px){
    header h1{font-size: 25px;}

    header input{display: none;}

    header button{width: 100px;
    height: 24px;
font-size: 10px;}
    .imagem-01{display: none;}
    .texto-h1{width: 308px;
        height: 68px;
        font-size: 24px;
        line-height: 33px;
        font-weight: 600;}
        
        .texto-p{width: 298px;
        height: 17px;
        line-height: 29px;
        font-size: 14px;
        font-weight: 400;
        color: #737373;}

        .texto button{width: 312px;
        height: 32px;
        font-size: 10px;
        font-weight: 800;
    }
        .numeros{display: flex;
            align-items: center;
        justify-content: space-around;}
            
            .numeros p{color: #737373;}
            
            .artista{padding-right:20px;
            display: flex;
        flex-direction: column;
    align-items: center;}
            
            .vendas{padding-right: 20px;
                display: flex;
                flex-direction: column;
            align-items: center}
            
            .avaliaçoes{display: flex;
                flex-direction: column;
            align-items: center}

            .imagens-02 {
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                flex-wrap: wrap;
                margin-top: 50px;
                margin-left:0px;
            }
            

            .confira-as-ultimas h1{
                width: 321px;
                height: 96px;
                font-size: 40px;
                padding-bottom: 1px;
                font-weight: 500;
                color: #0C0C0C;
            }
   .imagens-02 img{margin: 20px;
width: 321px;
height: 200px;}
            
.confira-as-ultimas h1{font-size: 20px;}
 .confira-as-ultimas button{width: 312px;}

 .lista-de-artistas img{width: 312px;
height: 484px;}

footer{display: flex;
align-items: center;
justify-content: center;}


li{margin: 10px;
    font-size: 12px;
    padding-bottom: 20px;
    cursor: pointer;}
    li:hover{color:rgb(49, 49, 49) ;}
}