/* =========================================
   BASE — variables, fonts, global reset
   Applies to all viewports
   ========================================= */

:root {
    --color-surface-light: #f7f7f7;
    --color-surface-dark: #000;
    --color-text-dark: #000;
    --color-text-light: #f7f7f7;
    --color-accent: #ff163e;
}

* { box-sizing: border-box; }

@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans'), url('../font/OpenSans.ttf') format('truetype');
    font-display: fallback;
}

@font-face {
    font-family: 'Kode Mono';
    src: local('Kode Mono'), url('../font/KodeMono-VariableFont_wght.ttf') format('truetype');
    font-display: fallback;
}

html { scroll-behavior: smooth; }

body {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 300;
    background: #000;
    color: #f7f7f7;
    margin: 0;
    padding: 0;
}

h2 {
    font-family: "Kode Mono", monospace;
    font-style: normal;
    font-weight: 500;
    font-size: 50px;
    color: #f7f7f7;
    margin: 100px 0 0;
}

ul { list-style: none; margin: 0; padding: 0; }

body.modal-open { overflow: hidden; }

@media (max-width: 767px) {
    body { font-size: 20px; }
}