/* :root {
  --d: 2500ms;
  --angle: 90deg;
  --gradX: 100%;
  --gradY: 50%;
  --c1: rgba(168, 239, 255, 1);
  --c2: rgba(168, 239, 255, 0.1);
} */
.btns {
  background-color: #0100ff;
  width: 130px;
  height: 40px;
  font-size: 20px;
  color: white;
  font-weight: 500;
  /* padding: 0.75%; */
  transform: rotate(-360deg);
  position: fixed;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
  cursor: pointer;
  left: -5px;
  z-index: 10;
  --border-size: 2px;
  --border-angle: 0turn;
  background-image: conic-gradient(
      from var(--border-angle),
      rgb(9, 245, 229),
      rgb(6, 6, 255) 50%,
      rgb(248, 232, 5) 
    ),
    conic-gradient(from var(--border-angle), transparent 20%, rgb(0, 255, 42), #f03);
  background-size: calc(100% - (var(--border-size) * 2))
      calc(100% - (var(--border-size) * 2)),
    cover;
  background-position: center center;
  background-repeat: no-repeat;
  animation: bg-spin 3s linear infinite;
  &:hover {
    animation-play-state: paused;
    scale: 1.2;
    transition: 0.4s ease-in-out;
    background-color: #0b0b0e;
    left: 0px;
    border: none;
  }
}
@keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}

@property --border-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
}

/*
.btns{
    background-color: #0100ff;
    width: 200px;
    height: 30px;
    font-size: 15px;
    color: white;
    font-weight: 500;
     //padding: 0.75%; 
    transform: rotate(-270deg);
    position: fixed;
    border: none;
    border-top-right-radius:8px;
    border-top-left-radius:8px;
    cursor: pointer;
    left: -85px;
    z-index: 10;
}

*/
.btn1 {
  top: 50%;
}
.btn2 {
  top: 65%;
}
.btns a {
  color: white;
  font-weight: bolder;
  text-decoration: none;
}

/* -----student corner css------ */
.linkBox a {
  padding: 0.5rem;
  height: 85px;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid black;
  margin: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.linkBox h5 {
  font-size: 15px;
}
.linkBox a img {
  width: 30px;
}
.linkBox a h6 {
  font-size: 13px;
  margin-bottom: 0px;
}
@media screen and (max-width: 767px) and (min-width: 320px) {
  .btns {
    right: -70px;
  }
  .btn1 {
    top: 30%;
  }
  .btn2 {
    top: 70%;
  }
}