body{font-family:sans-serif;background-color:#111;color:#fff;overflow-x:hidden}.hamburger{position:fixed;top:20px;right:30px;z-index:1000;cursor:pointer;font-size:2rem;color:#fff}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#111;z-index:999;display:flex;align-items:center;justify-content:center;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .5s ease}.overlay.active{opacity:1;visibility:visible}.menu{list-style:none;text-align:center}.menu li{margin:20px 0}.menu li a{position:relative;display:inline-flex;align-items:center;font-size:2rem;color:#fff;text-decoration:none;overflow:hidden;height:2.4em}.text-wrapper{position:relative;height:100%;display:block;overflow:hidden}.text-top,.text-bottom{display:block;transition:transform .4s ease;will-change:transform}.text-top{transform:translateY(0%)}.text-bottom{position:absolute;top:0;left:0;transform:translateY(100%);color:#ccc}.menu li a:hover .text-top{transform:translateY(-100%)}.menu li a:hover .text-bottom{transform:translateY(0%)}.menu-arrow{margin-left:10px;opacity:0;transform:translateX(-10px);transition:opacity .3s ease,transform .3s ease;font-size:1.5rem;color:#fff}.menu li a:hover .menu-arrow{opacity:1;transform:translateX(0)}