@import "tailwindcss";

:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: #213547;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  --four-geeks-blue: #0097cf;
  --soft-blue: #f3fafd;
  --gray-text: #6883b4;
  --learnpack-blue: #02a9ea;
  --learnpack-light-blue: #c7f3fd;
}

a {
  font-weight: 500;
  color: var(--learnpack-blue);
  text-decoration: inherit;
}
a:hover {
  color: var(--learnpack-blue);
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: #f4f9fe;
}

.bg-learnpack-blue {
  background-color: var(--soft-blue);
}

.bg-learnpack {
  background-color: var(--learnpack-blue);
}

.bg-gray-blue {
  background-color: #e7f1ff;
}

.index-circle {
  width: 30px;
  height: 30px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 50%;
  color: var(--four-geeks-blue);
  background-color: var(--soft-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.text-gray {
  color: var(--gray-text);
}

.scrollbar-hide {
  scrollbar-width: none !important;
}

.loader {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  gap: 10px;
  justify-content: center;
  animation: glowing 1000ms linear infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.loader-icon {
  width: 40px;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* .loader-icon::after {
  content: "";
  display: block;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  height: 100%;
  border: 2px solid var(--gray-text);
  border-top: 2px solid var(--learnpack-blue);

  border-radius: 50%;
  animation: spin 2s linear infinite;
} */

@keyframes glowing {
  0% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

.blue-on-hover:hover {
  svg {
    fill: var(--learnpack-blue);

    path {
      fill: var(--learnpack-blue);
    }
  }
}

.border-learnpack-blue {
  border-color: var(--learnpack-blue);
}

.red-ball {
  width: 16px;
  height: 16px;
  border: 2px solid white;
  background-color: #eb5757;
  border-radius: 50%;
  position: absolute;
  top: -10px;
  left: 10px;
}

.fluid-svg {
  > svg {
    width: 100%;
    height: 100%;
  }
}

.outline-blue:focus {
  outline: 1px solid #51b3e5;
}

.border-C8DBFC {
  border-color: #c8dbfc;
}

.markdown-renderer {
  & ul {
    padding-left: 0;
    list-style-position: inside;
    list-style-type: disc;
  }

  & ol {
    padding-left: 0;
    list-style-position: inside;
    list-style-type: decimal;
  }
}

.appear {
  animation: appear 0.5s ease-in-out forwards;
  transform-origin: top center; /* o donde quieras que crezca */
  opacity: 0;
  transform: scaleY(0) translateY(20px);
}

@keyframes appear {
  from {
    opacity: 0;
    transform: scaleY(0) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scaleY(1) translateY(0);
  }
}

.bg-heavy-blue {
  background-color: #9fbdf0;
}

.border-heavy-blue {
  border-color: #9fbdf0;
  &:focus {
    outline: 1px solid #9fbdf0;
  }
}

.cloudy {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  animation: fadeIn 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
