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

body{
    height: 100vh;
    background-color: grey;
    color: white;
    font-size: 40px;
}
.container{
    height: 55vw;
    width: 90vw;
    margin: 25px;
    display: grid;
    border: solid black 4px;
    grid-template-columns: 1fr 1fr .5fr 1fr 1fr;
    grid-template-rows: 1fr .65fr .55fr 1fr;
}

.box{
   background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid black 4px;
}

.r1c1{
    grid-column: 1/2;
    grid-row: 1/3;
    background-color: red;
}

.r3c1{
    grid-column: 1/2;
    grid-row: 3/5;
    background-color: white;
}

.r1c2{
    background-color: lightblue;
    grid-column: 2/4;
}

.r1c3{
    background-color: rgb(167, 167, 99);
    grid-column:4/6;
}

.r2c2{
    grid-column: 2/3;
    grid-row: 2/4;
    background-color: rgb(167, 167, 99);
}

.r2c3{
    grid-column: 3/5;
    grid-row: 2/4;
    background-color: rgb(255, 255, 255);
}

.r4c2{
    grid-column: 2/4;
    grid-row: 4/5;
    background-color: red;
}

.r4c3{
    grid-column: 4/5;
    grid-row: 4/5;
    background-color: lightblue;
}

.r4c4{
    grid-column: 5/6;
    grid-row: 2/5;
    background-color: red;
}

/* .header, .sidebar, .r2c2{
    background-color: rgb(71, 195, 30);
}

.r1c4, .r1c3, .r2c3{
    background-color: red;
}

.r1c2, .r3c3{
    background-color: yellow;
} */