* {
    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);

}

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


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


#foto {

    grid-column: 7/13;
    grid-row: 2;
}


nav {

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

nav a {
    color: var(--vermelho);
    text-decoration: none;
    font-weight: normal;
}

#ns {

    grid-column: 1/4;
    grid-row: 2;
    margin-top: 200px;
}

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

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

#atividadess {

    grid-column: 3/8;
    grid-row: 2;
    margin-top: 200px;
}

#txt_1 {

    grid-column: 3/11;
    margin-top: 150px;
    color: var(--vermelho);
}

#txt_2 {

    grid-column: 3/11;
    margin-top: 100px;
    color: var(--vermelho);
}

#img_inicial {

    margin-top: 150px;
    grid-column: 2/12;
    margin-bottom: 150px;
}

h2 {

    font-family: montserrat;
    font-size: 51px;
    font-weight: lighter;
    color: var(--vermelho);

}

#hanami_atividades {

    grid-column: 4/12;

}

#japonese {

    grid-column: 6/9;
}

#banner_1 {

    margin-top: 70px;
    margin-bottom: 100px;

}

#fundo1 {

    background: linear-gradient(180deg, rgba(250, 155, 170, 1) 0%, rgba(251, 249, 249, 1) 100%);
    grid-column: 4/10;
    height: 100%;
    grid-row: 1/3;
    z-index: -10;
}

a {

    font-size: 16px;
    font-weight: lighter;
    font-family: montserrat;
    color: var(--vermelho);
}

#pezinho {
    margin-top: 80px;
    color: var(--vermelho);
    grid-column: 4/7;
    grid-row: 1;
}

#saber1 {

    grid-column: 4/7;
    grid-row: 2;

}

#flor {

    grid-column: 8/10;
    grid-row: 1/3;
    transform: scale(1.3);
}

#banner_2 {


    margin-bottom: 100px;
}

#fundo2 {

    background: linear-gradient(180deg, rgba(250, 155, 170, 1) 0%, rgba(251, 249, 249, 1) 100%);
    grid-column: 4/10;
    height: 100%;
    grid-row: 1/3;
    z-index: -10;
}

#pezinho2 {
    margin-top: 80px;
    color: var(--vermelho);
    grid-column: 7/9;
    grid-row: 1;
}

#saber2 {

    grid-column: 7/9;
    grid-row: 2;

}

#lanterna {
    grid-column: 3/5;
    grid-row: 1/3;
    width: 90%;
    position: relative;
    left: 30px;
}

#banner_3 {


    margin-bottom: 100px;
}

#fundo3 {

    background: linear-gradient(180deg, rgba(250, 155, 170, 1) 0%, rgba(251, 249, 249, 1) 100%);
    grid-column: 4/10;
    height: 100%;
    grid-row: 1/3;
    z-index: -10;
}

#pezinho3 {
    margin-top: 80px;
    color: var(--vermelho);
    grid-column: 4/7;
    grid-row: 1;
}

#saber3 {

    grid-column: 4/7;
    grid-row: 2;

}

#cesta {

    grid-column: 7/9;
    grid-row: 1/3;
    right: 30px;
}

#banner_4 {


    margin-bottom: 100px;
}


#fundo4 {

    background: linear-gradient(180deg, rgba(250, 155, 170, 1) 0%, rgba(251, 249, 249, 1) 100%);
    grid-column: 4/10;
    height: 100%;
    grid-row: 1/3;
    z-index: -10;
}

#pezinho4 {
    margin-top: 80px;
    color: var(--vermelho);
    grid-column: 7/9;
    grid-row: 1;
}

#saber4 {

    grid-column: 7/9;
    grid-row: 2;

}

#barco {

    grid-column: 4/7;
    grid-row: 1/3;
    left: 30px;
}

#mermaids {

    margin-top: 40px;
    grid-column: 2/12;
    margin-bottom: 40px;
}

#img_2 {

    margin-top: 150px;
    grid-column: 2/12;
    margin-bottom: 150px;

}

h4 {

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

}


#grupo {

    grid-column: 1/13;

}

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