* {
  box-sizing: border-box;
  text-decoration: none;
  appearance: none;
}

header {
  position: fixed;

  background-color: #201E1F;

  width: 22vw;
  height: 100vh;

  top: 0;

  -webkit-box-shadow: 2px 5px 16px 0px rgba(34, 30, 34, 0.4),
    17px 26px 15px 0px rgba(0, 0, 0, 0);
  box-shadow: 2px 5px 16px 0px rgba(34, 30, 34, 0.4),
    17px 26px 15px 0px rgba(0, 0, 0, 0);
}

header b {
  font-weight: bold;
}

header a {
  display: block;
  width: 100%;
}

header .menu-list {
  margin-top: 1rem;
}

.header-main {
  margin: 0.666em;
  border-radius: 3px 0.666em 0.666em 3px;
  font-size: 1.802rem;
  background: #a22430;
  padding: 6px 12px;
  width: 100%;
  color: #f6f4f6;
  -webkit-box-shadow: 2px 5px 16px 0px rgba(34, 30, 34, 0.4),
    17px 26px 15px 0px rgba(0, 0, 0, 0);
  box-shadow: 2px 5px 16px 0px rgba(34, 30, 34, 0.4),
    17px 26px 15px 0px rgba(0, 0, 0, 0);
}

.header-main * {
  color: #f6f4f6;
}

.header-main img {
  height: 1em;
  margin-right: 4px;
}

.menu-link {
  color: #f6f4f6;
}

.menu-link:hover,
.menu-link:focus {
  color: #c8bcc8;
  transition: 500ms ease-in-out;
}

.menu-selected,
.menu-selected > a {
  color: #fff;
  font-weight: bolder;
}

.content-wrapper,
#template-wrapper {
  display: flex;
  flex-direction: column;
  margin-left: 22vw;
  padding: 1.802rem 11vw;
  margin-right: auto;
}
#template-wrapper:first-of-type {
  padding-top: 1rem;
}
#template-wrapper:last-of-type {
  padding-bottom: 1rem;
}
.template-unit {
  padding-top: 1rem;
  border-top: 2px solid #221e2233;
}
.template-unit h3 {
  margin-top: 0 !important;
}
.template-unit:nth-of-type(n + 2) {
  margin-top: 2rem !important;
}
.template-unit ul :last-child {
  margin-bottom: unset;
}
.template-unit ul + p {
  margin-top: 1rem;
}
.template-unit img {
  display: block;
  max-width: 800px;
  max-height: 400px;
  width: auto;
  height: auto;
  margin-top: 5px;
}
.allposts_header + ul :last-child {
  margin-bottom: 1rem;
}
.subtitle {
  margin-bottom: 2rem;
}

.content-wrapper h1,
.content-wrapper h2,
.content-wrapper h3,
.content-wrapper h4,
.content-wrapper h5,
.content-wrapper h6,
.content-wrapper label {
  font-family: "open_sansbold";
  font-weight: bold;
}

pre,
blockquote {
  color: #666666;
  margin: 0;
  padding-left: 3em;
  border-left: 0.5em #eee solid;
}

pre {
  font-family: monospace;
  margin-bottom: 1rem;
  white-space: pre;
  overflow-x: scroll;
}

s:after {
  font-size: 0.66em;
  content: '\2713';
  background: #3f3b3b;
  padding: 0 4px;
  border-radius: 3px;
  margin-left: 4px;
  color: limegreen;
}

footer {
  padding: 1rem;
  background-color: #201E1F;
  color: #e9eaed;
  margin-left: 22vw;
}

footer a {
  font-family: "open_sansbold";
  font-weight: bold;
  color: #e9eaed;
}

@media screen and (max-width: 767px) {
  header {
    box-sizing: border-box;
    position: relative;

    background-color: #201E1F;

    width: 100vw;
    height: max-content;
    padding-bottom: 1rem;
  }
  .header-main {
    margin: 0;
  }
  .content-wrapper,
  #template-wrapper {
    margin-left: 0;
    padding: 1rem 2rem;
  }
  footer {
    margin-left: 0;
  }
}