@font-face { font-family: 'AmaticRegular'; src: url('../font/AmaticRegular.woff2') format('woff2') }
@font-face { font-family: 'FoggyBottom'; src: url('../font/FoggyBottom.woff2') format('woff2') }
@font-face { font-family: 'PerfectDOSVGA'; src: url('../font/PerfectDOSVGA437.woff2') format('woff2') }

:root {
  --text: #9ca3af;
  --text-h: #a4a4a4;
  --bg: #16171d;
  --border: #2e303a;
  --code-bg: #1f2028;
  --accent: #c084fc;
  --accent-bg: rgba(192, 132, 252, 0.15);
  --accent-border: rgba(192, 132, 252, 0.5);
  --social-bg: rgba(47, 48, 58, 0.5);
  --shadow: rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;

  --font-syne: "Syne", Roboto, system-ui, 'Segoe UI', sans-serif;
  --font-sarabun: "Sarabun", Roboto, system-ui, 'Segoe UI', sans-serif;
  --font-mono: "Share Tech Mono";

  --font-amatic: 'AmaticRegular';
  --font-foggy: 'FoggyBottom';
  --font-dos: 'PerfectDOSVGA';

  font: 18px/145% var(--font-syne);
  letter-spacing: 0.08em;
  color-scheme: light dark;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
}

h1, h2, h3 {
  font-family: var(--font-sarabun);
}