html,body,#root{margin:0;padding:0;height:100%;width:100%}body{display:flex;justify-content:center;align-items:center;background:#111;font-size:45px;font-family:sans-serif;color:#fff}.container{width:100%;height:100%;background:#baf2b2;border:5px solid green;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;gap:20px}.TopSection{flex:1;border:5px solid blue;padding:10px;display:flex;justify-content:space-between;gap:10px;background:#cef}.TopBox{flex:1;background:#ffdab9;border:5px solid salmon;display:flex;justify-content:center;align-items:center}.TopPeachBox{flex:1;background:#ffdab9;border:5px solid salmon;display:flex;justify-content:center;align-items:center;gap:10px;padding:10px}.TopInnerBox{flex:1;border:5px solid red;background:#ffb6c1;padding:60px;display:flex;justify-content:center;align-items:center;font-weight:700}.TopInnerBox p{margin:0;flex:1;text-align:center;font-weight:700}.middle-box{flex:2;display:flex;gap:10px}.MiddleLeft{flex:2;background:#ffb6c1;border:5px solid brown;display:flex;justify-content:center;align-items:center}.MiddleRight{flex:2;display:flex;flex-direction:column;gap:10px}.MiddleRightBox{flex:1;background:#ffb6c1;border:5px solid brown;display:flex;justify-content:center;align-items:center}.bottom-box{flex:1;border:5px solid blue;padding:10px;display:flex;gap:10px;background:#cef}.BottomSide{flex:1;border:5px solid rgb(96,96,126);background:#e6e6fa;display:flex;justify-content:center;align-items:center}.BottomCenter{flex:2;display:flex;gap:10px}.BottomCenterBox{flex:1;border:5px solid salmon;background:#ffdab9;display:flex;justify-content:center;align-items:center}