/*================================================
colors

accent 1  : #bc8df0
          : #e1b9ff
accent 2  : #92daea
          : #8DE6EB


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

body {
  scrollbar-color: #e1b9ff #ffffff;
  cursor: url("/media/cursor3.png"), auto;
  font-family: Arial, sans-serif;

  animation: fadeInAnimation linear 0.4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;

  
}

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

h1, h2, h3, h4, h5, h6 {
  margin: 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;
}

::-webkit-scrollbar-thumb:hover {
  background: #8DE6EB;
}

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

/* 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;
}

.title-shrikhand {
  color: #bc8df0;
  font-family: "Shrikhand", serif;
  font-weight: 400;
  font-style: normal;

}


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

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

.mainbox-outline {
  background: #ffffff73; 
  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-shadow: inset -1px -2px 6px #f0ccf0;
}


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

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

.box-content-1:hover {
  transition: box-shadow 0.6s ease-in-out;
  box-shadow: inset -4px -4px 0 rgba(191, 0, 255, 0.2), inset 4px 4px 0 rgba(0, 247, 255, 0.2);
}

.navbutton {
  border-radius: 8px;
  padding: 8px 10px;
  margin: 4px;
  color: #ffffff !important;
  background-color: #bc8df0;
  transition:  background-color 0.4s ease, letter-spacing 0.8s ease, border 0.4s ease, box-shadow 0.6s ease;
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
}

.navbutton:hover {
  background-color: #92daea;
  letter-spacing: 2px;
  box-shadow: -6px 0 0 rgba(191, 0, 255, 0.2), 6px 0 0 rgba(0, 247, 255, 0.2);
  border: 2px solid #bc8df0;
}

.button-small {
  border-radius: 4px;
  padding: 2px 4px;
  margin: 2px;
  font-size: 80%;
  color: #ffffff !important;
  background-color: #bc8df0;
  transition: background-color 0.8s ease, letter-spacing 1s ease-in-out, border 0.2s ease, box-shadow 0.6s ease;
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
}

.button-small:hover {
  background-color: #92daea;
  border: 2px solid #bc8df0;
  box-shadow: -2px 0 0 rgba(191, 0, 255, 0.2), 2px 0 0 rgba(0, 247, 255, 0.2);
  letter-spacing: 1px;
}

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

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

.text-highlight-3 {
  color: #322b3d;
  background-color: #fcd8fa;
  border-radius: 4px;
  padding: 1px 4px;
}

.text-highlight-4 {
  color: #322b3d;
  background-color: #fcd8fa;
  border-radius: 4px;
  padding: 1px 4px;
  background: #fdf9ff; 
  border: 1px solid #f4cdf3; 
}

  

/*=======flex classes=========*/

.flex-container {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

@media (max-width: 700px) {
  .flex-container {
    flex-direction: column;
  }
}

.flex-item-25 {
  flex: 25%;
}

.flex-item-40 {
  flex: 40%;
}

.flex-item-50 {
  flex: 50%;
}

.flex-item-60 {
  flex: 60%;
}

.flex-item-75 {
  flex: 75%;
}





/*====site elements====*/

.sitespinnericon {
  animation: spinner 8s linear 0s infinite normal;
}

.sitespinnericon:hover {
  animation-play-state: running;
  animation: spinner 1s linear 0s infinite normal;
  filter: brightness(104%);
  transition: filter 2s ease, 
}

@keyframes spinner {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.sitetitle {
  color: #ffffff;
  text-shadow: 0 0 3px #8d5692;
  font-family: "Shrikhand", serif;
  font-weight: 400;
  font-style: normal;
}


.sitetitle:hover {
  transform: scale(1.5);
  text-shadow: -4px 0 0 rgba(191, 0, 255, 0.2), 4px 0 0 rgba(0, 247, 255, 0.2);
  transition: transform 2s ease, text-shadow 2s ease;
}

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

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