* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.main-container{
    background: rgb(210,239,249);
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column; 
    padding:20px;
}

.upper{
    background: lightpink;
    height:25%;
    display:flex;
    gap:10px;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
}

.upper-item{
    width: 100%;
    background: yellow;
    height:100%;
}

.lower{
    background: lightpink;
    height: 75%;
    display:flex;
    padding:10px;
    padding-top:5px;
    display: flex;
    flex-direction: row;

}

.divide-left{
    background:lightyellow;
    height:100%;
    width:100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.center-box{
    background:violet;
    height:20%;
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.divide-right{
    background:yellow;
    height:100%;
    width:100%;
    align-items: stretch;
    padding: 10px;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
}

.lower-item{
    height:24%;
    width:100%;
    background: violet;
}