:root {
    font-family: sans-serif;
    height: 100%;
    color-scheme: dark;
    accent-color: var(--primary-color);

    --primary-color: rgb(160, 160, 80);
    --foreground-light-color: white;
    --foreground-dark-color: rgb(90, 90, 90);
    --background-color: rgb(30, 30, 30);
}

body {
    margin: 0;
    height: 100%;
}

hr {
    color: var(--foreground-dark-color);
}

a, p {
    color: var(--foreground-light-color);
    font-family: Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.625;
}

a:link {
    color: var(--primary-color);
}

a:visited {
    color: var(--primary-color);
}

a:hover {
    color: color(from var(--primary-color) srgb calc(r * 0.9) calc(g * 0.9) calc(b * 0.9));
}

a:active {
    color: color(from var(--primary-color) srgb calc(r * 0.8) calc(g * 0.8) calc(b * 0.8));
}

ul {
    margin: 4px 0;
}

li {
    padding: 2px 0;
}

pre {
    border-radius: 8px;
    overflow: auto;
    margin: 16px 0;
}

code {
    font-family: "JetBrains Mono", monospace;
    font-size: 14px;
    line-height: 1.425;
}

#main {
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--background-color);
}

#main-content {
    display: flex;
    justify-content: center;
}

#page {
    flex: 0 1 960px;
    padding: 16px;
    background-color: var(--background-color);
    overflow: hidden;
}

#home-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

#sliders {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 16px;
}

.slider {
    height: 8px;
    opacity: 0;
    transition: opacity 0.8s ease;
}

#home-header:hover .slider {
    opacity: 1;
}

#trail-container {
    width: 192px;
    height: 192px;
    mix-blend-mode: screen;
}

.navigation {
    display: flex;
    justify-content: space-between;
    margin: 16px 0;
}

.navigation-header {
    display: flex;
    align-items: center;
    gap: 4px;
}

.navigation-header-text {
    font-size: 14px;
    color: var(--foreground-dark-color);
    margin: 0;
}

.chevron-left {
    width: 18px;
    height: 18px;
    background-color: var(--foreground-dark-color);
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'> <path stroke-linecap='round' stroke-linejoin='round' d='M15.75 19.5 8.25 12l7.5-7.5' /> </svg>");
}

.chevron-right {
    width: 18px;
    height: 18px;
    background-color: var(--foreground-dark-color);
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'> <path stroke-linecap='round' stroke-linejoin='round' d='m8.25 4.5 7.5 7.5-7.5 7.5' /> </svg>")
}

.arrow-uturn-left {
    width: 18px;
    height: 18px;
    background-color: var(--foreground-dark-color);
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'> <path stroke-linecap='round' stroke-linejoin='round' d='M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3' /> </svg>")
}