*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%}.app{width:100%;height:100%;display:flex;flex-direction:column}.question{background-color:#a42c2c;flex-grow:1;display:flex;align-items:center;justify-content:center;padding:1.5rem 1rem}.question .wrapper{display:flex;flex-direction:column;flex-grow:1;position:relative}.question .controls{position:absolute;top:100%;left:50%;transform:translate(-50%,1rem);width:100%;display:flex;flex-direction:column}.question .button{display:none;cursor:pointer;align-self:center;padding:.5rem 1rem;font-family:Roboto Slab,serif;font-size:.875rem;color:#ffe68c;background-color:transparent;border:1px solid #ffe68c;outline:none}.question .button:hover{color:#fff;border:1px solid white}.question .button:active{opacity:.8;border-color:#fff;color:#fff}.question .tip{font-family:Roboto Slab,serif;font-size:.875rem;color:#ffe68c;text-align:center}.question .tip code{color:#a42c2c;background-color:#ffe68c;padding:0 .125rem;border-radius:.125rem}.answer{background-color:#ffe68c;padding:1.5rem 1rem;display:flex;flex-direction:column;align-items:center}.answer .content{font-family:Roboto Slab,serif;font-size:1.5rem;resize:none;text-align:center;color:#ff4545}@media only screen and (max-width: 600px){.app{flex-direction:column-reverse}.question .button{display:block}.question .tip{display:none}}.input{width:100%;padding-left:.5rem;font: 1.5rem Roboto Slab,serif;text-align:center;color:#fff;background-color:transparent;outline:none;border:none;border-left:.375rem solid #ff4545}.input[contentEditable=true]:empty:before{content:attr(placeholder);color:#fff9}