body {
    cursor: none;
}

a {
  cursor: none;
}

.cursor {
    position: fixed;
    width: 50px;
    height: 50px;
    background-image: url("images/fingerpoint.png");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    transform: translate(5%, 1%);
    z-index: 100;
}

.button_gone {
    opacity: 0;
    pointer-events: none;
}

.amazing_button {
    background-color: hsl(314, 96%, 49%);
    color: var(--txt);
    transition-duration: 0.15s;
    align-self: center;
}

.amazing_button:hover {
    transform: rotate(1deg);
}

.amazing_button:active {
    animation: little-dance 6s ease-out both;
}

@keyframes little-dance {
  0% {
    transform: rotate(0deg) scale(1);
  }

  30% {
    transform: rotate(-15deg) scale(0.6);
  }
  
  60% {
    transform: rotate(15deg) scale(0.4);
  }

  80% {
    transform: rotate(15deg);
    transform: scale(0.2);
  }

  81% {
    transform: scale(5);
  }

  82% {
    transform: scale(0.4);
  }

  84% {
    transform: scale(3);
  }

  86% {
    transform: scale(0.6);
  }

  88% {
    transform: scale(1.8);
  }

  90% {
    transform: scale(0.7);
  }

  92% {
    transform: scale(1.2);
  }

  95% {
    transform: scale(1);
  }

  100% {
    transform: rotate(0deg);
    transform: scaleX(1);
    transform: scaleY(1);
  }
}

.stupid_button {
    background-color: hsl(187, 100%, 60%);
    color: var(--txt);
    transition-duration: 180ms;
    align-self: center;
}

.stupid_button:hover {
    animation: run-away 100ms ease-in-out both;
}

.stupid_button:active {
    background-color: hsl(159, 56%, 52%);
}

@keyframes run-away {
    0% {
        transform: translate(0px);
    }

    25% {
        transform: translate(300px) scale(0.6);
    }

    50% {
        transform: translateY(90px) translateX(-100px);
    }

    75% {
        transform: translateY(-150px) translate(400px) scale(1);
    }

    100% {
        transform: translate(-400px);
    }
}

.invisible_button {
    background-color: var(--bg);
    color: var(--bg);
    transition-duration: 1800ms;
    align-self: center;
}

.invisible_button:hover {
    background-color: hsl(0, 0%, 6%);
    
}

.invisible_button:active {
    background-color: var(--txt);
    transition-duration: 200ms;
}

.fukas_button {
    background-color: hsl(0, 88%, 47%);
    color: var(--txt);
    transition-duration: 280ms;
    align-self: center;
}

.fukas_button:hover {
    animation: siren 1400ms ease-in-out infinite;
}

@keyframes siren {
    0% {
        background-color: hsl(0, 88%, 47%);
        transform: translate(0px);
    }

    25% {
        background-color: hsl(240, 100%, 50%);
        transform: translate(-10px);
    }

    50% {
        background-color: hsl(0, 88%, 47%);
        transform: translate(10px);
        
    }

    75% {
        background-color: hsl(240, 100%, 50%);
        transform: translate(-10px);
    }

    100% {
        transform: translate(0px);
    }
}

.gassy {
    text-decoration: none;
}