* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

img,
svg {
    display: block;
    width: 100%;
    height: auto;
}

@font-face {

    font-family: montserrat;
    src: url(fontes/Montserrat/Montserrat-VariableFont_wght.ttf);
}

:root {
    --vermelho: #B51300;
    --rosa: #FA9BAA;
    --preto: #240100;
    --branco: #FBF9F9;
    --cinza1: #EDE9E9;
    --cinza2: #A38F8F;
}

#body {
    color: var(--branco);
}

#header {

    background-color: var(--rosa);

}

.grelha1 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 36px;
}


#logo {
    grid-column: 1/4;
    grid-row: 1;
    align-self: center;
}

nav {

    grid-column: 6/11;
    grid-row: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 20;
}

nav a {

    text-decoration: none;
    font-weight: normal;
}


#img_header {
    width: 100%;
    grid-column: 7/13;
    grid-row: 1/3;
    z-index: 10;
}

#she {
    grid-column: 1/5;
    grid-row: 2;
    align-self: flex-end;
    margin-bottom: 30px;
}

#ramo {

    grid-column: 1/12;
    grid-row: 2;
    align-self: flex-end;
    position: relative;
    top: 250px;
}

#hanamii {
    margin-top: 200px;
    grid-column: 5/7;
    grid-row: 2;
}




h1 {
    font-family: montserrat;
    font-size: 51px;
    font-weight: bold;
    color: var(--vermelho);
}





h4 {

    font-family: montserrat;
    font-size: 28px;
    font-weight: bolder;
    color: var(--vermelho);

}

#tradicao {

    margin-top: 200px;
}

#tradicao_titulo {

    grid-column: 2/7;
    margin-top: 30px;
}

p {
    font-family: montserrat;
    font-size: 16px;
    font-weight: regular;
    color: var(--preto);
}

#txt_tradicao {
    margin-top: 50px;
    grid-column: 2/7;

}

#txt_tradicao2 {
    margin-top: 70px;
    grid-column: 8/12;

}

#gaja1_ {

    grid-column: 4/10;
    margin-top: 60px;

}


#videoo {
    grid-column: 4/10;
    width: 100%;
    margin-top: 90px;
    margin-bottom: 90px;
}

h2 {

    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 52px;
    font-weight: lighter;
    color: var(--vermelho);
}

#sakura_ {

    grid-column: 6/8;

}

#sakura_japones {
    grid-column: 6/8;

}

#ramo2 {

    grid-column: 1/5;
}

#ramo3 {

    grid-column: 9/13;
}

#img_atividades {

    grid-column: 1/9;
    grid-row: 1;
    margin-left: 50px;
}


#titulo_atividades {

    color: var(--branco);
    grid-column: 3/5;
    grid-row: 1;
    margin-top: 60px;
    margin-left: 40px;

}

#atividades_japones {
    color: var(--branco);
    grid-column: 3/9;
    grid-row: 1;
    margin-top: 120px;
    margin-left: 40px;
    font-weight: lighter;

}

a {

    font-family: montserrat;
    font-size: 18px;
    font-weight: bold;
    color: var(--vermelho);

}


#botao {
    grid-column: 4/7;
    margin-top: 320px;
    margin-bottom: 400px;
    grid-row: 1;
    background-color: var(--branco);
    border-radius: 10px;
}

#botao_ {

    grid-column: 4/7;

}

#gaja2 {

    grid-column: 9/13;

}

#parte2 {

    background-color: var(--cinza1);
    grid-column: 3/11;
    border-radius: 140px;
    margin-left: 30px;
    margin-right: 30px;
}

#quando {

    grid-column: 1/7;
    margin-left: 30px;
    grid-row: 1;
    margin-top: 50px;

}

li {
    color: var(--vermelho);
    font-family: montserrat;
    line-height: 50px;
    margin-left: 40px;
}

#li1 {

    grid-column: 2/11;

    font-size: 16px;

}

#li2 {
    color: var(--vermelho);
    grid-column: 2/9;
    grid-row: 3;
    font-family: montserrat;
    font-size: 16px;
}

#li3 {
    color: var(--vermelho);
    grid-column: 2/9;
    grid-row: 4;
    font-family: montserrat;
    font-size: 16px;

}

#aviaoo {

    grid-column: 1/5;
    grid-row: 5;
    margin-top: 120px;

}

#comoir {

    grid-column: 8/12;
    margin-top: 240px;
    grid-row: 5;

}



#nao {

    grid-column: 5/10;


}

#marque {

    grid-column: 5/10;

}

#dicas1 {

    grid-column: 1/6;

}

#li4 {

    grid-column: 1/6;


}

#li5 {

    grid-column: 1/6;


}

#li6 {

    grid-column: 1/6;


}

#li7 {

    grid-column: 1/6;


}

#dicas2 {

    grid-column: 1/6;

}

#li8 {

    grid-column: 1/6;


}

#li9 {

    grid-column: 1/6;


}

#gaja3 {

    grid-column: 8/13;
    grid-row: 1/8;

}



#footer {
    grid-column: 1/13;
}