body {  max-width: 100%;  height: 100% }
h1 { margin: 40px auto 30px; font-weight: 700; font-size: 22px; color: #fff; text-align: center; }
.container.outer { display:block; width: 100%;max-width: 700px;margin: 0 auto; padding: 0 15px }
.container.inner { display:block; width: 100%;max-width: 700px;margin: 0 auto 30px; background: #fff; border-radius: 5px; height: auto; min-height: 700px; padding: 12px 10px }
.htu { background: #fff3cd; color: #333; padding: 10px; border-radius: 5px; margin-bottom: 30px; line-height: 150% }
button { margin: 5px; padding: 10px 10px; }
.btn-small { padding: 2px 6px; margin: 5px 2px; }
.btn-small:hover { padding: 2px 6px; margin: 5px 2px; background: #4caf50}
.block { border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; border-radius: 6px; background:#fafafa; }
.block-controls { text-align:right; margin-bottom:15px; }
textarea { width:100%; box-sizing:border-box; }
img.preview { max-width:100%; margin-top:6px; border-radius:4px; }
#cssBox { width:100%; height:80px; }
label{ color: #fff }
.center { text-align: center; }
.center > div { margin: 0 auto; }
button#addText, button#addImage, button#generate{ width: 142px }
button#saveConfig, button#loadConfig{ width: 220px }
@media (max-width: 600px) {button#addText, button#addImage, button#generate, button#saveConfig, button#loadConfig { width: 60%; } }
@media (max-width: 450px) {button#addText, button#addImage, button#generate, button#saveConfig, button#loadConfig { width: 100%; } }
button#addText:hover, button#addImage:hover, button#generate:hover, button#saveConfig:hover, button#loadConfig:hover { background: #4caf50 }
button.delete{ background:#fe1818 }