:root {
  --red-color1: #FF595E;
  --yellow-color: #FFCA3A;
  --green-color: #8AC926;
  --blue-color2: #1982C4;
  --purple-color: #6A4C93;
}

* {
  box-sizing: border-box;
}

html {
  height: 100vh;
  font-family: "Noto Sans Display", sans-serif;
}

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
}

.main-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.button {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  width: 350px;
  height: 350px;
  margin: auto;
  background-color: #9feaff;
  background-image: linear-gradient(19deg, #8deaff 0%, #647eff 100%);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  box-shadow: 15px 15px 50px rgba(0, 0, 0, 0.2);
  animation: morphing 10s infinite;
  overflow: hidden;

  &:hover {
    animation-play-state: paused;
  }
}

.image {
  width: 300px;
  height: 300px;
}

@keyframes morphing {
  0% {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% box-shadow 15px 15px 50px rgba(0, 0, 0, 0.2);
  }

  25% {
    border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
  }

  50% {
    border-radius: 50% 50% 33% 67% / 55% 27% 73% 45% box-shadow -10px -5px 50px rgba(0, 0, 0, 0.2);
  }

  75% {
    border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
  }
}

@media screen and (min-width:769px) {
  .button {
    width: 600px;
    height: 700px;
  }

  .image {
    width: 586px;
    height: 493px;
  }
}