: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);}