main {
    padding: 2em;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1em;
}

.group {
    border: 1px solid var(--color);
    background-color: var(--color-bg1);
}

.group>div {
    display: flex;
    flex-direction: row;
    gap: 0.5em;
    padding: 0.5em;
    width: fit-content;
}

.light {
    border: 1px solid var(--color);
    background-color: var(--color-bg2);
    width: 12em;
    height: 15em;
    display: flex;
    flex-direction: column;
}

.light .view {
    display: flex;
    flex-direction: row;

    .view-symb {
        flex-grow: 1;
        font-size: 8em;
        text-align: center;
    }
}

input[type=range][orient=vertical] {
    writing-mode: vertical-lr;
    direction: rtl;
    appearance: slider-vertical;
    width: 0.5em;
    height: 11em;
    vertical-align: bottom;
}

h3 {
    text-wrap: nowrap;
    overflow-x: hidden;
}

.colormode {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    margin: 1px;
    gap: 1px;

    >output {
        flex-basis: 2em;
        text-align: center;
        align-content: center;
        font-weight: bold;
    }

    >input {
        flex-grow: 1;
        text-align: center;
    }

    >input[type=color] {
        height: 100%;
    }
}