*{font-family:Arial,Serif}html{font-size:16px}body{margin:0;padding:0 20px;box-sizing:border-box}div#body{max-width:980px;margin:auto}.grid{display:grid;grid-template:1fr / 1fr 1fr;grid-gap:20px}#echoResults{grid-area:1 / 1 / 1 / 3;text-align:center;font-size:1.3rem}.grid>div{background:#f5f5f5;padding:20px 30px}h1{font-size:1.3rem;text-align:center;margin:30px 0 20px}h2{font-size:1rem;text-align:center;font-weight:400;opacity:.2;margin:0 0 20px}h3{font-size:1rem;text-align:center;opacity:.2}p,input,select{font-size:1rem}p,.fieldset{margin:.4rem 0}label{width:50%;display:inline-block;text-align:right;margin-right:10px}input{width:80px;height:24px;padding:1px 5px;line-height:23px;border:solid 1px #b2b2b2}input:focus{outline:none;box-shadow:none;color:black;border:solid 1px #303030}.green{color:green}.blue{color:blue}.red{color:darkred}.grey{color:grey;font-size:.8em}.btn-settings,.btn-reset{position:absolute;right:20px;top:20px;cursor:pointer;color:#9E9E9E;font-size:1rem}.btn-reset{right:45px;z-index:1}.btn-settings:hover,.btn-reset:hover{color:initial}#settingsContainer{width:320px;height:100%;background:#f5f5f5;position:absolute;top:0;right:0;padding:20px 10px;box-sizing:border-box;font-size:.9rem}#settingsContainer input,#settingsContainer select{font-size:.9rem}span.counter{color:rgba(0,0,0,.2);position:fixed;bottom:0;display:block;box-sizing:border-box;text-align:center;width:100%;left:0;background:white;padding:5px 0}@media (max-width:980px){.grid{display:block}.grid>div{margin:20px 0}span.green,span.red{display:block;margin:5px 0}}@media (max-width:800px){#settingsContainer{width:100%}.btn-reset{z-index:0}}@media (max-width:520px){body{padding-top:30px}}