@layer theme, base, antd, components, utilities;

@import 'tailwindcss';
@plugin "@tailwindcss/typography";

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}

#root {
  width: 100%;
}

.mod-codes-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .mod-codes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .mod-codes-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .mod-codes-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.nav-item {
  position: relative;
  overflow: hidden;
}

.nav-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  background: linear-gradient(to top, #22ffa7, transparent);
  transition: height 0.2s ease-in-out;
  opacity: 0.35;
  pointer-events: none;
  
}

.nav-item:hover::after,
.nav-item.active::after {
  height: 80%;  /* Height of the upward glow; adjustable. */
}

.nav-item:hover,
.nav-item.active {
  color: white;
}