body { background-image: url('../images/background.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; color: #fff; font-family: Arial, sans-serif; margin: 0; padding: 0; height: 100vh; width: 100vw; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } .header { background-color: rgba(0, 0, 0, 0.7); padding: 10px; text-align: center; margin-bottom: 20px; width: 100%; } .header h1 { margin: 0; color: #ffcc00; } .header p { margin: 5px 0; color: #00ff00; } .ui-container { display: flex; justify-content: center; align-items: center; margin-top: 1px; } .ui-image-costume { width: 113px; height: 212px; box-shadow: 0 0 10px rgba(0, 255, 0, 0.9); } .ui-image-equipment { width: 157px; height: 223px; box-shadow: 0 0 10px rgba(0, 255, 0, 0.9); } .slot-container { position: relative; display: flex; align-items: center; justify-content: center; margin-right: 10px; margin-bottom: -8px; } .slot { position: absolute; border: 1px dashed #00fbff; width: 32px; height: 32px; margin-right: 10px; } #slot8 { top: 147px; left: 4px; } #slot9 { top: 147px; left: 41px; } #slot10 { top: 164px; left: 8px; } #slot11 { top: 164px; left: 72px; } #slot12 { top: 129px; left: 40px; } #slot13 { top: 4px; left: 77px; } #slot14 { top: 147px; left: 77px; } #slot15 { top: 100px; left: 77px; } .inventory-container { display: flex; flex-direction: column; align-items: center; margin-bottom: 1px; } .inventory { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; box-shadow: 0 0 10px rgba(0, 255, 0, 0.9); } .inventory-item { width: 32px; height: 32px; margin: 1px; cursor: pointer; border: 1px solid #0de958; background-size: cover; position: relative; } .inventory-item-costume { border-color: #ff6600; } .inventory-item-tooltip { position: absolute; bottom: 140%; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.8); color: #fff; padding: 10px; border-radius: 5px; display: none; width: 220px; font-size: 12px; border: 1px solid #ccc; z-index: 1000; } .inventory-item:hover .inventory-item-tooltip { display: block; } .inventory-item-tooltip h3 { margin-top: 0; font-size: 14px; color: #ffcc00; } .inventory-item-tooltip p { margin: 5px 0; font-size: 12px; color: #00ff00; } .inventory-item-tooltip .properties { color: #ff9900; } .inventory-item-tooltip .remaining-time { color: #00ccff; } .clear-button { cursor: pointer; padding: 5px 10px; background-color: #f44336; color: #fff; border: none; border-radius: 4px; margin-top: 20px; } .alert { display: none; padding: 10px; background-color: #cd7722; color: white; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 4px; z-index: 1000; }