html{box-sizing:border-box;font-size:10px;background:#8e24aa;background:linear-gradient(45deg,#42a5f5 0%,#478ed1 50%,#0d47a1 100%)}*,*:before,*:after{box-sizing:inherit}body{margin:0;text-align:center;font-family:Inconsolata,monospace}.display__time-left{font-weight:100;font-size:20rem;margin:0;color:#fff;text-shadow:4px 4px 0 rgba(0,0,0,.05)}.timer{display:flex;min-height:100vh;flex-direction:column}.timer__controls{display:flex}.timer__controls>*{flex:1}.timer__controls form{flex:1;display:flex}.timer__controls input{flex:1;border:0;padding:2rem}.timer__button{background:none;border:0;cursor:pointer;color:#fff;font-size:2rem;text-transform:uppercase;background:rgba(0,0,0,.1);border-bottom:3px solid rgba(0,0,0,.2);border-right:1px solid rgba(0,0,0,.2);padding:1rem;font-family:Inconsolata,monospace}.timer__button:hover,.timer__button:focus{background:rgba(0,0,0,.2);outline:0}.display{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}.display__end-time{font-size:4rem;color:#fff}.reset-container{margin:0 2rem 2rem 0;display:flex;justify-content:right}.reset{width:100px;height:60px;border-radius:5px;background:white;color:#42a5f5;left:100%}.reset:hover,.reset:focus{background:#ffffffe0;outline:0}