.dark {
  --background:0 0% 3.9%;
  --foreground:0 0% 98%;
  --card:0 0% 3.9%;
  --card-foreground:0 0% 98%;
  --popover:0 0% 3.9%;
  --popover-foreground:0 0% 98%;
  --primary:0 0% 98%;
  --primary-foreground:0 0% 9%;
  --secondary:0 0% 14.9%;
  --secondary-foreground:0 0% 98%;
  --muted:0 0% 14.9%;
  --muted-foreground:0 0% 63.9%;
  --accent:0 0% 14.9%;
  --accent-foreground:0 0% 98%;
  --highlight:198.4375 93.2039% 59.6078%;
  --highlight-background:198.5 45% 15%;
  --syntax-comment:0 0% 63.9%;
  --syntax-string:160 60% 55%;
  --syntax-keyword:280 65% 70%;
  --syntax-number:45 90% 65%;
  --syntax-variable:30 80% 65%;
  --syntax-function:330 75% 70%;
  --syntax-graphql-keyword:12 80% 70%;
  --destructive:0 62.8% 30.6%;
  --destructive-foreground:0 0% 98%;
  --border:0 0% 14.9%;
  --input:0 0% 14.9%;
  --ring:0 0% 83.1%;
  --chart-1:220 70% 50%;
  --chart-2:160 60% 45%;
  --chart-3:30 80% 55%;
  --chart-4:280 65% 60%;
  --chart-5:340 75% 55%;
  color-scheme: dark;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
}

:root {
    font-family: "Inter", sans-serif;
}

* {
    box-sizing: border-box;
    font-family: inherit;
}

body {
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 640px) {
    body {
        font-size: 0.95rem;
    }
}

.social-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin: 0.8rem auto 1rem;
}

.social-logos a {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.social-logos img {
    width: auto;
    height: 40px;
    transition: opacity .2s ease;
}

.social-logos a:hover img {
    opacity: 0.7;
}