main.css

:root{
    --color-0: #345;
    --color-h1: #789;
    --color-h2: #579;
    --color-links: #349;

    --bg-0: #ddd;
    --bg-main: #fff;
    --bg-footer: #ccd;
}


a{color: var(--color-links);}
body{
    font-size: 1em;
    margin: 1em;
    color: var(--color-0);
    background: var(--bg-0);
    font-family: verdana,arial;
}

button{ border: 1px solid  rgba(0,0,0,0.1); background: linear-gradient(#f8f8f8, #ddd); border-radius: 0.3em; margin: 0 0.5em 0; padding: 0.5em;}
button:hover{ background: linear-gradient(#eee, #ccc);}
button:active{ border:1px solid #fc2;}
input{ border:1px solid #ccc; padding: 0.4em;}

footer{ position: fixed; bottom: 0; left: 0; width: 100%; padding: 1em; background: var(--bg-footer); border-top: 2px solid rgba(255,255,255,0.5); text-align: center;}
h1{color: var(--color-h1); border-bottom: 1px solid; background: linear-gradient(#fff, #f0f4f8); margin-top: 0;}
h2{color: var(--color-h2); margin-left: 0em;}

h1>span, h2>span{font-size: 130%;}
section{
    margin: 0 0 1em ;
    padding: 1em 2em;
    border-top: 0px dashed #e0e4f0;
    background: linear-gradient(10deg, #fff, #f0f4f8, #fff);
    border-radius: 1em;
}

section input[type=checkbox]{ display: none; }
section input[type=checkbox] + label { 
    border: 1px solid  rgba(0,0,0,0.05); background: #f8f8f8; border-radius: 0.3em; margin: 0 0.5em 0.5em 0; padding: 0.5em;
    opacity: 0.6;
    transition: all 0.3s;
}
section input[type=checkbox]:checked + label {
    background: #fff; 
    box-shadow: 0.1em 0.1em 0.2em #ddd inset;
    border-color: #cde;
    opacity: 1;
}
section input[type=checkbox]+ label:hover {
    border-color: #89a;
}
select{
    background: #fff;
    border: 2px solid #f8f8f8;
    color: var(--color-0);
    font-size: 110%; 
}
select:hover{
    background: #fec;
}
td{vertical-align: top;}

#main{
    background: var(--bg-main);
    border: 3px solid #bbb;
    border-radius: 1em;
    box-shadow: 0 0 3em rgba(0,0,0,0.2);
    margin: 1em auto 6em;
    padding: 1em;
    min-height: 35em;
    max-width: 80em;
}

.app{
    margin: 1em 0;
    border: 0px solid rgba(0,0,0,0.2);
    border-radius: 0.3em;
    padding: 1em; 
}

.float-right{float: right;}

.app .title{font-weight: bold; font-size: 130%; cursor: pointer;}

.app .url{font-size: 80%; font-weight: normal; margin-right: 2em;}

.result0{background:#dfd    !important; background: linear-gradient(#ded,#beb)!important;       color:#383}
.result1{background:#eee    !important; background: linear-gradient(#ede,#dbd)!important;       color:#666;}
.result2{background:#fff8d0 !important; background: linear-gradient(#fff0d0,#ffe0a0)!important; color:#870;}
.result3{background:#fcd    !important; background: linear-gradient(#fcd,#faa)!important;       color:#800;}

table.checks{border: 2px solid rgba(0,0,0,0.1);}