*{box-sizing:border-box}:root{--color: #536dfe}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;border:2px solid #000;background:#fff;padding:10px;font-size:16px;font-weight:700;box-shadow:.1em .1em #000}button:active{transform:translate(.1em,.1em);box-shadow:none}button:hover{color:var(--color)}button.adder,button.deleter{height:25px;width:25px;padding:0;position:relative;display:block}button.adder{margin:-5px 30px 1em auto}button.deleter{position:absolute;right:-12px;top:50%;transform:translateY(-50%)}button.deleter:active{transform:translateY(-50%) translate(.1em,.1em);box-shadow:none}html,body,#app,input{min-height:100%;font-family:Rubik,sans-serif}body{padding:4vw;font-size:18px;background-image:linear-gradient(43deg,#4158d0,#c850c0 46%,#ffcc70);background-size:cover}.g{display:flex;justify-content:space-between;align-items:center}.form-row{position:relative;padding:1em 2em;display:flex;align-items:center;justify-content:center;max-width:100%;flex-direction:column;background:#fff;border:.15em solid #000;border-radius:4px;box-shadow:.2em .2em #000}@media (min-width: 700px){.form-row{flex-direction:row}}.form-row+.form-row{margin-top:1em}input:not([type=checkbox]){width:5em;padding:.8em .7em;font-family:Rubik,sans-serif;border-radius:0;border:.15em solid #000;box-shadow:.2em .2em #000;margin:.3em .6em .6em .3em;text-align:center;background:#fff;overflow:visible;flex:1;width:100%;max-width:200px}input:not([type=checkbox]):focus{box-shadow:.3em .3em 0 0 var(--color);outline:none;border-color:var(--color)}input:not([type=checkbox])[readonly]{--color: #66bb6a}@media (min-width: 700px){input:not([type=checkbox])[readonly]{margin-left:3em}}