color.css

/*
    mkcolor - a vim color scheme randomizer/previewer
    Written in 2020 by QuietMisdreavus <victoria@quietmisdreavus.net>

    To the extent possible under law, the author(s) have dedicated all copyright
    and related and neighboring rights to this software to the public domain
    worldwide. This software is distributed without any warranty.

    You should have received a copy of the CC0 Public Domain Dedication along
    with this software. If not, see
    <http://creativecommons.org/publicdomain/zero/1.0/>.
*/

body {
    background-color: #eee;
    font-family: sans-serif;
}

abbr {
    font-variant: none;
    text-decoration-line: underline;
    text-decoration-style: dotted;
}

input.nav-radio {
    display: none;
}

.tab {
    cursor: pointer;
    display: inline-block;
    padding: 10px 20px;
    margin: 0px 2px;
}

#blocks pre {
    display: none;
}

#nav-rust:checked ~ #blocks #block-rust,
#nav-js:checked ~ #blocks #block-js,
#nav-editor:checked ~ #blocks #block-editor,
#nav-ui:checked ~ #blocks #block-ui
{
    display: block;
}

#wrapper {
    max-width: max-content;
    margin: 0 auto;
}

#wrapper > *:not(#settings),
.top-col > *:not(:first-child):not(#blocks),
#form > *:not(:first-child) {
    margin-top: 2rem;
}

#demo {
    flex-grow: 0 !important;
    margin: 0 auto;
}

#colors {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    column-gap: 1rem;
}

#colors > div {
    flex: auto;
}

#settings {
    columns: 24rem;
    margin-top: 1rem;
}

.form-block {
    break-inside: avoid;
    padding-top: 1rem;
}

#palette-box {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    padding-top: 1rem;
    justify-content: center;
}

@media(max-width: 700px) {
    #palette-box {
        justify-content: space-between;
    }
}

#palette-box > div {
    padding: 0 1rem;
}

#about {
    max-width: 50rem;
    margin: 0 auto;
}

.palette .block {
    display: inline-block;
    width: 1rem;
    height: 1rem;
}

#buttons {
    margin: 0 auto;
    max-width: max-content;
}

#blocks {
    padding: 1em;
}

#blocks pre {
    font-family: monospace;
    margin: 0;
    overflow: hidden;
    min-width: 85ch;
}