:root { font-size: clamp(16px, 1.4vw, 45px); --color-white: #fff; --color-gray-light: #f0f0f0; --color-blue-black: #121213; --color-blue-link: #5a8cff; --color-gray-mid: #8f8f8f; --color-gray-dark: #333; --color-accent-green: #88ff00; /* --scene-bg / --scene-fg arrive on from the Panel colour (scene-theme plugin) */ --main-color: #000; --sub-color: #fff; --main-color-hover: #333; --background-color: var(--scene-bg, #efefef); --background-color-book-library: var(--scene-bg, #121213); --header-text-on-dark: #fff; --header-text-on-light: #000; --text-color: var(--main-color); --overlay-white: rgba(255, 255, 255, 0.8); --overlay-white-light: rgba(255, 255, 255, 0.5); --overlay-white-heavy: rgba(255, 255, 255, 0.9); --overlay-black: rgba(0, 0, 0, 0.3); --overlay-black-light: rgba(0, 0, 0, 0.15); --overlay-black-heavy: rgba(0, 0, 0, 0.9); --overlay-gray-shadow: rgba(143, 143, 143, 0.6); --overlay-gray-shadow-light: rgba(143, 143, 143, 0.15); --border: 0.065rem solid var(--main-color); --border-white: 0.065rem solid var(--color-white); --button-outline-bg: var(--sub-color); --button-outline-color: var(--main-color); --button-outline-hover-bg: var(--main-color); --button-outline-hover-color: var(--sub-color); --button-outline-padding: 0 var(--space-8); --button-outline-transition: all 0.2s ease; --space-2: 0.125rem; --space-4: 0.25rem; --space-6: 0.375rem; --space-8: 0.5rem; --space-16: 1rem; --space-32: 2rem; --body-font-size: var(--space-16); --font-size-small: 0.8rem; --header-height: var(--space-32); --body-padding-top: calc(var(--header-height) * 2); --body-padding-sides: calc(var(--header-height) * 2); --layout-bottom-padding: 20vh; --transition-fast: 0.25s ease; --transition-medium: 0.4s ease; --underline-offset: 0.2rem; --underline-thickness: 0.065rem; } html[data-theme-mode="dark"] { --main-color: #f0f0f0; --sub-color: #111111; --main-color-hover: #c8c8c8; --header-text-on-dark: #f0f0f0; --header-text-on-light: #111111; --color-blue-link: #8ab4ff; } @media only screen and (min-width: 768px) and (max-width: 1024px) { :root { --body-padding-sides: var(--space-32); } } @media only screen and (max-width: 768px) { :root { --body-padding-sides: var(--space-16); } } @font-face { font-family: "sanjak-regular"; src: url("../fonts/AS-Sanjak-R.woff") format("woff"); unicode-range: U+AC00-D7AF, U+1100-11FF, U+3130-318F; size-adjust: 85%; font-display: swap; } html { width: 100%; height: 100%; overflow: hidden; } body { word-break: keep-all; font-family: "sanjak-regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 500; font-style: normal; line-height: 1.1; letter-spacing: 0; word-spacing: 0.05em; display: flex; width: 100%; height: 100%; flex-direction: column; overflow-y: auto; padding-top: 0; padding-left: var(--body-padding-sides); padding-right: var(--body-padding-sides); background-color: var(--background-color); color: var(--text-color); scrollbar-width: none; -ms-overflow-style: none; } @media print { html, body { height: auto; overflow: visible !important; display: block; padding: 0; } } body::-webkit-scrollbar, html::-webkit-scrollbar { display: none; } * { scrollbar-width: none; -ms-overflow-style: none; text-underline-offset: var(--underline-offset); text-decoration-thickness: var(--underline-thickness); } *::-webkit-scrollbar { display: none; } a { color: currentColor; text-decoration: none; } a[href^="mailto:"], a[x-apple-data-detectors] { text-decoration: none !important; } a[x-apple-data-detectors] { color: inherit !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } button { font: inherit; background: none; border: 0; color: currentColor; cursor: pointer; } img { width: 100%; height: 100%; } li { list-style: none; } ::selection { background-color: var(--main-color); color: var(--sub-color); } .kr { line-height: 1.3; }