@import url('https://fonts.googleapis.com/css2?family=Bitcount:wght@100..900&display=swap');

#bouncy-text {
    position: relative;
    animation: bounce 1s infinite;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
    
}

.dark-brown {
    color: #4b3621;
}
h1 {
    color: darkslategrey;
}
.purple-text {
    color: purple;
}
p {
    color: cornflowerblue;
}
body {
    background-color: lavender;
    text-align: center;
    font-family: "Bitcount", sans-serif;
    font-weight: 400;
    cursor: url('orpheus-cursor.png'), auto;
}
img:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}