@import url('https://fonts.googleapis.com/css2?family=Anton&family=Montserrat&display=swap');



* {

  box-sizing: border-box;

  margin: 0;

   



}



.bg {

  width: 100vw;

  height: 100vh;

  background-image: radial-gradient(#3EC9F8,#5E6A91);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  font-family: 'Montserrat', sans-serif;



 

}



.cont {

  position: relative;

  width: 100%;

  height: 15vw;

  overflow: hidden;

  border-radius: 10px;

  box-shadow: 0px 0px 15px black;

  margin: 3vw 0;



}

.button {

  width: 100%;

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: flex-start;

  background-color: #F75780;

  position: realtive;

  border: 1px dashed yellow;

  border-radius: 10px;

  outline: none;

  transition: box-shadow 0.3s linear;

  box-shadow: inset 0px 0px 5px black, inset 0px 0px 0px #F7EA25;



}



.button:active {

    box-shadow: inset 0px 0px 0px black, inset 0px 0px 105px #F7EA25;

}

.button:active .blob {

  animation: none;

}



.blob {

  position: relative;

  top: 10%;

  left: 0%;

  width: 10vw;

  height: 10vw;

  fill: #1A87AB;

  transform-origin: 50% 50%;

  filter: drop-shadow(4px 4px 0 black);

  animation: bump 5.5s ease infinite;



  

  

}



@keyframes bump {

    0% {

      transform: scale(1, 1) translateX(0px);

    }

    9% {

      transform: scale(1.1, 0.9) translateY(20px);

    }

    28% {

      transform: scale(0.7, 1.3) translateY(-100px) translateX(55px);

    }

    35% {

      transform: scale(1, 1) translateY(20px);

    }

    50% {

      transform: scale(1, 1.1);

    }

    60% {

      transform: scale(1.1, 0.9) translateY(20px);

    }

    80% {

      transform: scale(0.7, 1.3) translateY(-100px) translateX(-55px);

    }

    88% {

      transform: scale(1, 1) translateY(20px);

    }

    100% {

      transform: scale(1, 1) translateX(0px);

    }
  }



.line {

  position: absolute;

  bottom: 20%;

  width: 100%;

  height: 0.5vw;

  background: white;

  transform: rotate(-8deg);

  box-shadow: 2px 2px 0px black;

  animation: line 4s ease infinite reverse;

}



@keyframes line {

    0% {

      transform: rotate(-8deg);

    }

    9% {

      transform: rotate(-8deg);

    }

    28% {

      transform: rotate(28deg);

    }

    35% {

      transform: rotate(20deg);

    }

    50% {

      transform: rotate(10deg);

    }

    60% {

      transform: rotate(-8deg);

    }

    80% {

      transform: rotate(-12deg);

    }



    88% {

      transform: rotate(-18deg);

    }



    100% {

      transform: rotate(-8deg);

    }

  }



.text {

  display: flex;

  position: absolute;

  top: 20%;

  font-size: 4vw;

  text-shadow: 2px 2px black;

  font-family: 'Anton', sans-serif;





  

  

}



.bmessage:nth-child(1n) {

  transform: rotate(8deg);

  animation: shake 0.5s ease infinite;

  color: #F7EA25



  }

.bmessage:nth-child(2n) {

  transform: rotate(5deg);

  animation: shake 0.5s ease-out infinite reverse;

  color: white



  }

  .bmessage:nth-child(3n) {

  transform: rotate(-2deg);

  animation: shake 0.5s 0.1s ease infinite;

 



  }



  .bmessage:nth-child(4n) {

    transform: rotate(-5deg);

    animation: shake 0.5s ease-in infinite reverse;

  }



@keyframes shake {

    0% {

      transform: translateX(0) rotate(8deg);

    }

    50% {

      transform: translateX(4px) rotate(-3deg);

    }



    100% {

      transform: translateX(0) rotate(6deg);

    }

  }



i {

 /* color: #2867B2;

  margin-top: 1vw  */

}