style.css

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

@layer base {
  :root {
    --color-bkg: 255 255 255;
    --color-content: 0 0 0;
    --color-accent-primary: 107 114 128;
    --color-accent-secondary: 17 17 19;
    --color-border: 229 231 235;
  }

  :root[data-theme='dark'] {
    --color-bkg: 25 25 25;
    --color-content: 236 238 236;
    --color-accent-primary: 176 180 186;
    --color-accent-secondary: 181 69 72;
    --color-border: 49 49 49;
  }
}

* {
  scroll-behavior: smooth;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  font-family: 'Calibri', sans-serif;
}

[x-cloak] {
  display: none !important;
}

body.no-scroll {
  overflow: hidden;
}

.overlay {
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

ul {
  list-style-type: disc;
}


.skeleton {
  background-color: #e0e0e0;
  animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
  0%, 100% {
    opacity: .4;
  }
  50% {
    opacity: 0.2;
  }
}