body,html{
    height: 100%;
    margin: 0;
}

.grid-container {
    display: grid;
    grid-template-columns: minmax(0px, 0.2fr) minmax(0px, 2.6fr) minmax(0px, 0.2fr);
    grid-template-rows: minmax(0px, 1.0fr) minmax(0px, 5.5fr) minmax(0px, 2.0fr) minmax(0px, 10.5fr) minmax(0px, 0.1fr);
    background-color: #2196F3;
    height: 100%;
}

.grid-item:nth-child(1) {
    background-color: #beb367; 
}

.grid-item:nth-child(2) {
    background-color: #d17d48;
}

.grid-item:nth-child(3) {
    background-color: #beb367; 
}

.grid-item:nth-child(4) {
    background-color: #bbf8ac;
}

.grid-item:nth-child(5) {
    background-color: #bbf8ac;
}

.grid-item:nth-child(6) {
    background-color: #bbf8ac;
}

.grid-item:nth-child(7) {
    background-color: #bbf8ac;
}

.grid-item:nth-child(8) {
    background-color: #82b9c4;
}

.grid-item:nth-child(9) {
    background-color: #bbf8ac;
}

.grid-item:nth-child(10) {
    background-color: #f5f5f5;
}

.grid-item:nth-child(11) {
    background-color: #acb8f8;
}

.grid-item:nth-child(12) {
    background-color: #f5f5f5;
}

.grid-item:nth-child(13) {
    background-color: #f8acf5;
}

.grid-item:nth-child(14) {
    background-color: #f8acf5;
}

.grid-item:nth-child(15) {
    background-color: #f8acf5;
}

.grid-item {
    border: 1px solid #000;
    padding: 20px;
    font-size: 30px;
    text-align: center;
}