*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body,html
{
height: 100%;
width: 100%;
}

main
{
    height: 100%;
    width: 100%;
    background-color: black;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 60px 1fr 0.5fr 0.5fr;

    gap: 10px;
    padding: 10px;
    font-size: 30px;
    font-weight: bold;

    grid-template-areas: "header header header"
                        "section section section"
                        "div-left bottom-up div-right"
                        "div-left bottom-down div-right"
    
    ;

}

header
{
background-color: rgb(149, 149, 219);
grid-area: header;
border-radius: 10px;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;

}

section
{
background-color: darkcyan;
grid-area: section;
border-radius: 10px;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}

#div-left{
background-color: darkgreen;
grid-area: div-left;
border-radius: 10px;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}

#bottom-up
{
background-color: darkorange;
grid-area: bottom-up;
border-radius: 10px;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}

#bottom-down
{
background-color: rgb(255, 78, 220);
grid-area: bottom-down;
border-radius: 10px;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;

}

#div-right
{
background-color: darkred;
grid-area: div-right;
border-radius: 10px;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}