html, body { background: #fff; color: #333; font: 16px/1.5 Helvetica, Arial, sans-serif; margin: 0; padding: 0; }

.wrap { max-width: 960px; margin: 0 auto; }

.ctr { text-align: center; }

.lft { text-align: left; }

.rgt { text-align: right; }

.input { border: 0; display: block; box-sizing: border-box; padding: 3px 5px; font-family: sans-serif; }

.input--full { width: 100%; }

textarea { min-width: 100%; min-height: 55px; }

button.button { display: block; width: 100%; padding: 5px 10px; font-weight: bold; }

.tippy-tooltip p { margin-top: 0px; margin-bottom: 10px; }

label { font-size: 0.65rem; }

pre { white-space: pre-wrap; font-size: 0.65rem; }

pre.code { position: relative; padding: 15px 7px 10px 7px; background: #fafafa; }

pre.code:before { content: 'Code'; position: absolute; top: 1px; font-size: 0.5rem; text-transform: uppercase; color: #ccc; }

pre.code-html:before { content: 'HTML'; }

pre.code-js:before { content: 'JavaScript'; }

.demo--area { background: #eee; display: flex; min-height: 220px; position: relative; box-sizing: border-box; padding: 5px 10px; }

.demo--area-cont { box-sizing: border-box; flex: 1; align-self: center; }

.demo--area-label { position: absolute; top: 0; right: 4px; text-transform: uppercase; font-size: 0.75rem; font-weight: bold; color: #aaa; }

.grid { display: grid; grid-template-columns: calc(60% - 5px) calc(40% - 5px); grid-column-gap: 10px; }

.grid .grid--col { box-sizing: border-box; padding: 20px; }

#footer { background: #eaeaea; }

#footer .grid { display: grid; grid-template-columns: calc(50% - 5px) calc(50% - 5px); grid-column-gap: 10px; }

@media screen and (max-width: 960px) { .wrap { padding-right: 7px; padding-left: 7px; } }

@media screen and (max-width: 640px) { .iblock-if-mobile { display: inline-block; }
  .grid { display: grid; grid-template-columns: 100%; grid-column-gap: 0; grid-row-gap: 10px; }
  .grid .grid--col { padding: 0; } }
