style.css

* { padding: 0; margin: 0; font-family: 'Roboto', sans-serif; box-sizing: border-box; }
html,
body { height: 100%; width: 100%; }
#main { width: 100%; height: 100%; background: rgb(155, 184, 155); display: flex; align-items: center; justify-content: center; }
#panel { width: 80%; height: 80%; border-radius: 10px; overflow: hidden; }
.ptop { background: rgb(72, 104, 72); width: 100%; height: 100px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 50px; }
.ptop .box { width: 30px; aspect-ratio: 1/1; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: #4caf50; font-weight: 400; font-size: 15px; border-radius: 5px; }
.ptop h3 { color: #fff; font-size: 20px; font-weight: 300; display: flex; align-items: center; justify-content: center; gap: 20px; }
.pbot {background: #fff;height: calc(100% - 100px);width: 100%;padding: 20px;display: flex;flex-wrap: wrap;gap: 16px;justify-content: center;align-items: center;}
.bubble { width: 45px; height: 45px; background: rgb(72, 104, 72); display: flex; justify-content: center; align-items: center; font-size: 20px; border-radius: 50%; color: #fff;}
.bubble:hover{-background: rgb(72, 154, 72);cursor:pointer;}
.pbot h1{text-align:center;}
.pbot h1 p{font-size:20px;color:#2196f3;margin-top:11px;}