@import "tailwindcss";


@keyframes glitchPopSwap {
  0% {
    transform: scale(1);
    filter: hue-rotate(0deg);
    opacity: 1;
    background-image: url('/src/img/brain.png');
  }
  25% {
    transform: scale(1.2);
    filter: hue-rotate(90deg);
    background-image: url('/src/img/brain.png');
  }
  50% {
    transform: scale(1.4);
    filter: hue-rotate(180deg);
    background-image: url('/src/img/brain.png');
  }
  75% {
    transform: scale(1.6);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    filter: hue-rotate(360deg);
    opacity: 1;
  }
}

.glitch-swap {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-animation: glitchPopSwap 3s forwards;
    animation: glitchPopSwap 3s forwards;
}


.swap {
    transition: 0.9s;
}
.swap:hover {
    width: 30%;
}

.rotate {
    -webkit-transition: 0.9s;
    -moz-transition: 0.9s;
    -ms-transition: 0.9s;
    -o-transition: 0.9s;
    transition: 0.9s;
}

.rotate:hover {
    rotate: 90deg;
}


.up {
    -webkit-transition: 0.9s;
    -moz-transition: 0.9s;
    -ms-transition: 0.9s;
    -o-transition: 0.9s;
    transition: 0.9s;
}

.up:hover {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px);
}

.scale {
  transition: 0.9s;
}
.scale:hover{
  cursor: pointer;
  scale: 1.1;
}

.text {
  -webkit-transition: 0.9s;
  -moz-transition: 0.9s;
  -ms-transition: 0.9s;
  -o-transition: 0.9s;
  transition: 0.9s;
}

.dashed {
  text-decoration: line-through;
}

.line{}
.line:hover{
  border-bottom: 0.5px solid black;
}