* {
    box-sizing:border-box;
}

img{
    max-width:100%;
}

body {
    margin:0;
}

.main-container {
    background:darkslategray;
    height:100vh;
    padding:10px;
    display:flex;
    flex-direction:column;
}

.top {
    background:darkslategray;
    height:20%;
    width:100%;
    display:flex;
    gap:10px;
}

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

.bottom {
    background:darkslategray;
    height:80%;
    width:100%;
    display:flex;
    margin-bottom:10px;
}

.left {
    background:paleturquoise;
    width:50%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-right:10px;
    margin-top:10px;
    margin-bottom:10px;
}

.center {
    background:lightseagreen;
    width:150px;
    height:125px
} 

.right {
    background:darkslategray;
    width:50%;
    height:100%;
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:10px;
    margin-bottom:10px;
}

.right-item {
    background:darkcyan;
    width:100%;
    height: 25%;
}