body{margin:0;padding:0;width:100vw;height:100vh;background-color:#0ea5e9;background:linear-gradient(to bottom,#7db9e8,#207cca 50%,#2989d8 51%,#1e5799)}canvas{display:block}p{padding:0;margin:0}.container{display:flex;justify-content:center;align-items:center;width:100vw;height:100vh}.coordinates{position:absolute;top:15px;left:15px;padding:10px;color:#000;background-color:#80d2ff;border-radius:24px}.info{position:absolute;top:60px;left:15px;display:flex;flex-direction:col;background-color:#80d2ff;border-radius:15px;max-width:200px;height:80px;padding:5px 10px 5px 60px;font-size:14px}.info p{margin:10px 0}.info:before{content:"🛈";position:absolute;top:25px;left:15px;font-size:30px}.hotbar{display:flex;justify-content:center;align-items:center}.hotbarContainer{display:flex;justify-content:center;background-color:#404040b3;box-shadow:0 0 10px #0003}#materialContainer{position:absolute;bottom:0}#geometryContainer{position:absolute;bottom:0;left:20px}#optionsContainer{position:absolute;bottom:0;right:20px}.slot{width:80px;height:80px;border:5px solid #999;background-color:transparent;padding:10px;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer}.slot img{max-width:100%;max-height:100%}.slot:hover{border-color:#666}.slot:focus{border-color:#e00;outline:none}.selected{border:5px solid #0ea5e9;background-color:#505050e6}.compass button{font-size:30px;font-weight:700;width:40px;height:40px;background-color:#ffffff4d;border:none;border-radius:9999px;cursor:pointer}.compass button:hover{background-color:#ffffffb3}.compass button:focus{outline:5px solid #ee0000}#north{position:absolute;color:red}#east,#south,#west{position:absolute;color:#000}#topDown{position:absolute;top:20px;right:20px;color:#000}.modal{display:none;justify-content:center;align-items:center;position:fixed;z-index:1;left:0;top:0;width:100vw;height:100vh;background-color:#0006}.modalHeaderOptions{display:flex;justify-content:end}.modalContent{background-color:#0ea5e9;margin:auto;padding:20px;border:1px solid #0ea5e9;border-radius:24px;width:80%;height:80%}.modalContent button{align-items:left;width:40px;height:40px;background-color:#ffffff4d;border:none;border-radius:9999px;font-size:24px;font-weight:700;cursor:pointer}.modalContent button:hover{background-color:#ffffffb3}.modalContent button:focus{outline:5px solid #ee0000}.modalImageContainer{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:5px;margin-top:50px}.modalImageContainer img{width:45%;margin:5px 10px;border:5px solid rgba(255,255,255,.3);border-radius:5px}