@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@600;700&display=swap");*{box-sizing:border-box}body{margin:0;padding:15px;background-color:#fef6e4;font-family:Fredoka,cursive,sans-serif;min-height:100vh}.container-tombol,body{display:flex;justify-content:center;align-items:flex-start}.container-tombol{flex-wrap:wrap;gap:15px;width:100%;max-width:600px;padding:0}.img-btn{width:calc((100% - 30px) / 3);background-color:#ffd803;border:4px solid #000;border-radius:18px;overflow:hidden;box-shadow:5px 5px 0 #000;cursor:pointer;transition:all .15s ease-in-out;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.img-wrapper{width:100%;aspect-ratio:1/1;overflow:hidden;border-bottom:3px solid #000}.img-wrapper img{width:100%;height:100%;object-fit:cover;display:block}.btn-label{width:100%;padding:6px 4px;font-size:.8rem;font-weight:700;color:#000;text-align:center;background-color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.1}.img-btn:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 #000}.img-btn:hover,.img-btn:hover .btn-label{background-color:#bae8e8}.img-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #000}.img-btn.loading{opacity:.7;cursor:wait;pointer-events:none;animation:shake .3s infinite}@keyframes shake{0%{transform:rotate(0deg)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}to{transform:rotate(0deg)}}@media (max-width:480px){body{padding:10px}.container-tombol{gap:10px}.img-btn{width:calc((100% - 20px) / 3);border-width:3px;border-radius:14px;box-shadow:4px 4px 0 #000}.img-wrapper{border-bottom-width:2px}.btn-label{font-size:.68rem;padding:4px 2px}.img-btn:hover{box-shadow:6px 6px 0 #000}}