body{
    border: 4px solid gray;
    background-color: turquoise;
    margin: 60px;
    border-radius: 10px;
}

header div{
    background-color: rgb(221, 219, 219);
    height: 60px;
    border-radius: 10px 10px 0px 0px;
}

header nav div ul{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 20%;
    list-style: none;
    margin: 0px;
    padding: 0px;
}

header nav div ul li{
    background-color: red;
    margin: 10px;
    padding: 10px;
    text-align: center;
    border-radius: 100%;
}

header nav div ul li:first-child{
    background-color: green;
}

header nav div ul li:last-child{
    background-color: yellow;
}

header nav div ul li a{
    text-decoration: none;
}

main{
    background-color: white;
    display: grid;
    grid-template-columns:  repeat(7, 1fr);
    grid-template-rows: 100px 100px 100px 100px 100px 100px;
    grid-template-areas: 
    "naranja1 naranja1 naranja1 naranja1 naranja2 naranja2 naranja2"
    "amarillo amarillo amarillo rosa1 rosa1 rosa1 rosa1"
    "amarillo amarillo amarillo rosa1 rosa1 rosa1 rosa1"
    "amarillo amarillo amarillo rosa2 rosa2 rosa2 rosa2"
    "amarillo amarillo amarillo rosa2 rosa2 rosa2 rosa2"
    "azul1 azul1 azul2 azul2 azul2 azul3 azul3";
    gap: 10px;
    padding: 10px;
}

#naranja1{
    background-color: orangered;
    grid-area: naranja1;
}

#naranja2{
    background-color: orangered;
    grid-area: naranja2;
}

#amarillo{
    background-color: yellow;
    grid-area: amarillo;
}

#rosa1{
    background-color: purple;
    grid-area: rosa1;
}

#rosa2{
    background-color: purple;
    grid-area: rosa2;
}

#azul1{
    background-color: blue;
    grid-area: azul1;
}

#azul2{
    background-color: blue;
    grid-area: azul2;
}

#azul3{
    background-color: blue;
    grid-area: azul3;
}