@media (prefers-color-scheme: dark) {
    :root {
        --line-color: white;
        --background: black;
    }

    body {
        background: black;
        background-image: linear-gradient(180deg, #ffffff00 0%, rgb(0, 0, 0) 100%), radial-gradient(#dddddd3d 1px, transparent 0) !important;
        color: white;
    }
}

@view-transition {
    navigation: auto;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--line-color) var(--background);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background-image: linear-gradient(180deg, #ffffff00 0%, rgb(255, 255, 255) 100%), radial-gradient(#1111113d 1px, transparent 0);
    background-size: 1.5rem 1.5rem;
}

header,
main,
footer {
    padding: 0 1rem;
    margin: 0 auto;
    width: 100%;
    max-width: 1400px;
}

h4 {
    font-size: 1rem;
}

header {
    width: 100%;
    padding: 1rem;

    @media (width < 680px) {
        .menu {
            display: none;
        }
    }
}

a {
    color: inherit;
}

.border {
    border-width: var(--line-width, 2px);
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.1);
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}

pre {
    margin: 0;

    code {
        background-color: var(--background) !important;
        border-width: var(--line-width, 2px);
        border-style: solid;
        border-color: rgba(255, 255, 255, 0.1);
        border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    }
}

.docs {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: auto;

    main {
        display: flex;
        height: 100%;
        overflow: auto;
        padding: 0;

        &>section {
            overflow: auto;
            padding: 0 1rem;

            &:first-child {
                flex-basis: 20%;

                @media (width < 780px) {
                    display: none;
                }
            }

            &:last-child {
                flex-basis: 80%;

                @media (width < 780px) {
                    flex-basis: 100%;
                }
            }
        }
    }
}

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;

        li {
            margin-bottom: 1rem;
        }
    }
}

.container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    margin-bottom: 5rem;

    .components {
        padding: 2rem;
        display: grid;
        place-content: center;
        background-color: var(--background);
        border-width: var(--line-width, 2px);
        border-style: solid;
        border-color: rgba(255, 255, 255, 0.1);
        border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;

        @media (width < 460px) {
            padding: 2rem .5rem;
        }
    }

    table {
        width: 100%;
        border-collapse: collapse;
        border-width: var(--line-width, 2px);
        border-style: solid;
        border-color: rgba(255, 255, 255, 0.1);
        border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;

        * {
            font-family: 'Virgil', sans-serif;
        }

        th,
        td {
            text-align: left;
            padding: 0.5rem;
            background-color: var(--background);
        }

        th {
            border-bottom: 1px solid;
            border-color: rgba(255, 255, 255, 0.1);
        }
    }
}