@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

.animated-bg {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

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

#certificateContainer {
  position: relative;
  margin: 0 auto;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  transition: all 0.3s ease;
}

#certificateContainer:hover {
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.certificate-text {
  font-family: 'Dancing Script', cursive;
  color: #000;
  text-align: center;
}