@import url(https://fonts.googleapis.com/css?family=Roboto);*,::after,::before{-webkit-box-sizing:border-box;box-sizing:border-box}body{background:#333;font-family:Roboto, sans-serif;color:#fff;font-size:16px;text-align:center;margin:0;height:100vh;width:100%;position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column;flex-flow:column}.container{width:95vw;min-height:560px;height:90vh;margin:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column;flex-flow:column}.area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column;flex-flow:column;border:#aaa dashed 1px;min-height:300px;height:40vh;margin:12px}@media (min-width: 1000px){.container{width:60vw}}@media (min-width: 1500px){.container{width:50vw}}p{margin:12px}button{-webkit-box-sizing:content-box;box-sizing:content-box;height:20px}textarea{overflow-y:scroll;resize:none;background:#666;font-size:14px;color:#eee;border:2px solid #bbb;padding-left:10px;min-height:80%;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:80%;margin:0 auto 12px auto}button{background-color:#222;border:1px solid #aaa;color:#fff;padding:15px 32px;font-size:16px}