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