:root {
  --font-family: Roboto,Arial,sans-serif;
  --font-size: 18px;
  --font-color: #444;
  --high-color: #44F;
  --page-color: #CCC;
  --page-width: 835px;
  --block-padding: 40px;
  --block-margin: 40px;
  --text-margin: 0.5em 0 0 0;
  --panel-width: calc((var(--page-width) - var(--block-margin)) / 2 - var(--block-margin));
  --panel-color: #F2F2FC;
  --header-color: transparent;
  --section-color: #FFF;
  --footer-color: #EEE;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; padding: 0; margin: 0; }
html { background: var(--page-color); color: var(--font-color); }
body { font-family: var(--font-family); font-size: var(--font-size); line-height: 1.5; }

header, section, footer { min-width: calc(var(--page-width) / 2); max-width: var(--page-width); margin: 0 auto; }
h1, h2 { text-wrap: nowrap; margin: 0; }
h1 { font-size: 2em; font-weight: bold; }
h2 { font-size: 1.25em; }
p { margin: var(--text-margin); }
a { text-decoration: none; color: inherit; }
a[href]:hover { background-color: #DDD; }
img { height: auto; border: 0; }
table { border-spacing: 0; }
th, td { padding: 0.1em 0; }
th { font-weight: normal; text-align: left; }
td { padding-left: 0.5em; }