@tailwind base;

@tailwind components;

@tailwind utilities;

body,
html {
  height: 100%;
}

.btn-test-cd {
  width: 100%;
}

/* #bg-layout {
    background: rgb(53, 87, 229);
    background: linear-gradient(0deg, rgba(53, 87, 229, 1) 0%, rgba(56, 153, 236, 1) 100%);
} */

.shadow-top {
  -webkit-filter: drop-shadow(3px -12px 6px rgba(0, 0, 0, 0.1));
  filter: drop-shadow(3px -12px 6px rgba(0, 0, 0, 0.1));
  /* Similar syntax to box-shadow */
}

.shadow-bottom {
  -webkit-filter: drop-shadow(3px 12px 6px rgba(0, 0, 0, 0.1));
  filter: drop-shadow(3px 12px 6px rgba(0, 0, 0, 0.1));
  /* Similar syntax to box-shadow */
}

html {
  scroll-behavior: smooth;
}

#menu {
  position: sticky;
  top: 0px;
  left: 0px;
  transition: all 0.6s ease;
}
/* #menu .container{
    padding: 40px 0px;
} */
.whitespace-break {
  white-space: break-spaces;
}

.anim-pulse {
  animation: pulse 1s;
  /* background-color: red; */
  -webkit-animation: pulse 1s;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }

  50% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

.fadeIn {
  opacity: 1;
  transition: opacity 1s;
}

.fadeOut {
  opacity: 0;
  transition: opacity 1s;
}
.container {
  transition: all 0.6s ease;
}
.sticky > div {
  padding: 16px 0px !important;
  transition: all 0.6s ease;
}

body {
  height: auto;
  min-height: 100vh;
}