:root {
    --color-primary-dark: #44382b;
    --color-primary-medium: #6d4b32;
    --color-primary-light: #4a3423;
    --color-brown: #6b4b37;
    --color-brown-light: rgba(107, 75, 55, 0.3);
    --color-brown-medium: rgba(107, 75, 55, 0.5);
    --color-brown-dark: rgba(107, 75, 55, 0.8);
    --color-border: rgba(192, 167, 142, 0.3);
    --color-white: #ffffff;
    --color-white-semi: rgba(255, 255, 255, 0.74);
    --color-white-light: rgba(255, 255, 255, 0.1);
    --color-white-medium: rgba(255, 255, 255, 0.3);
    --color-white-strong: rgba(255, 255, 255, 0.5);
    --color-black: #151515;
    --color-text-light: #dadada;
    --color-dialogue: #663583;
    --color-dialogue-dark: #727cf9;
    --color-dialogue-border: #4b126b;
    --color-relic-bg: #ffd9a0;
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 4rem;
    --spacing-xxl: 6rem;
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
    --button-height: 118px;
    --background-primary: #202020;
    --background-primary-alt: #1a1a1a;
    --background-secondary: #161616;
    --background-secondary-alt: #000000;
    --background-modifier-border: #333;
    --background-modifier-form-field: rgba(0, 0, 0, 0.3);
    --background-modifier-form-field-highlighted: rgba(0, 0, 0, 0.22);
    --background-modifier-box-shadow: rgba(0, 0, 0, 0.3);
    --background-modifier-success: #197300;
    --background-modifier-error: #3d0000;
    --background-modifier-error-hover: #470000;
    --background-modifier-cover: rgba(0, 0, 0, 0.8);
    --text-accent: #7f6df2;
    --text-accent-hover: #8875ff;
    --text-normal: #dcddde;
    --text-muted: #999;
    --text-faint: #666;
    --text-error: #ff3333;
    --text-error-hover: #990000;
    --text-highlight-bg: rgba(255, 255, 0, 0.4);
    --text-highlight-bg-active: rgba(255, 128, 0, 0.4);
    --text-selection: rgba(23, 48, 77, 0.99);
    --text-on-accent: #dcddde;
    --interactive-normal: #2a2a2a;
    --interactive-hover: #303030;
    --interactive-accent: #483699;
    --interactive-accent-hover: #4d3ca6;
    --interactive-success: #197300;
    --scrollbar-active-thumb-bg: rgba(255, 255, 255, 0.2);
    --scrollbar-bg: rgba(255, 255, 255, 0.05);
    --scrollbar-thumb-bg: rgba(255, 255, 255, 0.1);
    --steampunk-bronze: var(--text-accent);
    --steampunk-copper: var(--text-accent-hover);
    --steampunk-dark-metal: var(--text-normal);
    --steampunk-metal: var(--text-muted);
    --steampunk-brass: var(--text-accent-hover);
    --steampunk-wood: var(--background-secondary);
    --steampunk-paper: var(--background-primary);
    --steampunk-text: var(--text-normal);
    --steampunk-text-light: var(--text-normal);
}

@font-face {
    font-family: 'Petersburg';
    src: url('/natsume-blog/assets/fonts/Petersburg.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-10FFFF;
}

@font-face {
    font-family: 'Petersburg Cyrillic';
    src: url('/natsume-blog/assets/fonts/Petersburg.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-10FFFF;
}

@font-face {
    font-family: 'Merriweather';
    src: url('/natsume-blog/assets/fonts/Merriweather-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Merriweather';
    src: url('/natsume-blog/assets/fonts/Merriweather-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

html, body {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

html {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
}