* {
    box-sizing: border-box;
}

body {
    margin:0;
}

.main-container {
    background-color: #878e7b;
    width: 100vw;
    height: 100vh;
    padding: 10px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.top {
    /*background-color: darkkhaki;*/
    height:20%;
    display:flex;
    justify-content:space-between;
    gap:10px;
}

.top-item {
    background-color: bisque;
    width:100%
}

.bottom {
    /*background-color: darkseagreen;*/
    height: 80%;
    display:flex;
    gap:10px;
}

.left {
    background-color:dimgray;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.centered-item {
    background-color: lightgoldenrodyellow;
    width: 20%;
    height:20%;
}

.right {
    background-color: lightcyan;
    width:100%;
}