.bar{cursor:pointer;color:#fff;transition:all .3s}.rotatef{transform:rotate(180deg)}.rotater{transform:rotate(-180deg)}.nav-items{display:flex;flex-direction:column;position:absolute;top:50px;right:0;transition:visibility .1s,right .4s;background-color:#fff;backdrop-filter:blur(2px);border-radius:10px;width:300px;box-shadow:0 0 2px #000;overflow:hidden}.close-items{right:-320px;visibility:hidden}.open-items{right:-10pxpx;visibility:visible}.nav-items a{text-decoration:none;color:#000;font-size:20px;padding:5px 10px;text-align:center;transition:all .2s;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.nav-items a:hover{background-color:rgba(0,0,0,.5);color:#fff}