body 
  {
    background-color: #97bee8;
    background-size: cover;
  color: #1f1f1f;
  font-family: 'Arial', Courier, normal;
  height: 100vh;
  align-items: center;
  }

.container {  display: grid;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "div1 div1 div1 div1 div1"
    "div2 div2 div2 div2 div2"
    "div3 div4 div4 div4 div7"
    "div5 div6 div6 div6 div8";
    align-items: center; 
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    
}

.div1 { grid-area: div1;
height: 20px;
border: 5px solid #ff6da9;
text-align: right;
padding-right: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: #ff6da9;
color: #f2377f;
}

.div2 { grid-area: div2;
border: 5px solid #ff6da9;
height: 300px;
margin-bottom: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: #fbb281;
text-align: center;
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}

.div3 { grid-area: div3;
border: 5px solid #ff6da9;
height: 20px;
margin-right: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: #ff6da9;
text-align: right;
padding-right: 10px;
color: #f2377f;
}

.div4 { grid-area: div4;
border: 5px solid #ff6da9;
height: 20px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: #ff6da9;
text-align: right;
padding-right: 10px;
color: #f2377f;
margin-right: 10px;
}

.div5 { grid-area: div5;
border: 5px solid #ff6da9;
height: 300px;
margin-right: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
background-color: #ff6da9;
text-align: center;
img {
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
    border-radius: 10px;
}
}

.div6 { grid-area: div6;
border: 5px solid #ff6da9;
height: 300px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
text-align: center;
background-color: #fbb281;
margin-right: 10px;

}

.div7 { grid-area: div7;
border: 5px solid #ff6da9;
height: 20px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: #ff6da9;
text-align: right;
padding-right: 10px;
color: #f2377f;
}



.div8 { grid-area: div8;
border: 5px solid #ff6da9;
height: 300px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
text-align: center;
background-color: #ff6da9;

}

@font-face {
        font-family: 'Dodica';
        src: url("fontes/dogica.otf") format('opentype');
        font-weight: normal;
        font-style: normal;
      }

h1 {
    text-align: right;
    margin-right: 100px;
    font-family: 'Dodica', Courier, monospace;
    color: #f2377f
}