html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.filbbertButton, 
.toopButton,
.potateButton{
  display: flex;
  align-items: center;
  justify-content: center;
}

.filbbertButtonDiv,
.toopButtonDiv,
.potateButtonDiv {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: -10px;
  margin: -20px;
}

/* Animation fade in */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 2s;
}

button {
  margin: 0px;
  padding: 10px;
  background-color: #33ff33;
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-size: 15px;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
}

@keyframes buttonClick {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1, 1);
  }
}

button:active {
  animation: buttonClick 0.1s;
  animation-fill-mode: forwards;
}

.filbbertButton:active {
  animation: buttonClick 0.1s;
  animation-fill-mode: forwards;
}

.toopButton:active {
  animation: buttonClick 0.1s;
  animation-fill-mode: forwards;
}

.potateButton:active {
  animation: buttonClick 0.1s;
  animation-fill-mode: forwards;
}

h1 {
  background-color: #006600;
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-size: 26px;
  color: #00ff00;
  padding: 10px;
  margin: 0;
  text-align: center;
}

h2 {
  font-family: "Comic Sans MS", sans-serif;
  text-align: center;
  align-items: center;
  justify-content: center;
}

h3 {
  font-family: "Comic Sans MS", sans-serif;
  text-align: center;
}

h4 {
  font-family: "Comic Sans MS", sans-serif;
  font-size: 10px;
}

@keyframes wobble {
  0% {
    transform: rotate(5deg);
  }
  25% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(5deg);
  }
}

#Filbbertglibbens:hover {
  animation: wobble 1s;
}