:root {
  --max-width: 1200px;
}

body {
  margin: 0;
  font: 14px / 1.5 "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #727272;
  font-weight: 400;
  background-color: #fff;
}

#wrapper {
  display: flex;
  height: 100vh;
  justify-content: center;
  overflow: hidden;
}

#sidebar {
  overflow: auto;
  flex: 1;
  padding: 20px;
  padding-top: 50px;
  background-color: rgb(246, 246, 246);
}

#main {
  overflow: auto;
  padding: 20px;
  flex: 3;
  padding-top: 50px;
}

#main img {
  width: 500px;
  max-width: 100%;
  height: auto;
  display: block;
}

@font-face {
  font-family: "Noto Sans";
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/Noto-Sans-regular/Noto-Sans-regular.eot");
  src: url("../fonts/Noto-Sans-regular/Noto-Sans-regular.eot?#iefix")
      format("embedded-opentype"),
    local("Noto Sans"), local("Noto-Sans-regular"),
    url("../fonts/Noto-Sans-regular/Noto-Sans-regular.woff2") format("woff2"),
    url("../fonts/Noto-Sans-regular/Noto-Sans-regular.woff") format("woff"),
    url("../fonts/Noto-Sans-regular/Noto-Sans-regular.ttf") format("truetype"),
    url("../fonts/Noto-Sans-regular/Noto-Sans-regular.svg#NotoSans")
      format("svg");
}
@font-face {
  font-family: "Noto Sans";
  font-weight: 700;
  font-style: normal;
  src: url("../fonts/Noto-Sans-700/Noto-Sans-700.eot");
  src: url("../fonts/Noto-Sans-700/Noto-Sans-700.eot?#iefix")
      format("embedded-opentype"),
    local("Noto Sans Bold"), local("Noto-Sans-700"),
    url("../fonts/Noto-Sans-700/Noto-Sans-700.woff2") format("woff2"),
    url("../fonts/Noto-Sans-700/Noto-Sans-700.woff") format("woff"),
    url("../fonts/Noto-Sans-700/Noto-Sans-700.ttf") format("truetype"),
    url("../fonts/Noto-Sans-700/Noto-Sans-700.svg#NotoSans") format("svg");
}
@font-face {
  font-family: "Noto Sans";
  font-weight: 400;
  font-style: italic;
  src: url("../fonts/Noto-Sans-italic/Noto-Sans-italic.eot");
  src: url("../fonts/Noto-Sans-italic/Noto-Sans-italic.eot?#iefix")
      format("embedded-opentype"),
    local("Noto Sans Italic"), local("Noto-Sans-italic"),
    url("../fonts/Noto-Sans-italic/Noto-Sans-italic.woff2") format("woff2"),
    url("../fonts/Noto-Sans-italic/Noto-Sans-italic.woff") format("woff"),
    url("../fonts/Noto-Sans-italic/Noto-Sans-italic.ttf") format("truetype"),
    url("../fonts/Noto-Sans-italic/Noto-Sans-italic.svg#NotoSans") format("svg");
}
@font-face {
  font-family: "Noto Sans";
  font-weight: 700;
  font-style: italic;
  src: url("../fonts/Noto-Sans-700italic/Noto-Sans-700italic.eot");
  src: url("../fonts/Noto-Sans-700italic/Noto-Sans-700italic.eot?#iefix")
      format("embedded-opentype"),
    local("Noto Sans Bold Italic"), local("Noto-Sans-700italic"),
    url("../fonts/Noto-Sans-700italic/Noto-Sans-700italic.woff2")
      format("woff2"),
    url("../fonts/Noto-Sans-700italic/Noto-Sans-700italic.woff") format("woff"),
    url("../fonts/Noto-Sans-700italic/Noto-Sans-700italic.ttf")
      format("truetype"),
    url("../fonts/Noto-Sans-700italic/Noto-Sans-700italic.svg#NotoSans")
      format("svg");
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #222;
  margin: 0 0 20px;
}

p,
ul,
ol,
table,
pre,
dl {
  margin: 0 0 20px;
}

h1,
h2,
h3 {
  line-height: 1.1;
}

h1 {
  font-size: 28px;
}

h2 {
  color: #393939;
}

h3,
h4,
h5,
h6 {
  color: #494949;
}

a {
  color: #267cb9;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #069;
  font-weight: bold;
}

a small {
  font-size: 11px;
  color: #777;
  margin-top: -0.3em;
  display: block;
}

a:hover small {
  color: #777;
}

blockquote {
  border-left: 1px solid #e5e5e5;
  margin: 0;
  padding: 0 0 0 20px;
  font-style: italic;
}

code,
pre {
  font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal,
    Consolas, Liberation Mono, DejaVu Sans Mono, Courier New, monospace;
  color: #333;
}

pre {
  padding: 8px 15px;
  background: #f8f8f8;
  border-radius: 5px;
  border: 1px solid #e5e5e5;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  text-align: left;
  padding: 5px 10px;
  border-bottom: 1px solid #e5e5e5;
}

dt {
  color: #444;
  font-weight: 700;
}

th {
  color: #444;
}

img {
  max-width: 100%;
}

kbd {
  background-color: #fafbfc;
  border: 1px solid #c6cbd1;
  border-bottom-color: #959da5;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 #959da5;
  color: #444d56;
  display: inline-block;
  font-size: 11px;
  line-height: 10px;
  padding: 3px 5px;
  vertical-align: middle;
}

header {
  width: 270px;
  float: left;
  position: fixed;
  -webkit-font-smoothing: subpixel-antialiased;
}

strong {
  color: #222;
  font-weight: 700;
}

section {
  padding-bottom: 50px;
}

small {
  font-size: 11px;
}

hr {
  border: 0;
  background: #e5e5e5;
  height: 1px;
  margin: 0 0 20px;
}

footer {
  width: 270px;
  float: left;
  position: fixed;
  bottom: 50px;
  -webkit-font-smoothing: subpixel-antialiased;
}


@media only screen and (min-width: 1200px) {
  #wrapper {
    margin-left: calc(50% - var(--max-width) / 2);
  }

  #main {
    padding-right: calc(50vw - var(--max-width) / 2);
  }
}


@media only screen and (max-device-width: 880px), (max-width: 800px) {
  body {
    font-size: 1.5em;
  }
  
  #wrapper {
    display: initial;
    overflow: initial;
  }

  #main {
    padding-top: 20px;
    padding: 60px;
  }

  #sidebar {
    padding-top: 20px;
    padding: 60px;
  }

  #main img {
    width: 100%;
  }

  #main h1, h2, h3, h4, h5, h6 {
    text-align: center;
  }

  #main table {
    font-size: 1.5em;
  }
}