/* Comentario */

/* 
nome de uma tag{...}
#nome de uma tag com id{...}
.nome de uma tag com uma classe{...}
 */

/* /google font roboto serif */

* {
    margin: 0px;
    padding: 0px;
    background-color: #0A0D12;
}

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

/* TEXTO */

h1 {
    color: #F1F5EE;
    font-family: "Roboto Serif", serif;
    text-align: center;
    font-weight: 400px;
    font-size: 38px;
    max-width: 550px;
    max-height: 150px;
    margin-top: 150px;
    margin-bottom: 50px;
}

h2 {
    color: #F1F5EE;
    font-family: "Roboto Serif", serif;
    text-align: center;
    font-size: 40px;
    margin-bottom: 10px;
}

p {
    color: #B7C3B9;
    font-family: "Roboto Serif", serif;
    text-align: center;
    font-size: 20px;
    margin-left: 60px;
    margin-right: 60px;
    line-height: 24px;
    margin-bottom: 10px;
}

.título {
    color: blue;
    text-align: center;
    font-size: 20px;
    margin-bottom: 30px;
}


.título-A {
    color: red;
    text-align: center;
    font-weight: 100;
    font-size: 20px;
    margin-bottom: 30px;
}


.título-B {
    color: green;
    text-align: center;
    font-size: 20px;
    margin-bottom: 30px;
}

.título-B {
    color: green;
    text-align: center;
    font-size: 20px;
    font-weight: 175px;
    margin-bottom: 30px;
}

.menu-1 {
    color: #F1F5EE;
    font-size: 20px;
}

.menu-2 {
    color: #68061D;
    font-size: 20px;
}

/* ESTRUTURA */

.imagem-1 {
    width: 500px;
    height: 1000px;
    background-color: yellow;
}


header {
    width: 100%;
}

section {
    width: 100%;
}

footer {
    width: 100%;
}

.header-container {
    height: 77px;
    max-width: 1265px;
    background-color: #0A0E13;
    margin-left: auto;
    margin-right: auto;
}

.container {
    width: 100%;
    height: 500px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.container-topo {
    width: 100%;
    height: 600px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(imagens/full\ bg\ 1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
    align-content: center;
}

.container-1 {
    width: 1204px;
    height: 1950px;
    margin-left: auto;
    margin-right: auto;
    background-size: cover;
    background-image: url(imagens/slipknot\ bg\ 1.jpg);
    background-repeat: repeat-y;
}

.container-3 {
    width: 1257px;
    height: 1257px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(imagens/full\ bg\ 2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.footer-container {
    width: 100%;
    max-width: 900px;
    background-color: #ff00bf;
    margin-left: auto;
    margin-right: auto;
}


/* COLUNAS */

.col-2 {
    width: 50%;
    margin-bottom: 10px;
}

.col-3 {
    width: 33.3%;
    margin-bottom: 10px;
}

.col-4 {
    width: 25%;
    margin-bottom: 10px;
}

/* FLEX */

.flex {
    display: flex;
}

.gap-peq {
    gap: 20px;
}

.gap-med {
    gap: 30px;

}

.gap-gran {
    gap: 40px;
}

/* CORES DE FUNDO */

.bc-escuro {
    background-color: #464646;
}

.bc-meio {
    background-color: #999999;
}

.bc-claro {
    background-color: #c7c7c7;
}


/* MARGINS E PADDINGS */

.pad-tb-grande {
    padding-top: 100px;
    padding-bottom: 100px;
}

.pad-tb-médio {
    padding-top: 54px;
    padding-bottom: 150px;
}

.pad-tb-pequeno {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* TRABALHO DO SITE */