/* ==========================================
UndefinedVerseOfficial
Global Base Styles
========================================== */

html {
background: var(--color-background);
color-scheme: dark;
}

body {
position: relative;
isolation: isolate;
overflow-x: hidden;
background: var(--color-background);
color: var(--color-text);
font-family: var(--font-body);
font-size: var(--font-size-base);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}

::selection {
background: var(--color-chrome);
color: var(--color-obsidian);
}

a {
color: inherit;
transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
color: var(--color-chrome);
}

button {
color: inherit;
-webkit-appearance: none;
appearance: none;
}

input,
textarea,
select {
min-width: 0;
background: var(--color-surface);
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius-md);
}

input::placeholder,
textarea::placeholder {
color: var(--color-text-muted);
opacity: 0.8;
}

hr {
height: 1px;
border: 0;
background: var(--color-border);
}

main {
display: block;
width: 100%;
}

section {
position: relative;
}

.container {
width: min(
100% - (var(--container-padding) * 2),
var(--container-width)
);
margin-inline: auto;
}

.page-shell {
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
}

.page-content {
flex: 1;
width: 100%;
}

@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}

*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}