*{box-sizing:border-box}body{background:#fff;padding:10px;font-family:sans-serif;text-align:center}.container{display:flex;flex-direction:column;gap:20px;border:4px solid limegreen;padding:10px;background:#c7f0c7}.top{display:flex;justify-content:space-between;align-items:center;gap:10px;border:5px solid blue;padding:10px;background:#add8e6}.tbox{flex:1;background:#ffdab9;border:5px solid salmon;height:80px}.hmiddle{flex:1;display:flex;justify-content:center;align-items:center}.hmiddle .outer{flex:1;display:flex;background:#ffdab9;border:5px solid salmon;padding:5px}.hmiddle .inner{display:flex;border:5px solid red;background:pink;height:58px;width:390px}.hmiddle .inner div{flex:1;display:flex;justify-content:center;align-items:center}.hmiddle .left-box{border-right:15px solid red}.middle{display:flex;gap:20px}.mleft{flex:2;background:#ffb6c1;border:5px solid brown;height:200px}.mright{flex:1;display:flex;flex-direction:column;gap:20px}.mright div{flex:1;background:#ffb6c1;border:5px solid brown}.bottom{display:flex;gap:5px;border:5px solid blue;padding:10px;background:#add8e6}.bwide{flex:2;background:#e6e6fa;border:5px solid purple;height:80px;text-align:center}.bnarrow{flex:1;background:#ffdab9;border:5px solid salmon;height:80px;display:flex;justify-content:center;align-items:center;text-align:center}