@import url('https://fonts.googleapis.com/css?family=Exo:400,700');
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .animation-delay-2000 {
    animation-delay: 2s;
  }
  .animation-delay-4000 {
    animation-delay: 4s;
  }
}
.blob{
  background-image: url(./1\ -\ Copy.jpg);
  width: 350px;
  height: 380px;
  background-size: cover;
  -webkit-background-position: center;
  background-position: center center;
  margin: auto;
  box-shadow: 0 5px 5px 5px rgba(13, 110, 253, 0.2);
  animation: animate 5s ease-in-out infinite;
  transition: all 1s ease-in-out;
}

@keyframes animate {
  0%, 100%{
      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  50%{
      border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
}

@keyframes gradientBackground {
  0% {
    background-color: #333333; /* Starting color */
  }
  50% {
    background-color: #666666; /* Midway color */
  }
  100% {
    background-color: #333333; /* Ending color */
  }
}

body {
  animation: gradientBackground 10s infinite;
}

.wavy-bg {
  background: linear-gradient(270deg, #6dd5ed, #2193b0, #6dd5ed, #2193b0);
  background-size: 400% 400%;
  animation: wavy 8s ease infinite;
}

@keyframes wavy {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}