.App {
  text-align: center;
}



#root {
  background: #121212;
}

body {
  /* background-color: #121212; */

}


.box-shadow-img {
  transition: box-shadow 0.3s; /* Add a smooth transition */
}

.hover-anchor:hover .box-shadow-img {
  filter: blur(10px); /* Apply the box shadow when hovering */
}


.react-icon-spin {
  animation: spin 2s infinite linear;
  color: #6C63FF !important;
  filter: drop-shadow(0 0 60px #6C63FF);
    transition: all .3s;
    isolation: isolate !important;
}

.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk&display=swap');

.text-font {
  font-family: 'Space Grotesk', sans-serif;
}

.iconer path{
  stroke: white !important;
}



#cursor {
  position: absolute;
  left: -90px;
  top: -90px;
  will-change: transform;
  transform: translate(-999px, -999px);
  pointer-events: none;
  filter: drop-shadow(0 0 60px #6C63FF);

  img {
    will-change: transform;
    transition: transform .1s linear;
    
    
  }
}


.primary-color {
  color: #7274ab;
 text-shadow: 50px 50px 103px #6C63FF;
 animation: breathe 5s infinite alternate;
}

.primary-color-shadow {
  color: #7274ab;
  text-shadow: 50px 50px 100px rgb(108, 99, 255, 0.3);
}

@keyframes breathe {
  0% {
    text-shadow: 50px 50px 103px #6C63FF;
  }
  50% {
    text-shadow: 55px 55px 128px #6C63FF;
  }
  100% {
    text-shadow: 50px 50px 113px #6C63FF;
  }
}


slide-in {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #121212;
  transform-origin: bottom;
  z-index: 2;
}

nav {
  z-index: 999 !important;  
}

.slide-out {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #121212;
  transform-origin: top;
  z-index: 2;
}

/* strong {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    bottom: -0.125rem;
    left: -0.5rem;
    right: -0.5rem;
    height: 0.75rem;

    z-index: -1;

    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/664131/underline.svg');
    background-repeat: no-repeat;
    filter: invert(1);


    background-size: cover;
  }
} */

.opacity-99 {
  opacity: 0.98 !important;
}

.primary-bg {
  background-color: #6c63ff !important;
}

.main-button {
  transition: all 0.5s;
}

.main-button:hover {
  filter: drop-shadow(0 0 30px rgb(108, 100, 255, 0.5));
  box-shadow: #6C63FF 0px 0px 0px 20px inset !important;
  transition: all 0.5s;
}

.primary-color-noshadow {
  color: #6c63ff;
  box-shadow: none !important;
}

.text-font-white {
  font-family: 'Space Grotesk', sans-serif !important;
  color: #ffffff;
}

::-webkit-scrollbar {
  width: 0px;
}

::-webkit-scrollbar-track {
  background-color: #121212;
}

.darkmode-toggle {
  z-index: 100000000000 !important;
}

.darkmode-layer, .darkmode-toggle {
  z-index: 9999999;
}

::-webkit-scrollbar-thumb {
  background-color: #ffffff;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}


.random-word {
  color: #6c63ff;
  transition: all 1.25s;
  animation: slidedown 4s infinite;
  -webkit-animation: slidedown 4s infinite;
  -moz-animation: slidedown 4s infinite;
  display: inline-block;
  width: auto;
  z-index: 100 !important;
}

@keyframes slidedown {
  0% {
    opacity: 50;
  }
  
  5% {
    opacity: 0;
    transform: translateY(0.5em);
  }
  
  7% {
    transform: translateY(-1em);
    
  }
  
  10% {
    opacity: 0;
  }
  
  20% {
    transform: translateY(0);
    opacity: 100;
  }
}

.bg-dark {
  background: #121212;

  }


.bg-dark-dot {
  --dot-bg: #121212;
  --dot-color: white;
  --dot-size: 0.5px;
  --dot-space: 22px;
	background:
		linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
		linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
		var(--dot-color);
}

.bg-dark-blur {
  background-color: rgb(18, 18, 18, 0.7);
}


.title {
  font-family: 'Grotezk Medium';
}

.lds-spinner {
  color: official;
  transform: scale(0.3);
  position: relative;
  width: 100px;
  height: 100px;
}
.lds-spinner div {
  transform-origin: 40px 40px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 18px;
  border-radius: 20%;
  background: #fff;
}
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


@tailwind base;
@tailwind components;
@tailwind utilities;



.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}