*{
    box-sizing:border-box;
}

img{
    max-width: 100%;
}

body{
    margin:0;
}

.container{
    background:lightblue;
    /* vh stands for viewport height, or the screen basically */
    height:100vh;
    display:flex;
    flex-direction:column;
    padding:10px;
    gap:10px;
}

.top{
    background:#fcf3b0;
    height:30%;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    gap:10px;
    padding:10px;
}

.top-item{
    background:#ff8181;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.bottom{
    background:#fbc5ae;
    height:70%;
    display:flex;
    gap:10px;
    padding:10px;
}

.left{
    background:#cbf3ff;
    width:50%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.left-item{
    background:#fffce6;
    width:20%;
    height:20%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.right{
    background:#f7abfa;
    width:50%;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.right-item{
    background:#c7ffb0;
    height:25%;
}