.hidden,.wrapper{overflow:hidden}#drop>div,nav,nav~ul{display:flex}*{font-family:Segoe,'Segoe UI','DejaVu Sans','Trebuchet MS',Verdana,sans-serif;font-weight:400;margin:0;padding:0;text-align:center;text-transform:uppercase}body,html{color:#fff;background-color:#1c1c1c}.wrapper{background:linear-gradient(45deg,#de6161,#2657eb);width:500px;height:1200px;margin:0 auto}#drop,nav{background-color:#f8f8f8}nav{width:90%;height:90px;padding:0 5%;position:relative;justify-content:flex-start;align-items:center}nav~ul{position:absolute;flex-direction:column;justify-content:center;align-items:center;left:1%;right:1%;opacity:0;visibility:hidden;z-index:2;list-style:none;transition:0s}nav~ul>li{color:#70f;padding:10px;cursor:pointer;font-size:30px}nav~ul>li:hover{filter:brightness(200%)}nav.open~ul{transition:.75s ease-in-out;visibility:visible;opacity:1}#drop{cursor:pointer;position:fixed;width:70px;height:70px;border-radius:0 50% 50%;transform:rotate(45deg);transition:border-radius .5s}nav.open>#drop{transition:.5s ease-in-out;box-shadow:0 0 0 1000px #f8f8f8,inset 0 0 0 20px #f8f8f8;position:relative}#drop.active{border-radius:50%;animation:drop .3s forwards}#drop>div{transform:rotate(-45deg);height:100%;width:100%;flex-direction:column;justify-content:center;align-items:center}#drop span{display:block;background-color:#70f;width:40px;height:3px;margin:5px 0;transition:.5s}#drop span.open:nth-child(1){transform:rotate(45deg) translate(5px,5px)}#drop span.open:nth-child(2){transform:rotate(-45deg) translate(5px,-5px)}#drop span.open:nth-child(3){opacity:0}@keyframes drop{0%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(30px) rotate(45deg)}100%{transform:translateY(10px) rotate(45deg)}}