*{
  box-sizing: border-box;
}

img{
  max-width: 100%;
}

h1{
  text-align: center;
  font-family: 'Chakra Petch', sans-serif;
  color: rgb(200, 119, 192);
  font-size: 80px;

}

body{
  animation: sunset 6s infinite alternate linear;
}

@keyframes sunset{
  0%{
    background: rgb(147, 255, 253);
  }

  25%{
    background: rgb(255, 249, 98);
  }

  50%{
    background: rgb(255, 181, 121);
  }

  100%{
    background: rgb(255, 199, 199);
  }
}


/* STRAWBERRY */
.box{
  width:200px;
  height: 200px;
  border-radius: 50% 50% 50% 50% / 60% 60% 30% 30%;
  background: rgb(255, 43, 43);
  position: fixed;
  top:20%;
  left:15%;
  animation:spin 20s infinite linear;
}

@keyframes spin{
  0%{
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  50%{
    transform: rotate(180deg) scale(2);
    opacity: 0;
  }
  100%{
    transform: rotate(360deg) scale(1);
  }
}

.straw{
  max-width:400px;
  position:fixed;
  top:15%;
  left:10%;
  opacity:0;
  pointer-events: none;
}

.box:hover + .straw{
opacity:1;
}


/* BLUEBERRY */
.box2{
  width:100px;
  height: 100px;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  background: rgb(93, 89, 255);
  position: fixed;
  top:80%;
  left:20%;
  animation:spin2 12s infinite linear;
}

@keyframes spin2{
  0%{
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  25%{
    transform: rotate(180deg) scale(2);
    opacity: 0;
  }
  75%{
    transform: rotate(180deg) scale(1);
    opacity: 1;
  }
  100%{
    transform: rotate(360deg) scale(2);
    opacity: 0;
  }
}

.blue{
  max-width:300px;
  position:fixed;
  top:70%;
  left:15%;
  opacity:0;
  pointer-events: none;
}

.box2:hover + .blue{
opacity:1;
}



/* MANGO */

.box3{
  width:200px;
  height: 300px;
  border-radius: 40%;
  background: rgb(255, 205, 78);
  position: fixed;
  top:35%;
  left:45%;
  animation:scale 10s infinite linear;
}

@keyframes scale{
  0%{
    transform:  scale(1);
    opacity: 1;
  }
  50%{
    transform: scale(2);
    opacity: 0;
  }
  100%{
    transform: scale(1);
  }
}

.mang{
  max-width:600px;
  position:fixed;
  top:20%;
  left:30%;
  opacity:0;
  pointer-events: none;
}

.box3:hover + .mang{
opacity:1;
}



/* ORANGE */

.box4{
  width:200px;
  height: 200px;
  border-radius: 50%;
  background: rgb(255, 122, 0);
  position: fixed;
  top:30%;
  left:75%;
  animation:spin4 25s infinite linear;
}

@keyframes spin4{
  0%{
    transform: scale(1);
    opacity: 1;
  }
  50%{
    transform: scale(3);
    opacity: 0;
  }
  100%{
    transform: scale(1);
  }
}

.oran{
  max-width:500px;
  position:fixed;
  top:20%;
  left:65%;
  opacity:0;
  pointer-events: none;
}

.box4:hover + .oran{
opacity:1;
}