header{color:var(--white-color);height:100px;background-color:var(--logo-color);display:flex;justify-content:center;align-items:center}.nav__button{height:40px;width:100px;border-radius:25px;cursor:pointer;overflow:hidden;position:absolute;top:0;left:0}.nav__button .slider{width:100%;height:100%;position:relative}.nav__button .slider .el{height:100%;width:100%;background-color:var(--primary-color);text-transform:uppercase}.nav__button .slider .el:nth-of-type(2){position:absolute;top:100%;background-color:var(--black-color);color:var(--white-color)}.nav__button .slider .el:hover .perspective__text{transform:rotateX(90deg)}.nav__button .slider .el:hover .perspective__text p:first-of-type{transform:translateY(-100%);opacity:0}.nav__button .slider .el:hover .perspective__text p:nth-of-type(2){opacity:1}.nav__button .perspective__text{width:100%;height:100%;display:flex;align-items:center;justify-content:center;transition:transform .75s cubic-bezier(.76,0,.24,1);transform-style:preserve-3d}.nav__button .perspective__text p{transition:all .75s cubic-bezier(.76,0,.24,1)}.nav__button .perspective__text p:nth-of-type(2){position:absolute;transform:rotateX(-90deg) translateY(9px);transform-origin:bottom center;opacity:0}.nav__header{position:fixed;left:50px;top:50px}.nav__header .menu{width:480px;height:650px;background-color:var(--primary-color);border-radius:25px;position:relative}.nav__items{height:100%;padding:100px 40px 50px}.nav__items .body{display:flex;flex-direction:column;gap:10px}.nav__items .body .link__container{perspective:120px;perspective-origin:0}.nav__items .body .link__container a{color:var(--text-color);text-decoration:none;font-size:40px;transition:.2s ease}.nav__items .body .link__container a:hover{padding-left:15px}