.nav{background:transparent;border-radius:9px;backdrop-filter:blur(5px);padding:5px;display:flex;background-color:rgba(255,255,255,.1);height:100%;width:100%;position:relative;&:hover{&:before{opacity:1}.card-content:after{top:25%;opacity:1}}&:before{background:radial-gradient(800px circle at var(--mouse-x) var(--mouse-y),rgba(255,255,255,.1),transparent 40%);z-index:3}&:after,&:before{border-radius:inherit;content:"";height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .5s;width:100%}&:after{background:radial-gradient(600px circle at var(--mouse-x) var(--mouse-y),rgba(255,255,255,1),transparent 40%);z-index:2}.nav_wrap{background-color:#25262a62;border-radius:inherit;display:flex;justify-content:space-between;flex-grow:1;inset:1px;padding:3px;position:absolute;z-index:3;.logo{display:flex;align-items:center;gap:10px;span{display:flex;align-items:center;justify-content:center;width:50px;height:50px;overflow:hidden;border-radius:8px;transition:.6s cubic-bezier(.76,0,.24,1);background-color:#ffffff;svg{g{transition:.6s cubic-bezier(.76,0,.24,1)}}&:hover{svg{g{fill:#000}}}img{height:100%}}p{font-weight:200;margin:0;@media (max-width:720px){font-size:15px}@media (max-width:400px){font-size:13px}}}}}