* {
    box-sizing:border-box;
}

img {
    max-width:100%;
}

body {
margin:0;
}


.main-container {
    background:rgb(254, 254, 254);
    height:100vh;
    padding:10px;
    display:flex;
    flex-direction:column;
    border-style: dotted;
    border-color: deepskyblue;
    gap:10px;
}

.top {
    background:rgb(245, 245, 245);
height:20%;
width:100%;
display:flex;
gap:10px;
}

.top-item {
    background:rgb(71, 12, 159);
    width:100%;
    display:flex;
    text-align: center;
    align-items:center;
    justify-content:center;
    font-family: "Lucida Console", monospace;
    color:white;
    border-color: deepskyblue;
    border-style: dotted;
}

.bottom {
    background:rgb(245, 245, 245);
    height:20%;
    width:100%;
    display:flex;
    gap:10px;
}

.bottom-item {
    background:rgb(71, 12, 159);
    width:50%;
    text-align: center;
    display:flex;
    color:white;
    align-items:center;
    justify-content:center;
    font-family: "Lucida Console", monospace;
    border-style: dotted;
    border-color: deepskyblue;
    
}

.middle {

display:flex;
height:50%;
gap:10px;

}

.left{
    background:rgb(203, 153, 230);
    width:50%;
    height:100%;
    display:flex;
    flex-direction:row;
    justify-content:center;
    color:white;
    font-family: "Lucida Console", monospace;
    border-style: dotted;
    border-color: purple;
    align-items:center;
    
}

.center{
    background:rgb(203, 153, 230);
    width:100%;
    height:80px;
    justify-content:center;
    align-items:center;
    display: flex;
    text-align: center;
    font-family: "Lucida Console", monospace;
    color:white;
    border-style: dotted;
    border-color: deepskyblue;
}

.right{
    background:violet;
    width:50%;
    height:100%;
    text-align:center;
    display:flex;
    flex-direction:row;
    justify-content:center;
    color:white;
    font-family: "Lucida Console", monospace;
    border-style: dotted;
    border-color:purple;
    align-items:center;
}