@font-face {
  font-family: "FlowerVF";
  src: url("FlowerVF.ttf") format("truetype");
}

@font-face {
  font-family: "Knopp";
  src: url("Knopp-TRIALVariableVF.ttf") format("truetype");
}

body {
margin: 0;
min-height: 100vh;
 background-image: url("grass.gif");
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
}

h1 {
  font-family: "Knopp", sans-serif;
  text-align: center;
  font-size: 75px;
 transition: font-size 1s;
 color: blue;
}

.garden {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
  gap: 30px 60px;
  min-height: 75vh;
  padding: 30px;
}

.flower {
	font-family: "FlowerVF";
	font-size: 200px;
	font-variation-settings: "FLOW" 100;
	transition: font-size 1s, color 1s, font-variation-settings 1s;
	cursor: url("blueflower.png"), auto;
    display: inline-block;
    animation: sway 4s ease-in-out infinite;
    animation: bloom 5s infinite alternate;
}

@keyframes sway {
  0%, 100% {
    transform: rotate(-10deg);
  }

  50% {
    transform: rotate(10deg);
  }
}

@keyframes bloom {
	0% {
		font-variation-settings: "FLOW" 0;
	}
	25% {
		font-variation-settings: "FLOW" 100;
	}
	50% {
		font-variation-settings: "FLOW" 80;
		color: blue;
	}
	75% {
		font-variation-settings: "FLOW" 100;
	}
	100% {
		font-variation-settings: "FLOW" 0;
		color: rgb(255, 0, 72);
	}
}

.flower:active {
	font-variation-settings: "FLOW" 400;
	color: blue;
}

.flower:hover {
    animation: sway 4s ease-in-out infinite;
	font-variation-settings: "FLOW" 400;
	color: blue;
}

@media (max-width: 600px) {
  .flower {
    font-size: 100px;
  }

  h1 {
    font-size: 28px;
  }
}