style-min.css

body{background-image:url('https://mayicu.id/public/assets/ohcalc/OnceHuman.jpg');background-size:cover;background-position:center;background-attachment:fixed;margin:0;font-family:Arial,sans-serif;height:100vh;display:flex;justify-content:center;align-items:center}.background-section{background:rgba(255,255,255,.9);border-radius:12px;padding:30px;box-shadow:0 4px 15px rgba(0,0,0,.3);max-width:600px;width:100%}.container{display:flex;flex-direction:column;align-items:center}h1{margin-bottom:20px;color:#333}form{width:100%;max-width:600px}label{display:block;margin-bottom:8px;color:#555}select,input[type="number"]{width:100%;margin-bottom:12px;padding:12px;border-radius:6px;border:1px solid #ddd}input[type="number"]{box-sizing:border-box;width:100%;margin-bottom:12px;padding:12px;border-radius:6px;border:1px solid #ddd}input[type="submit"]{background-color:#007bff;color:white;border:none;padding:12px 24px;border-radius:6px;cursor:pointer;font-size:16px;transition:background-color .3s,transform .3s}input[type="submit"]:hover{background-color:#0056b3;transform:scale(1.05)}#spinner{display:none;text-align:center;font-size:18px;color:#333}#spinner::after{content:'';display:block;width:50px;height:50px;border:5px solid #ccc;border-top:5px solid #3498db;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}#result{margin-top:20px}.result-container{display:flex;flex-direction:column;align-items:center}.crafted-item{display:flex;flex-direction:column;align-items:center;margin-bottom:20px}.crafted-item img{width:50px;height:50px;border-radius:12px;margin-bottom:10px}.crafted-item .item-name{font-size:16px;font-weight:bold;text-align:center}.material-cost{display:flex;flex-direction:column}.material{display:flex;align-items:center;margin-bottom:10px}.material img{width:50px;height:50px;border-radius:12px;margin-right:10px}.material .material-name{font-size:14px}.category-button{background-color:#3498db;color:white;border:none;padding:10px 20px;margin:5px;cursor:pointer;border-radius:5px;font-size:16px}.category-button:hover{background-color:#2980b9}.category-button.selected{background-color:#1abc9c}#calculate-btn,#reset-btn{background-color:#2ecc71;color:white;border:none;padding:10px 20px;margin:5px;cursor:pointer;border-radius:5px;font-size:16px}#calculate-btn:hover{background-color:#27ae60}#reset-btn:hover{background-color:#e74c3c}