html {
    background: var(--background);
}

.hidden {
    display: none !important;
}

body {
    background-color: var(--background);
    background-image:
        linear-gradient(rgba(127, 145, 123, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(127, 145, 123, 0.035) 1px, transparent 1px);
    background-size: 32px 32px;
    font-family: var(--font-ui);
    letter-spacing: 0;
}

body::before {
    display: none;
}

h1,
h2,
.changelog-header h1,
.super-remix-header h1 {
    font-family: var(--font-display);
    font-weight: var(--font-display-weight);
    letter-spacing: 0;
}

button,
input,
textarea,
select {
    font: inherit;
    letter-spacing: 0;
}

button,
a,
input,
textarea,
select,
[tabindex]:not([tabindex="-1"]) {
    outline: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    box-shadow: var(--focus-ring);
}

::selection {
    background: var(--primary);
    color: var(--background);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}