.body .html {
    height: 100%;
    width: 100%;
    position:relative;
}

p {
   font-family: "Brush Script MT", "Lucida Handwriting", cursive;
   font-size: xx-large;
   position: absolute;
   bottom: 10px;
   right: 10px;
   margin-right: 15%;
}

.container {
    position: absolute;
    height: 75%;
    width: 75%;
    top: 10%;
    left: 10%;
    display: grid;
    grid-template-columns: 10% 30% 30% 30%;
    grid-template-rows: 40% 25% 25% 10%;
    border: 5px solid black;
}

.box {
    background-color: #F6F5F6;
    border: 5px solid black;
}

.first-red {
    background-color: #B33A27;
    grid-area: 1 / 1 / 2 / 3;
}

.first-white {
    grid-area: 1 / 3 / 2 / 5;
}

.second-white {
    grid-area: 2 / 1 / 3 / 3;
}

.third-white {
    grid-area: 2 / 3 / 3 / 5;
}

.first-yellow {
    grid-area: 3 / 1 / 5 / 2;
    background-color: #F0C432;
}

.fourth-white {
    grid-area: 3 / 2 / 5 / 3;
}

.first-blue {
    background-color: #2C395E;
    grid-area: 3 / 3 / 4 / 4; 
}

.fifth-white {
    grid-area: 4 / 3 / 5 / 4;
}

.sixth-white {
    grid-area: 3 / 4 / 5 / 5;
}