body {
    background-color: #44220F;
    color: #DFE0DC;
    background-image: url('https://myspace-cdn.pages.dev/2/bg.png');
    font-family: "Comic Sans MS";
    background-size: cover; /* Cover the entire viewport */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    background-attachment: fixed
}

img:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

.logo {
    content: "test";
}

.box, #avatar {
    border-color: #955E42;
    background-color: #553739;
    border-width: 7px;
    border-style: outset;
    margin: 10px;
}

.rightHead, .boxHead {
    background-color: #DB7F8E;
}


/*I stole this code from w3schools, shout out to the goats*/
img:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.75s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

b {
    color: #89cff0;
}

@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); }
}
/* End of stolen CSS */