body {
  cursor: url("/media/cursor3.png"), auto;

  animation: fadeInAnimation ease 1.4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;

}

@keyframes fadeInAnimation {
  0% {
      opacity: 0;
      filter: blur(16px);
  }
  100% {
      opacity: 1;
      filter: blur(0px);
  }
}


/*==============================*/

/* width */
::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: none;
  border-radius: 6px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #e1b9ff;
  border-radius: 6px;
  border: solid 1px #fff;

}

/*==============================*/

/* selection */
::-moz-selection {
  color: #ffffff;
  background: #8DE6EB;
}

::selection {
  color: #ffffff;
  background: #8DE6EB;
}


/*==============================*/

 /* unvisited link */
a:link {
  color: #bc8df0;
}

/* visited link */
a:visited {
  color: #bc8df0;
}

/* mouse over link */
a:hover {
  color: #a771e3;
  cursor: url("/media/cursor2.png"), auto;
}

/* selected link */
a:active {
  color: #a771e3;
  cursor: url("/media/cursor2.png"), auto;
} 

/*=== fonts ===*/

@font-face {
  font-family: "Shrikhand", serif;
  src: url(/fonts/Shrikhand/Shrikhand-Regular.ttf);
}


.shrikhand-regular {
  font-family: "Shrikhand", serif;
  font-weight: 400;
  font-style: normal;
}


/* ===custom components=== */

.mainbox-wrapper {
  padding: 20px 8px;
  margin: auto;
}

.mainbox-outline {
  background: #ffffffb1; 
  border: 3px solid #fcdffb; 
  box-shadow: 0 0 6px #fcdffb; 
  border-radius: 30px;
  max-width: 1000px;
  margin: auto;
  padding: 14px;
  backdrop-filter: blur(10px);
}

.mainbox-inner {
  background: #ffe9fe;
  border-radius: 24px;
  padding: 12px;
}

.box-content {
  background: #fdf9ff; 
  border: 1px solid #f4cdf3; 
}

.box-content-1 {
  background: #fdf9ff; 
  border: 1px solid #f4cdf3; 
  padding: 14px;
  border-radius: 10px;
}

.navbutton {
  border-radius: 8px;
  padding: 8px 10px;
  margin: 8px 4px;
  color: #ffffff !important;
  background-color: #bc8df0;
  transition: transform 0.8s ease, background-color 0.4s ease, letter-spacing 0.8s ease;
  text-decoration: none;
}

.navbutton:hover {
  background-color: #92daea;
  letter-spacing: 2px;
  transform: rotate(180deg);
}

.button-small {
  border-radius: 4px;
  padding: 2px 4px;
  margin: 6px 2px;
  font-size: 80%;
  color: #ffffff !important;
  background-color: #bc8df0;
  transition: background-color 0.8s ease, letter-spacing 1s ease-in-out;
  text-decoration: none;
}

.button-small:hover {
  background-color: #92daea;
  letter-spacing: 1px;
}

.text-highlight-1 {
  color: #ffffff;
  background-color: #bc8df0;
  border-radius: 4px;
  padding: 1px 2px;
  margin: 0 6px;
}

.text-highlight-2 {
  color: #bc8df0;
}
  




/* ===Animated classes=== */

.sitespinnericon:hover {
  filter: brightness(110%);
  transform: rotate(360deg);
  transition: filter 1s ease, transform 1s ease;
}
.charactericon:hover {
  box-shadow: 
    0 0 2px #fff,
    0 0 4px #fff,
    0 0 12px #ffc8fb, 
    0 0 21px #ffc8fb;
  filter: blur(3px) ;
  filter: brightness(1.05) ;
  
  transition-property: filter, box-shadow;
  transition-duration: 0.8s;
}

.neonglow-box-1:hover {
  box-shadow: 
    0 0 2px #fff,
    0 0 4px #fff,
    0 0 12px #ffc8fb, 
    0 0 21px #ffc8fb;

  transition-property: filter, box-shadow;
  transition-duration: 0.8s;    
}

.neonglow-text-1:hover {
  color: #fff !important;
  text-shadow: 
    0 0 2px #fff,
    0 0 4px #fff,
    0 0 12px #ffc8fb, 
    0 0 21px #ffc8fb;

  transition: color 0.8s ease, text-shadow 1s ease; 
}

.neonglow-image-1:hover {

  filter:
  drop-shadow(0 0 2px #fff)
  drop-shadow(0 0 4px #fff)
  drop-shadow(0 0 12px #ffc8fb)
  drop-shadow(0 0 21px #EFACFF)
  ;

  transition: filter 0.8s ease;
}



.boxrotate-1:hover {
  transform: rotate(1deg);
  transition: transform 0.3s ease-in-out;

}

.boxrotate-5:hover {
  transform: rotate(5deg);
  transition: transform 0.3s ease-in-out;
}


.boxspin:hover {
  transform: rotate(360deg);
  transition: transform 0.3s ease-in-out;
}

.boxspin-2:hover {
  transform: rotate(360deg);
  transition: transform 1s ease-in-out;
}

.text-wider:hover {
  letter-spacing: 1px;
  transition: letter-spacing 1s ease-in-out;
}