:root {
    /* prevent scrollbars */
    /* overflow: hidden; */
    /* user-select: none; */
    --small: 0.05em;
    --medium: 1.5em;
}

body {
    font-family: 'open sans', segoe, roboto, calibri, sans-serif;
    background-color: Cornsilk;
    /* background-color: AntiqueWhite; */
    margin: 0;
}

#greet {
    font-size: calc(var(--medium)*1.2);
    font-style: italic;
    margin-left: calc(var(--small)*6);
    margin-bottom: calc(var(--small)*3);
}

#doc-note, #column_headings, #swatches {
    display: grid;
    grid-template-columns: 1fr;
}

#column_headings, .doc-line {
    display: inline-grid;
    grid-template-columns: 5em 5em 5em 5em;
    padding-left: calc(var(--small)*10);
}

doc-cell, .doc-cell {
    font-size: var(--medium);
    outline: calc(var(--small)) dotted lightgrey;
    outline-offset: calc(var(--small)/-2);
}

.grid_off {
    outline: none;
}

#column_headings {
    margin-bottom: calc(var(--medium)/2);
    /* color: darkgrey; */
}

.column_heading {
    text-align: center;
    font-size: var(--medium);
    background: rgba(200,200,200,0.2);
    outline: none;
    border-right: calc(var(--small)) solid darkgrey;
    border-left: calc(var(--small)) solid darkgrey;
}

.selected {
    outline: calc(var(--small)*4) solid white;
    /* outline: calc(var(--small)*3) dashed white; */
    outline-offset: calc(var(--small)*2);
}

#swatches {
    display: inline;
    /* grid-template-columns: 5em 5em 5em 5em; */
    padding-left: calc(var(--small)*10);
    padding-bottom: calc(var(--small)*5);
}

.swatch {
    /* display: inline; */
    /* transform: translateY(calc(var(--small)*5)); */
    margin: calc(var(--small)*7) calc(var(--small)*5) calc(var(--small)*1) 0;
    height: calc(var(--medium)*1.3);
    width: calc(var(--medium)*1.3);
    border: none;
    margin-right: calc(var(--small)*10);
    border-radius: calc(var(--small)*5);
    box-shadow: calc(var(--small)*2) calc(var(--small)*2) calc(var(--small)*3) lightgrey;
    background: rgba(200,200,200,0.2);
    /* padding: calc(var(--small)*0) 0 0 0; */
    /* -webkit-appearance: none; */
}
/* Customize for Chrome */
input[type=color]::-webkit-color-swatch-wrapper {
    padding: 0;
}
input[type=color]::-webkit-color-swatch {
    border: none;
    border-radius: calc(var(--small)*4);
}
/* No way to customize for Firefox? */

#unset {
    display: inline-block;
    margin: 0;
    height: calc(var(--medium)*1);
    width: calc(var(--medium)*1);
}

#file {
    display: none;
}

/* #highlight, #reset, #save, #open */
.button {
    display: inline;
    cursor: pointer;
    margin: calc(var(--small)*2) 0;
    /* margin-bottom: calc(var(--small)*5); */
    padding: calc(var(--small)*1) calc(var(--small)*4);
    font-size: calc(var(--medium)*1);
    /* font-weight: bold; */
    /* border: var(--small) solid lightgrey; */
    border: lightgrey;
    border-radius: calc(var(--small)*4);
    background: rgba(200,200,200,0.2);
    box-shadow: calc(var(--small)/2) calc(var(--small)/2) calc(var(--small)*2) grey;
    transition: all 0.25s ease;
}

.button_off {
    background: rgba(200,200,200,0.4);
    box-shadow: calc(var(--small)/-2) calc(var(--small)/-2) calc(var(--small)*2) grey;
}