* {
    box-sizing: border-box;
}
body {
    margin:0%;
}

.main-container {
    background:rgb(203, 245, 245);
    display:flex;
    flex-direction:column;
    height: 100vh;
    /* vh = viewport(vw) heigh, window for portal/phones */
    padding: 10px;
    gap: 10px;
}

.upper{
    /* background: rgb(121, 12, 223); */
    width: 100%;
    height:20%;
    display: flex;
    gap: 10px;
}

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

.lower{
    /* background: rgb(23, 242, 122); */
    width:100%;
    height: 80%;
    display:flex;  
    gap:10px;
}

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

.center {
    background:rgb(23, 242, 122);
    width: 20%;
    height: 20%;
    /* using percentage allows it to ratio within larger element during resize */
}

.right{
    background: rgb(165, 42, 118);
    width:100%;
}