.dock-container{position:fixed;width:100%;height:100%;pointer-events:none;display:flex;z-index:11}.dock{border:1px solid #ffffff1c;padding:.5em .7em;border-radius:20px;transition:opacity .2s ease-out,transform .2s ease-out}.dock,.dock-item{display:flex;pointer-events:auto}.dock-item{background-color:#060606;color:#fff;margin:5px;width:80px;height:50px;padding:10px;border-radius:10px;border:1px solid #ffffff1c;position:relative;z-index:0;font-size:1.8em;align-items:center;justify-content:center;transition:transform .1s ease-out,background-color .3s ease-out;will-change:transform;cursor:pointer}.dock-item:hover{z-index:2;background-color:#111;transition:background-color .3s ease}.dock-container.left{top:0;left:1em;justify-content:flex-start;align-items:center;height:100%}.dock-container.right{top:0;right:1em;justify-content:flex-end;align-items:center;height:100%}.dock-container.top{top:1em;left:0;justify-content:center;align-items:flex-start;width:100%}.dock-container.bottom{bottom:1em;left:0;justify-content:center;align-items:flex-end;width:100%}@media (max-width:550px){.dock-container{width:90%;height:90%}.dock{padding:.3em .5em}.dock-item{width:60px;height:45px;font-size:1.2em;padding:8px;margin:3px}}