.logo:hover {
     box-shadow: inset 0 -0.3rem 0.8rem #0772BB;
     color: #1ecdfd;
}

.logo:hover span {
    background-color: #f76c21;
}

.logo {
     height: 2rem;
     width: 2rem;
     font-family: 'Pridi', serif;
     padding: 0.2rem;
     text-align: center;
     border: 0.15rem solid transparent;
     background: linear-gradient(#111320, #111320)padding-box, linear-gradient(135deg, #61DAFB, #111320) border-box;
     border-radius: 5rem;
     cursor: pointer;
}

.logo span {
     background: linear-gradient(20deg, #f76c21, #d766271a);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     opacity: 0.9;
}

.logo,
.logo span {
     transition: all 0.3s ease-in-out;
}

@media screen and (min-width:1441px) and (max-width:1920px) {

     .logo {
          height: 2.5rem;
          width: 2.5rem;
          display: flex;
          justify-content: center;
          align-items: center;
     }
}