p.navp > a, h1.navlogo > a{
  text-decoration: none;
}





.navbar {
    background: rgba(19, 67, 112, 0.349);
    backdrop-filter: blur(25px);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 3%;

}

.navlogo{
    font-size: 2rem;
    font-weight: 600;
    position:relative;
}

.navp {
  border-style: ridge;
  border-color: rgba(77, 217, 227, 0.3);
  background-color: rgba(41, 15, 75, 0.1);
  border-width: 0px;
  padding: 1rem 1rem;
  border-radius: 0.5rem;
  margin: 1rem;
  position:relative;
}

p.navp:not(.navselectedbutton):hover{
  background-color: rgba(13, 74, 78, 0.3);;
}

h1.navlogo:hover{
  display:inline;
  animation:1s navlogoshake steps(1) infinite;
}

@keyframes navlogoshake {
  0%,100%{
    rotate:5deg
  }
  50%{
    rotate:-5deg
  }
}

.navselectedbutton{
  background-color: rgb(83, 96, 161);
  border-width: 0px;
}

.navselectedlogo{
  border-width: 0px;
}

@property --navangle{
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.navselectedlogo::after, .navselectedlogo::before{
  content: '';
  position: absolute;
  height: 10%;
  width: 100%;
  left: 0%;
  top:100%;
  background-image: linear-gradient( var(--navangle), #4DC9E6, #210CAE );
  z-index: -1;
  padding: 2.5px;
  border-radius: 8px;
  animation: 3s navbtnspin linear infinite;
}

.navselectedbutton::after, .navselectedbutton::before{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: conic-gradient(from var(--navangle), #4DC9E6, #210CAE, #4DC9E6);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 2.5px;
  border-radius: 10px;
  animation: 3s navbtnspin linear infinite;
}

@keyframes navbtnspin {
  from{
    --navangle: 0deg
  }
  to {
    --navangle: 360deg
  }
}

.navselectedbutton::before{
  filter: blur(2rem);
  opacity: 50%;
}

.navselectedlogo::before{
  filter: blur(2rem);
  opacity: 50%;
}

.navLeft {
  order: -10;
}
.navRight {
  order:10;
}

.navLeft, .navRight{
  display: flex;
}