/* transformar uma imagem numa marca block, o display block é disposição em bloco */

* {
    box-sizing: border-box;
}


img {
    display: block;
    width: 100%;
}


body {
    font-family: "Inria Sans", sans-serif;
}



/* a mesma coisa para o button */
button {
    display: block;
}


a {
    text-decoration: none;
}


h1 {
    font-size: 49px;
    color: #FFFFFF;
    text-align: left;

    font-family: "Judson", sans-serif;
    font-weight: 400;
    font-style: italic;

    margin: 0;
}


#frase_entrada {
    text-align: left;
    padding-left: 85px;
}



p {
    color: #E3DEDE;
    text-align: left;
    font-family: "Inria Sans", sans-serif;
    font-size: 14;
}


/* o # representa um id no HTML */


#entrada {
    background-image: url(imagens/the_weeknd_background.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    width: auto;
    height: 664px;
}



#biografia {
    padding: 50px;
    background-color: #000000;
    background: #00293B;
    background: linear-gradient(0deg, rgba(0, 41, 59, 1) 12%, rgba(0, 0, 0, 1) 100%);

}


h2 {
    color: #FFFFFF;
    font-size: 28px;
    text-align: center;
    font-family: "Judson", serif;
}


.conteudo_centrado {
    width: 80%;
    margin-left: auto;
    margin-right: auto;

    display: flex;
    gap: 30px;

}

#biografia .conteudo_centrado {
    gap: 100px;
}

/* uma div é uma caixa que neste caso está centrada com margens */
/* o display flex dispõe em linha */
/* o . refere-se a uma class, tal como o #refere-se ao id */



.duas_colunas {
    width: 60%;
}

#retrato {
    width: 40%;

}


.duas_colunas h2 {
    text-align: left;
}


#botao_biografia {
    width: 152px;
    height: 48px;
    background-color: #044D6F;
    margin-left: 0;
}


button {
    width: 152px;
    height: 48px;
    margin-left: auto;
    margin-right: auto;
    background-color: #044D6F;
}

/* o 33.33 equivale a 100%:3 */


#albums {
    background-color: #00293B;
    padding: 10px;
    padding-top: 79px;
    background: #000000;
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 41, 59, 1) 100%);
}


.quatro_colunas {
    width: 25%;
}



#merch {
    background-color: #000000;
    width: 1366;
    height: 643;
    padding: 10px;
    padding-top: 79px;
    gap: 20%;
}

.tres_colunas {
    height: 500px;
    width: 33.33%;
}


h3 {
    size: 18px;
    color: #FFFFFF;
    text-align: left;

    font-family: "Inria Sans", sans-serif;
    font-weight: 700;
    font-style: normal;

}


h4 {
    size: 18px;
    color: #FFFFFF;
    text-align: center;

    .inria-sans-bold {
        font-family: "Inria Sans", sans-serif;
        font-style: normal;
    }
}


/* o 25 equivalea 100%:4  */

#logo_rodape {
    width: 152px;
    height: 154px;
    margin-left: auto;
    margin-right: auto;
}


footer {
    padding-top: 60px;
    background-color: #000000;
    margin-left: auto;
    margin-right: auto;
}

#facebookicon {
    height: 57px;
    width: 55px;
}

#tiktokicon {
    height: 63px;
    width: 61px;
}

#xicon {
    height: 57px;
    width: 61px;
}

#instagramicon {
    height: 57px;
    width: 62px;
}


p.preco {
    color: #FFFFFF;
    text-align: center;
    font-size: 16px;
}

.redes_sociais {
    display: flex;
    margin-left: 40%;
    margin-right: 40%;
    width: 20%;
    height: 57px;
    margin-bottom: 30px;
}

p.texto_rodape {
    text-align: center;
    font-size: 14px;
    color: #FFFFFF;
    letter-spacing: normal;
}

/* margem dos lados é 40px */


#logo {

    width: 153px;
    height: 141px;
}


header {

    background-color: #000000;
    padding-top: 20px;
    padding-bottom: 20px;
}

nav a {
    margin-left: 30px;
    color: #FFFFFF;
}


.centra_cabecalho {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}


@media (max-width:600px) {

    .conteudo_centrado {
        flex-direction: column;
        width: 95%
    }

    .duas_colunas {
        width: 100%;
    }

    .tres_colunas {
        width: 100%;
    }

    .quatro_colunas {
        width: 100%;
    }


}