body {
  background-color: rgb(236, 247, 255);
  background-image: url("/img/cooler-bg-yarn-landscape.jpg");
  background-size: 100%;
  background-position: bottom right;
  background-repeat: no-repeat;
  height: 100vh;
  margin: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  font-family: "Irish Grover", system-ui;
  font-weight: 400;
  font-style: normal;
}

#headings {
  margin-top: 0;
  position: top, fixed;
  height: fit-content;
}



h1  {
  text-align: center;
  font-size: 125px;
  color: rgb(255, 179, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1s ease-in-out;
}

h1:hover {
  color: red;
  font-size: 200px;
}

h3 {
  text-align: center;
  font-size: 15px;
  color: grey;
}

#main {
  display: flex;
  flex-direction: row;
  align-items: left;
  justify-content: left;
  width: 80%;
  height: 80vh;
}

.bottomMenu {
  width: 80vh;
  height: 80%;
  display: flex;
  flex-direction: column;
  align-items: top;
  justify-content: center;
  margin-left: 80px;
}

.bottomMenuTitle {
  text-align: center;
  font-size: 30px;
}

.mid {
  width: fit-content
}

#cat {
  width: 50vh;
  cursor: url('img/pixel-hand-64.webp'), pointer;
  margin-left: 80px;
}

#cat:hover {
  animation: headShake 0.4s ease;
}

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

.shake {
  animation: headShake 0.4s ease;
}

#funfact {
  color: rgb(255, 179, 0);
  font-size: 40px;
}