body {
    font-family: monospace;
    color: #6f4d38;
    background-color: #cbb799;
    background-repeat: no-repeat;
    background-attachment: fixed;
    text-align: center;
    
}


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

audio{
    animation: 0.5s ease-in-out 0s infinite running floaty;
}

@keyframes floaty {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(0);
}
}

h1 {text-shadow: 0.5px 0.5px #3d211a;
    animation-name: myAnimation;
    animation-duration: 4s;
    animation-iteration-count: infinite;
  }
  
  @keyframes myAnimation {
    0%   {color: #f5f5dc;}
    25%  {color: #a07856;}
    50%  {color: #6f4d38;}
    100% {color: #cbb799;}
  }