@font-face {
  font-family: Louise; /* set name */
  src: url(Louise-Regular.woff2); /* url of the font */
}

.sue-ellen-francisco-regular {
  font-family: "Sue Ellen Francisco", cursive;
  font-weight: 400;
  font-style: normal;
}


p {
  font-family: Louise; /* use font */
}

.center{
  position: absolute;
  transform: translate(0,0);
  margin: 1vw;
  padding: 1vw;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
}

.container{
  position: relative;
  width: auto;
  height: 60vw;
  background-color: rgb(234, 230, 197);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5vw;
  margin: 5vw;
}

h1{
    font-size: 80px;
    color: rgba(223, 186, 40, 0.992);
    font-family: Louise;
    width: auto;
    height: 60vw;
    display: flex;
    flex-direction: column;
    padding: 5vw;
    margin: 5vw;
    position: absolute;
}

p{
  font-size: 30px;
  color: rgba(223, 186, 40, 0.992);
  font-family: LouiSue Ellen Francisco, cursive;
  width: auto;
  height: 10vw;
  display: flex;
  flex-direction: column;
  padding: 1vw;
  margin: 1vw;
  position: absolute;
  left: 8%;
  top: 85%;
}
.cat{
    width: 15vw;
    height: auto;
    position: absolute;

}

.cat:hover{
  transform: scale(2);
    animation: moveAround 2s infinite ease-in-out;
}

.frog{
    width: 15vw;
    height: auto;
    position: absolute;
}

.frog:hover{
  transform: scale(2);
     animation: moveAround 2s infinite ease-in-out;
}
.heart{
  width: 200px; 
  height: auto; 
  position: absolute
}

.heart:hover{
  transform: scale(2);
     animation: pulse 2s infinite ease-in-out;
}

.cat2{
  width: 10vw;
  height: auto;
  position: absolute;
}

.cat2:hover{
  transform: scale(1.05) rotate(-8deg);
}
.frog2{
  width: 10vw;
  height: auto;
  position: absolute;
}

.frog2:hover{
  transform: scale(1.05) rotate(8deg);
}


.frog3{
    width: 15vw;
    height: auto;
    position: absolute;
}

.frog3:hover{
    animation: pulse 3s infinite ease-in-out;
}

.cat3{
    width: 15vw;
    height: auto;
    position: absolute;
}

.cat3:hover{
    transform: scale(1.05) rotate(2deg);
}

.frog4{
    width: 15vw;
    height: auto;
    position: absolute;
}

.frog4:hover{
    transform: scale(1.05) rotate(2deg);
}

.cat4{
    width: 15vw;
    height: auto;
    position: absolute;
}

.cat4:hover{
  transform: scale(1.05);
  animation: shake 1s infinite
}

.cat-pure{
  position: absolute; 
  height: 50vw; 
  width: auto;
}

.cat-pure:hover{
  animation: pulse 5s infinite ease-in-out;
}

.frog5{
    width: 15vw;
    height: auto;
    position: absolute;
}

.frog5:hover{
    transform: scale(1.05) translateX(30px) translateY(-10px);
}

.cat5{
    width: 15vw;
    height: auto;
    position: absolute;
}

.cat5:hover{
  transform: scale(1.05) translateX(30px)
}

.frog6{
    width: 15vw;
    height: auto;
    position: absolute;
}

.frog6:hover{
  transform: scale(1.05) translateX(20px)
}

.cat6{
    width: 15vw;
    height: auto;
    position: absolute;
}

.cat6:hover{
    transform: scale(1.05) translateY(10px);
}

.frog7{
    width: 15vw;
    height: auto;
    position: absolute;
}

.frog7:hover{
  transform: scale(1.05) translateX(10px);
  animation: pulse 2s infinite ease-in-out;
}

.cat7{
    width: 15vw;
    height: auto;
    position: absolute;
}

.cat7:hover{
  transform: scale(1.05) translateX(-10px);
  animation: pulse 2s infinite ease-in-out;
}

/* Animations */
@keyframes pulse {
    0% { transform: scale(1.05); }
    50% { transform: scale(1); }
    100% { transform: scale(1.05); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0) scale(1.05); }
    25% { transform: translateX(-5px) scale(1.05); }
    75% { transform: translateX(5px) scale(1.05); }
}

@keyframes moveAround {
    0% { transform: translate(0, 0) scale(1.05); }
    25% { transform: translate(5px, -5px) scale(1.05); }
    50% { transform: translate(0, 0) scale(1.05); }
    75% { transform: translate(-5px, 5px) scale(1.05); }
    100% { transform: translate(0, 0) scale(1.05); }
}