.spritz{color:#ddd;position:relative;width:30rem;padding:1rem 0 1.2rem;border-top:2px solid #ddd;border-bottom:2px solid #ddd;margin:10rem auto}.spritz:before,.spritz:after{content:"";position:absolute;left:40%;height:.8rem;width:2px;margin-left:-1px;background-color:#ddd}.spritz:before{top:0}.spritz:after{bottom:0}.spritz-word{font-size:2.4rem;line-height:3.2rem;height:3.2rem;font-weight:600}.spritz-word div{color:#ddd;display:table-cell}.spritz-word div:first-child{width:40%;text-align:right}.spritz-word div:nth-child(2){color:red}.spritz-word div:last-child{width:60%;text-align:left}.settings{margin:0 auto;max-width:30rem}.settings input,.settings textarea,.settings button{color:#ddd;box-sizing:border-box;border:0;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ0NDQ0NCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==);background:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#333333),color-stop(100%,#444444));background:-moz-linear-gradient(top,#333333,#444444);background:-webkit-linear-gradient(top,#333333,#444444);background:linear-gradient(to bottom,#333,#444);padding:1rem 1.5rem}.settings input:focus,.settings textarea:focus,.settings button:focus{outline:none}.settings .speed{position:relative;display:block;height:4rem;width:18rem;margin:2rem auto;font-weight:600}.settings .speed::-webkit-inner-spin-button{-webkit-appearance:none;opacity:1!important;cursor:pointer;display:block;position:relative;height:100%;width:4rem;font-size:1rem}.settings .speed::-webkit-inner-spin-button:before,.settings .speed::-webkit-inner-spin-button:after{position:absolute;display:inline-block;padding:0 1rem;height:2rem;width:100%;text-align:center;line-height:2rem;font-weight:400;text-transform:uppercase;right:0}.settings .speed::-webkit-inner-spin-button:before{content:"faster";background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ0NDQ0NCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==);background:-webkit-gradient(linear,50% 100%,50% 0%,color-stop(0%,#333333),color-stop(100%,#444444));background:-moz-linear-gradient(bottom,#333333,#444444);background:-webkit-linear-gradient(bottom,#333333,#444444);background:linear-gradient(to top,#333,#444)}.settings .speed::-webkit-inner-spin-button:after{top:2rem;content:"slower"}.settings .demo-text-change{margin:1rem auto;display:block;cursor:pointer}.settings .demo-text-change:active{padding:1.1rem 1.5rem .9rem;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ0NDQ0NCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==);background:-webkit-gradient(linear,50% 100%,50% 0%,color-stop(0%,#333333),color-stop(100%,#444444));background:-moz-linear-gradient(bottom,#333333,#444444);background:-webkit-linear-gradient(bottom,#333333,#444444);background:linear-gradient(to top,#333,#444)}.settings .demo-text{width:100%;height:5em;margin:5rem 0 0}html{font-size:10px}body{background:#222}body,input,textarea,button{font-size:1.4rem;font-family:Open Sans,sans-serif}
