#content {
    display: flex;
    gap: 2rem;

    > div {
        flex-basis: auto;
        user-select: none;
        border-right: 1px solid hsl(var(--hue-1), 50%, 30%);
        background-color: var(--theme-1);
        width: 15rem;
        padding: 6rem 2rem 6rem 0;
        z-index: 1;
        overflow-y: auto;
        min-height: 100vh;

        .title {
            margin: .5rem 0;
            display: block
        }

        a {
            display: block;
            border-radius: .5rem;
            color: #888;
            padding: .2rem 1rem;
            transition: background-color .2s, color .2s;

            &.this {
                background-color: hsl(var(--hue-1), 50%, 30%);
                color: hsl(var(--hue-1), 100%, 50%)
            }

            &:not(.this):hover {
                background-color: var(--theme-3);
                color: var(--theme-7)
            }
        }
    }

    section {
        flex: 1 1 0;
        padding: 6rem 0 2rem;
        width: 100%;

        > div:first-child {
            width: 100%;

            h1, h2 {
                margin: 0;
                line-height: 1;
                margin-bottom: 2rem;
                color: #fff
            }

            a {
                position: relative;
                transition: color .2s;
                color: hsl(var(--hue-2), 80%, 60%);

                &::after {
                    position: absolute;
                    bottom: 0;
                    height: 2px;
                    background-color: hsl(var(--hue-2), 90%, 70%);
                    content: '';
                    width: 0;
                    left: auto;
                    right: 0;
                    transition: width .4s cubic-bezier(.5, .5, 0, 1)
                }

                &:hover {
                    color: hsl(var(--hue-2), 90%, 70%);

                    &::after {
                        width: 100%;
                        left: 0;
                        right: auto
                    }
                }
            }

            h1 {
                font-size: 3rem
            }

            h2 {
                font-size: 2rem;
                margin-top: 3rem
            }

            h3 {
                font-size: 1.5rem
            }

            p {
                margin: 1rem 0;
            }

            strong {
                color: #fff
            }

            blockquote {
                border-left: 1px solid var(--theme-2);
                padding: .5rem;
                margin: 0
            }

            code:not(pre > code) {
                background-color: var(--theme-2);
                border-radius: .5rem;
                padding: .2rem .4rem
            }

            code {
                font-family: mono, monospace
            }

            .heading {
                display: inline-block;
                scroll-margin-top: 4rem;
                max-width: none;
                margin: 0
            }

            li {
                margin: .5rem 0
            }

            pre {
                background-color: #000;
                border: 1px solid var(--theme-3);
                border-radius: .5rem;
                font-family: mono, monospace;
                padding: 1rem;
                line-height: normal;
                white-space: pre-wrap;
                word-wrap: break-word;
                max-width: 40rem;
                margin: 2rem 0
            }

            .code {
                overflow: hidden;
                border-radius: .5rem;
                margin: 2rem 0;
                display: flex;
                height: 18rem;
                width: 100%;
                flex-direction: column;
                background-color: #000;
                border: 1px solid var(--theme-3);
                max-width: 40rem;

                &.open canvas {
                    transform: none
                }

                canvas {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    transform: translateX(100%);
                    transition: transform .8s cubic-bezier(.5, .5, 0, 1)
                }

                > div {
                    position: relative;

                    &:first-child {
                        flex: 1 1 0;
                        min-height: 0;

                        .cm-content {
                            padding: 1rem 0
                        }

                        .cm-line {
                            padding: 0 1rem
                        }

                        button {
                            position: absolute;
                            right: 1rem;
                            top: 1rem;
                            background-color: hsl(var(--hue-1), 85%, 30%);
                            color: #fff;
                            width: 2rem;
                            height: 2rem;
                            border-radius: .5rem;
                            cursor: pointer;
                            font-size: 1rem;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            transition: background-color .2s;
                            border: none;

                            &:disabled {
                                background-color: var(--theme-3)
                            }

                            &:hover {
                                background-color: hsl(var(--hue-1), 85%, 20%)
                            }
                        }
                    }

                    &:last-child {
                        flex-basis: 0;
                        min-height: 0;
                        line-height: normal;
                        background-color: var(--theme-2);
                        transition: flex-basis .2s cubic-bezier(.5, .5, 0, 1);

                        &.open {
                            flex-basis: 5rem;

                            i {
                                transform: translateY(.1rem) rotate(180deg)
                            }
                        }

                        pre {
                            display: block;
                            padding: .5rem;
                            overflow-y: auto;
                            height: 100%;
                            margin: 0;
                            border: none;
                            border-radius: 0;
                            background: none;
                            white-space: pre-wrap;
                            word-wrap: break-word
                        }

                        button {
                            position: absolute;
                            bottom: 100%;
                            left: 1rem;
                            border-top-left-radius: 1rem;
                            border-top-right-radius: 1rem;
                            width: 2rem;
                            height: 1.5rem;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            background-color: var(--theme-2);
                            cursor: pointer;
                            border: none
                        }

                        i {
                            transition: transform .2s cubic-bezier(.5, .5, 0, 1);
                            transform: translateY(.1rem);
                            font-size: 1rem;
                            color: #fff
                        }
                    }
                }
            }
        }

        > div:last-child {
            display: flex;
            gap: 1rem;
            margin-top: 6rem;

            a {
                display: flex;
                width: 100%;
                max-width: 15rem;
                border: 1px solid hsl(var(--hue-2), 30%, 20%);
                padding: 1rem;
                align-items: center;
                gap: 1rem;
                transition: background-color .2s, border-color .2s;
                border-radius: .5rem;
                color: inherit;
                justify-content: center;
                position: relative;

                i {
                    position: absolute;
                    bottom: 50%;
                    transform: translateY(50%)
                }

                &:hover {
                    background-color: hsl(var(--hue-2), 30%, 20%);
                    border-color: hsl(var(--hue-2), 30%, 40%);
                }

                &#first i {
                    left: 1rem
                }

                &#last {
                    margin-left: auto;

                    i {
                        right: 1rem
                    }
                }
            }
        }
    }
}

#color {
    display: flex;
    flex-direction: column;
    max-width: 15rem;
    background-color: var(--theme-2);
    border-radius: 1rem;
    margin: 2rem 0;
    --hue: 0;
    --alpha: 0;
    --sat: 0;
    --light: 0;

    --grid: 0 0 / 10px 10px repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa),
            5px 5px / 10px 10px repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);

    > div {
        &:first-child {
            flex: 0 0 10rem;
            background-image: linear-gradient(transparent, #000), linear-gradient(90deg, #fff, hsl(var(--hue), 100%, 50%));
            border-top-left-radius: .5rem;
            border-top-right-radius: .5rem;
            position: relative;

            span {
                position: absolute;
                width: .8rem;
                height: .8rem;
                border-radius: 50%;
                border: 2px solid #fff;
                transform: translate(-50%, -50%);
                pointer-events: none
            }
        }

        &:last-child {
            padding: 1rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;

            div {
                display: flex;
                gap: .5rem;

                span {
                    flex: 0 0 1.5rem;
                    display: inline-block;
                    height: 1.5rem;
                    border-radius: 50%;
                    overflow: hidden;
                    background: var(--grid);
                    position: relative;

                    &:after {
                        content: '';
                        position: absolute;
                        inset: 0;
                        background-color: hsl(var(--hue) var(--sat) var(--light) / var(--alpha))
                    }
                }

                input {
                    flex: 1 1 0;
                    padding: 0 .5rem;
                    height: 1.5rem;
                    outline: none;
                    min-width: 0;
                    border: none;
                    background-color: var(--theme-3);
                    border-radius: .5rem;
                    transition: background-color .2s;
                    font: normal .8rem grotesk;

                    &:focus {
                        background-color: var(--theme-4)
                    }
                }
            }
        }
    }

    input[type = range] {
        appearance: none;
        height: .5rem;
        border-radius: 1rem;

        &::-moz-range-thumb, &::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: .8rem;
            height: .8rem;
            border-radius: 50%;
            border: 2px solid #fff
        }
    }

    #alpha {
        background:
            linear-gradient(to right, transparent, #fff),
            var(--grid);

        &::-moz-range-thumb, &::-webkit-slider-thumb {
            background-color: rgb(255 255 255 / var(--alpha))
        }
    }

    #hue {
        background-image: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);

        &::-moz-range-thumb, &::-webkit-slider-thumb {
            background-color: hsl(var(--hue) 100 50)
        }
    }
}

@media screen and (max-width: 60rem) {
    #content > div {
        position: fixed;
        padding-left: 2rem;
        left: -100%;
        height: 100%;
        transition: left .4s cubic-bezier(.5, .5, 0, 1);

        &.open {
            left: 0
        }
    }

    nav i.fa-arrow-right-from-bracket {
        display: flex;
        margin-right: 1rem
    }
}