:root {
  --font-size: 18px;
  --line-height: 1.8em;
  --font-size-h1: 1.6em;
  --font-size-h1-large: 3.2em;
  --font-size-h2: 1.6em;
  --font-color: #333;
  --logo-width: 250px;
  --content-bg-color: #fefefe;
  --content-x-padding: 1.6em;
  --content-x-padding-wide: 12em;
  --content-y-padding: 0.8em;
  --content-bottom-padding: 3.2em;
  --border-radius: 0.25em;
  --border-radius-large: 0.5em;
  --header-bg-color-1: #111;
  --header-bg-color-2: #222;
  --body-bg-color-1: #d8e3ea;
  --body-bg-color-2: #d7e2e9;
  --body-bottom-padding: 8em;
  --common-width: 1400px;
  --common-space: 3em;
  --main-grid-columns: 3;
  --article-bg-color: #fefefe;
  --article-header-height: 10em;
  --button-padding-y: 0.5em;
  --button-padding-x: 4em;
  --button-radius: 0.25em;
  --input-padding: 0.5em;

  --color-0: #03a9f4;
  --color-1: #c603f4;
  --color-2: #f44e03;
  --color-3: #30f403;
  --color-4: #0349f4;
  --color-5: #f403c2;
  --color-6: #f4ae03;
  --color-7: #61d347;
}

@media (max-width: 1400px) {
  :root {
    --common-width: 1000px;
    --main-grid-columns: 2;
    --content-x-padding-wide: 4em;
  }
}

@media (max-width: 1000px) {
  :root {
    --common-width: 100%;
    --main-grid-columns: 1;
    --content-x-padding-wide: 1.6em;
    --content-x-padding: 1.6em;
  }
}

@media (max-width: 800px) {
  :root {
    --logo-width: 90px;
    --common-space: 2em;
    --font-size-h1-large: 1.6em;
    --content-x-padding-wide: 0.8em;
    --content-x-padding: 0.8em;
    --border-radius: 0;
  }
  
  header > a > img {
    position: absolute;
    top: 5px;
    right: -15px;
  }
  main-wrapper main {
    padding-right: 0;
    padding-left: 0;
  }
}