*{
  font-family: "Comic Sans MS",cursive, sans-serif;
  color: white;

}

/* Page Design */

html {
  height: 500vh;
}

@keyframes gradMove {
  0% {
    background-position: 0% 0%;
  }

  100% {
    background-position: 100% 100%;
  }
}

a{
  text-decoration: none;
}

.gradient-box {
  background: linear-gradient(135deg, #9BAFD9, #103783);
  background-size: 200% 200%;
  animation: 9s ease-in-out 0s alternate infinite gradMove
}

div:has( > nav.navbar){
  height: 500vh;
}

.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: 1.5rem;
    font-weight: 600;
}

.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;
}

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

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

.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%;
}

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

.navLeft, .navRight{
  display: flex;
}