body
{
    width: 100%;
}

main
{
    text-align: center;
}

h1
{
    width: 60%;
    margin: auto;
}

h3
{
    width: 100%;
    border-style: none;
    margin: 0.2em auto;

    font-size: small;
}

summary h2
{
    border-style: none;
    display: inline-block;
    margin: 0.5em auto;
}

.colorGroup
{
    box-sizing: border-box;
    width: 40%;
    min-width: 25em;
    margin: 1em auto;
    text-align: center;
    vertical-align: top;

    background-color: whitesmoke;

    display: inline-block;
}

.colorPickerGroup
{
    box-sizing: border-box;
    width: 10%;
    min-width: 5em;

    margin: auto 1em;
    padding: 2em auto;
    display: inline-block;

    text-align: center;
    vertical-align: top;
}

.colorPicker
{
    box-sizing: border-box;
    width: 10%;
    min-width: 5em;

    margin: auto auto;
    padding: 2em auto;
    display: inline-block;

    text-align: center;
    vertical-align: top;
}

.picker
{
    margin: 2em auto auto auto;
    padding: auto 5em;
    height: 3em;
    display: block;
}

.colorParamGroup 
{
    box-sizing: border-box;
    width: 30%;

    padding: 0.2em;

    border-width: 2px;
    border-style: double;
    border-color: gray;

    display: inline-block;
}

.brightnessGroup 
{
    box-sizing: border-box;
    width: auto;
   
    margin: auto;
    padding: 0.5em;

    border-style: none;

    display: block;
}

.colorParamItem
{
    padding: 0.1em;
    display: block;
}

.brightnessItem
{
    padding: 0.1em;
    display: block;
}

input
{
    text-align: right;
}

.colorParamGroup input, .brightnessGroup input, .previewGroup input
{
    margin-left: 0.5em;
    margin-right: 0.5em;
}

.previewGroup
{
    text-align: center;
}

.preview
{
    width: 50%;
    min-width: 5em;
    margin: auto;
    padding: 2em;
    background-color: revert;
}

.preview p
{
    padding: 2em;

    border-width: 1em;
    border-style: solid;
    color: revert;
}