*{margin:0;padding:0;box-sizing:border-box;font-family:Gilroy}html,body{height:100%;width:100%}#main{display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%;height:100%;background-color:#caeeca}#panel{overflow:hidden;width:80%;height:80%;border-radius:10px;background-color:#fff}#ptop{display:flex;justify-content:center;align-items:center;color:#fff;padding:0 30%;width:100%;height:100px;background-color:#486848}.elem{padding:10px;display:flex;align-items:center;gap:20px}.elem h2{font-weight:500;font-size:22px}.box{color:#127739;font-size:25px;font-weight:600;padding:10px 20px;background-color:#fff;border-radius:5px}#pbtm{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;padding:20px;width:100%;height:calc(100% - 100px);overflow-y:scroll;scroll-behavior:smooth}.bubble{display:flex;align-items:center;justify-content:center;font-size:22px;width:40px;height:40px;background-color:#486848;color:#fff;border-radius:50%;font-weight:500}.bubble:hover{cursor:pointer;background-color:#324b32}button{background-color:#93b693;border-radius:8px;margin-top:40px;padding:2px;width:70px;height:30px;font-size:15px;cursor:pointer;color:#fff}button:hover{border-color:#0ff;color:#000;background-color:#fff;box-shadow:-1px 1px 1px #000}@media (max-width: 432px){#ptop{padding:0 15%}.box{padding:4px 8px;font-size:15px}.elem{padding:0 6px;gap:18px}.elem h2{font-size:20px}#pbtm{padding:10px}}@media (min-width: 433px) and (max-width: 510px){.box{padding:4px 8px;font-size:20px}.elem{padding:0 6px;gap:20px}.elem h2{font-size:25px}#pbtm{padding:15px}}@media (max-width: 281px){#ptop{padding:0 10%}.box{padding:3px 6px;font-size:13px}.elem{padding:0 5px;gap:5px}#pbtm{padding:8px}}