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

:root {
  --background: #ffffff;
  --foreground: #1a1a1a;
  --card: #ffffff;
  --card-foreground: #1a1a1a;
  --popover: #ffffff;
  --popover-foreground: #1a1a1a;
  --primary: #0a62ae;
  --primary-foreground: #ffffff;
  --secondary: #f0f7ff;
  --secondary-foreground: #0a62ae;
  --muted: #f5f5f5;
  --muted-foreground: #666666;
  --accent: #e8f2fc;
  --accent-foreground: #0a62ae;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #e5e5e5;
  --input: #e5e5e5;
  --ring: #0a62ae;
  --radius: 0.5rem;
}

.dark {
  --background: #1a1a1a;
  --foreground: #ffffff;
  --card: #1a1a1a;
  --card-foreground: #ffffff;
  --popover: #1a1a1a;
  --popover-foreground: #ffffff;
  --primary: #ffffff;
  --primary-foreground: #1a1a1a;
  --secondary: #2a2a2a;
  --secondary-foreground: #ffffff;
  --muted: #2a2a2a;
  --muted-foreground: #b3b3b3;
  --accent: #2a2a2a;
  --accent-foreground: #ffffff;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #2a2a2a;
  --input: #2a2a2a;
  --ring: #ffffff;
}

@layer base {
  * {
    border-color: var(--border);
  }
  body {
    @apply bg-background text-foreground;
  }
}

@layer utilities {
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 425px) {
  .academic-row .academic-content {
    order: 1;
  }

  .academic-row .academic-image-wrap {
    order: 2;
  }
}