:root {
    /*color setting*/
    --main_tone: 80;
    --glow_tone: 200;
    --accent_tone: 20;
    --lb: 95%;
    --lmb: 90%;
    --lm: 85%;
    --lmf: 75%;
    --lf: 60%;
    --slt: 5%;
    --sat: 25%;

    /*color calculation*/
    --color_back: hsl(var(--main_tone), var(--sat), var(--lb));
    --color_midback: hsl(var(--main_tone), var(--sat), var(--lmb));
    --color_mid: hsl(var(--main_tone), var(--sat), var(--lm));
    --color_midfront: hsl(var(--main_tone), var(--sat), var(--lmf));
    --color_front: hsl(var(--main_tone), var(--sat), var(--lf));

    --color_accent: hsl(var(--accent_tone), 50%, 50%);
    --color_text: hsl(var(--glow_tone), var(--slt), var(--slt));
    --color_glow: hsl(var(--glow_tone), 90%, 60%);
    --color_gloomy: hsla(var(--glow_tone), 90%, 60%, 75%);
}

/*
RESET
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ol,
ul {
    list-style-type: none;
}

/*
LAYOUT
*/

h1 {
    font-size: 2em;
    margin: 1em;
}

h2,
h3,
h4,
h5,
h6,
p {
    font-size: 1em;
    margin: 1em;
}

a {
    text-decoration: none;
    color: var(--color_text);
}

/*
COLOR PREVIEW
*/

body {
    background-color: var(--color_back);
    color: var(--color_text);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.hidden {
    display: hidden !important;
}

fieldset {
    width: 20rem;
    gap: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 1rem;
    padding: 1rem;
}

legend {
    font-weight: bold;
}

[type="checkbox"],
[type="number"],
input {
    background-color: var(--color_back);
    box-shadow: none;
    border: 2px solid var(--color_text);
    color: var(--color_text);
}

input:focus {
    outline: none;
    box-shadow: 0 0 0 1px var(--color_front);
}

#palette {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
}

#palette div {
    height: 210px;
    width: 210px;
    margin: 1rem;
}

button {
    padding: 0.5rem;
}

#palette>div:nth-child(1) {
    background-color: var(--color_back);
}

#palette>div:nth-child(2) {
    background-color: var(--color_midback);
}

#palette>div:nth-child(3) {
    background-color: var(--color_mid);
}

#palette>div:nth-child(4) {
    background-color: var(--color_midfront);
}

#palette>div:nth-child(5) {
    background-color: var(--color_front);
}

#palette>div:nth-child(6) {
    background-color: var(--color_back);
    border: 5px solid var(--color_front);
    color: var(--color_front);
}

#palette>div:nth-child(7) {
    background-color: var(--color_accent);
}

#palette>div:nth-child(8) {
    background-color: var(--color_back);
    border: 5px solid var(--color_accent);
    color: var(--color_accent);
}

#palette>div:nth-child(9) {
    background-color: var(--color_glow);
    box-shadow: 0 0 15px 5px var(--color_gloomy);
}

#palette>div:nth-child(10) {
    background-color: var(--color_back);
    border: 5px solid var(--color_glow);
    color: var(--color_glow);
}

#palette>div:nth-child(11) {
    background-color: var(--color_text);
    color: var(--color_back);
}