:root {
  --font-family: Roboto,Arial,sans-serif;
  --font-size: 18px;
  --font-color: #444;
  --high-color: #44F;
  --page-color: #FFF;
  --page-width: 960px;
  --block-padding: 30px;
  --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: #ECECEC;
  --footer-color: #ECECEC;
}

* { 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); padding: 0 var(--block-margin);margin: 0 auto; }
h1, h2 { text-wrap: nowrap; margin: 0; }
h1 { font-size: 2em; font-weight: bold; }
h2 { font-size: 1.5em; }
ol, ul { margin: var(--text-margin); }
ol { list-style-type: none; padding: 0; }
ul { list-style-type: circle; padding-inline-start: 1em; }
p { margin: var(--text-margin); }
a { text-decoration: none; color: inherit; }
a[href]:hover { background-color: #DDD; }