* { box-sizing: border-box; }
* { scrollbar-color: hsla(var(--body-scrollbar-thumb)) hsla(var(--body-scrollbar-track)); scrollbar-width: auto; }

:root { --theme: dark; }
:root { --screen-xs: 300px; --screen-sm: 600px; --screen-md: 960px; --screen-lg: 1280px; --screen-xl: 1600px; }

html,
body { margin: 0; padding: 0; height: 100%; box-sizing: border-box; }
body { background: radial-gradient(140% 90% at 50% 10%, hsla(var(--body-background-from)) 0%, hsla(var(--body-background-to))) 150%; background-attachment: fixed; }
body { font-family: var(--type-family-default); font-size: var(--type-s-r1); }

body > header { display: block; position: fixed; top: 0; right: 0; left: 0; height: 80px; background-color: hsla(var(--header-background)); outline: 1px solid hsla(var(--header-border)); }
body > header > div { position: relative; display: grid; grid-template-columns: auto min-content; gap: var(--spacing-medium); user-select: none; }
body > header > div > #master { display: flex; --button-padding: 32px; --button-rounding: 0; }

body > loader { position: absolute; inset: 0; background-color: hsla(var(--header-background)); }
body > loader > container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; }
body > loader.hide { display: none; }

body > loader > container > span { width: 5px; height: 5px; display: inline-block; margin: 1px; border-radius: 50%; }
body > loader > container > span:first-child { animation-name: loading; animation-duration: 1s; animation-iteration-count: infinite; }
body > loader > container > span:nth-child(2) { animation-name: loading; animation-duration: 1s; animation-delay: 0.1s; animation-iteration-count: infinite; }
body > loader > container > span:last-child { animation-name: loading; animation-duration: 1s; animation-delay: 0.2s; animation-iteration-count: infinite; }

@media (prefers-color-scheme: light) {
	body > loader > container > span { background-color: hsla(0, 0%, 0%, 1.0); }
}

@media (prefers-color-scheme: dark) {
	body > loader > container > span { background-color: hsla(0, 100%, 100%, 1.0); }
}

@keyframes loading {
	50% { opacity:0; }
	100% { opacity:1; }
}

a:link { color: hsl(var(--a-text)); text-decoration: none; }
a:hover { color: hsl(var(--a-text-h)); text-decoration: underline; }
a:active { color: hsl(var(--a-text-a)); text-decoration: underline; }

#contents { display: grid; position: relative; top: 80px; margin: 0 auto; width: 100%; max-width: var(--screen-md); min-height: calc(100vh - 80px); }
#watermark { display: block; position: fixed; bottom: 50%; left: 50%; width: 100%; max-width: 50vw; max-height: 80vh; transform: translate(-50%, calc(50% + 40px)); opacity: 0.025; user-select: none; object-position: left bottom; object-fit: contain; }

@media only screen and (min-width: 960px) {
	#watermark { bottom: -60px; left: -60px; max-width: 800px; transform: none; filter: invert(); }
}