E-42/main.css

@import "../fonts/PT-Sans/stylesheet.css";

BODY,DIV,DL,DT,DD,H1,H2,H3,H4,H5,H6,PRE,FORM,FIELDSET,INPUT,TEXTAREA,P,BLOCKQUOTE,TH,TD {
  padding: 0;
  margin: 0;
}

BODY {
  background: #FFFFFC;
  color: #242F40;
  margin-left: 11vw;
  margin-right: 22vw;
  margin-top: 1vh;
  font-family: 'PT Sans', sans-serif;
  font-weight: 400;
  line-height: 1.75;
  font-size: max(16px, 1em); /*1.25em;*/
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: #FFF 0px 1px 1px;
  word-wrap: break-word;
}

P {
  margin-bottom: 1rem;
}

A {
  color: #394A6A;
  cursor: pointer;
  text-decoration: 1px #394A6A underline;
}

ASIDE {
  background: #F2F4F8;
  border-left: 2px solid #AFBCD4;
  float: right;
  font-style: italic;
  height: max-content;
  width: 33%;
  margin: .8rem;
  padding: .8rem 1.25rem;
}

CAPTION {
  text-align: left;
}

DD {
  margin: 0 0 0 160px;
}

DT {
  clear: left;
  float: left;
  font-weight: 700;
  text-align: right;
}

DT::after {
  content: ": ";
}

EM,
CITE,
cite {
  font-style: italic;
}

FIELDSET,
IMG {
  border: 0;
  max-height: 32em;
  max-width: 100%;
}

H1,
H2,
H3,
H4,
H5,
H6 {
  margin: 1.25rem 0 .8rem;
  font-family: 'PT Sans', sans-serif;
  font-weight: 400;
  line-height: 1.3;
}

H0 {
  font-size: 4.209rem;
}

H1 {
  font-size: 3.157rem;
  margin-top: 0;
}

H2 {
  font-size: 2.369rem;
}

H3 {
  font-size: 1.777rem;
}

H4 {
  font-size: 1.333rem;
  font-weight: 700;
}

H5 {
  font-size: 1.25rem;
  font-weight: 700;
}

H6 {
  font-size: 1em;
  font-weight: 700;
}

HEADER {
  display: grid;
  margin-bottom: 1.618rem;
}

HEADER H1,
pre.sourceCode {
  margin: 0;
}

HEADER NAV UL,
MAIN {
  display: block;
}

HEADER NAV UL>LI {
  display: inline;
  margin-right: .8rem;
}

Q:BEFORE,
Q:AFTER {
  content: '';
}

SMALL {
  font-size: .75rem;
}

TABLE {
  border-collapse: collapse;
  border-spacing: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

TABLE TD,
TABLE TH {
  border: 1px solid #DDD;
  line-height: 1.2;
  min-width: 10px;
  padding: 6px 8px;
}

TABLE THEAD {
  background: #f8f8f8;
  font-weight: 700;
}

TH {
  text-align: center;
}

TR:nth-child(even) {
  background: #f5f5f5;
}

#header-content {
  margin: auto;
}

.img-thumbnail {
    padding: 0.25rem;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 0.25rem;
    width: 100%;
    height: auto;
    display: block;
}

.avatar {
    padding: 0.25rem;
    height: max-content;
    width: 15em;
    margin: auto;
}

.article-icon {
	height: max-content;
	margin: 0.8rem;
	padding: 0.8rem 1.25rem;
	flex: 10%;
	max-width: 10%;
	align-self: center;
}

.article-header {
	display: flex;
	flex-flow: row-reverse wrap;
	justify-content: space-around;
	padding: 0;
	margin: 0;
}

.article-header>h3{
	flex: 25%;
	padding: 0 4px;
	align-self: center;
}

abbr,
acronym {
  border: 0;
}

blockquote {
  background: #f9f9f9;
  border-left: 4px solid #888;
  margin-left: 0;
  padding: 0 1em;
}

code span.al,
code span.er {
  color: red;
  font-weight: 700;
}

code span.an,
code span.cv,
code span.in,
code span.wa {
  color: #60a0b0;
  font-style: italic;
  font-weight: 700;
}

code span.at {
  color: #7d9029;
}

code span.bn,
code span.dv,
code span.fl {
  color: #40a070;
}

code span.cf,
code span.kw {
  color: #007020;
  font-weight: 700;
}

code span.ch,
code span.sc,
code span.st,
code span.vs {
  color: #4070a0;
}

code span.cn {
  color: #800;
}

code span.co {
  color: #60a0b0;
  font-style: italic;
}

code span.do {
  color: #ba2121;
  font-style: italic;
}

code span.dt {
  color: #902000;
}

code span.fu {
  color: #06287e;
}

code span.op {
  color: #666;
}

code span.ot {
  color: #007020;
}

code span.pp {
  color: #bc7a00;
}

code span.ss {
  color: #b68;
}

code span.va {
  color: #19177c;
}

code,
pre {
  border: 1px solid;
  white-space: pre-wrap;
}

code.sourceCode>span {
  color: inherit;
  text-decoration: inherit;
}

div.column {
  display: inline-block;
  vertical-align: top;
  width: 50%;
}

div.hanging-indent {
  margin-left: 1.5em;
  text-indent: -1.5em;
}

div.sourceCode {
  margin: 1em 0;
}

pre {
  background: #f6f8fa;
  line-height: 1.642;
  overflow: auto;
  padding: .5em;
}

pre>code.sourceCode {
  position: relative;
  white-space: pre;
}

pre>code.sourceCode>span {
  display: inline-block;
  line-height: 1.25;
}

pre>code.sourceCode>span:empty {
  height: 1.2em;
}

pre code {
  border: none;
}

pre.numberSource {
  border-left: 1px solid #aaa;
  margin-left: 3em;
  padding-left: 4px;
}

pre.numberSource code {
  counter-reset: source-line 0;
}

pre.numberSource code>span {
  counter-increment: source-line;
  left: -4em;
  position: relative;
}

pre.numberSource code>span>a:first-child::before {
  border: none;
  color: #aaa;
  content: counter(source-line);
  display: inline-block;
  left: -1em;
  position: relative;
  text-align: right;
  vertical-align: baseline;
  width: 4em;
  padding: 0 4px;
}

q {
  display: block;
  font-style: italic;
  font-weight: 600;
}

span.smallcaps {
  font-variant: small-caps;
}

span.underline {
  text-decoration: underline;
}

ul.task-list {
  list-style: none;
}

@media screen {
  div.sourceCode {
    overflow: auto;
  }

  pre>code.sourceCode>span>a:first-child::before {
    text-decoration: underline;
  }
}

@page {
  margin: 2cm;
}

@media print {
  html, body {
    width: 210mm;
    height: 297mm;
    font: 12pt "Helvetica", serif;
  }

  body {
    font: 13pt Georgia, "Times New Roman", Times, serif;
    line-height: 1.3;
    background: #fff !important;
    color: #000;
  }

  h1 {
   font-size: 24pt;
  }

  h2, h3, h4 {
   font-size: 14pt;
   margin-top: 25px;
  }

  a {
      page-break-inside:avoid;
  }
  blockquote {
      page-break-inside: avoid;
  }
  h1, h2, h3, h4, h5, h6 {
    page-break-after:avoid;
    page-break-inside:avoid;
    font-weight: 700;
  }
  img {
    page-break-inside:avoid;
    page-break-after:avoid;
  }
  table, pre { page-break-inside:avoid; }
  ul, ol, dl  { page-break-before:avoid; }

  a:link, a:visited, a {
    background: transparent;
    color: #520;
    font-weight: bold;
    text-decoration: underline;
    text-align: left;
  }

  pre>code.sourceCode {
    white-space: pre-wrap;
  }

  pre>code.sourceCode>span {
    padding-left: 5em;
    text-indent: -5em;
  }

  .article-icon {
    min-width: initial !important;
    max-width: 100px !important;
    max-height: 100px !important;
  }
}

@media (max-width: 700px) {
  .article-icon {
    min-width: 100%;
  }
}

@media (max-width: 480px) {
  blockquote,
  body,
  caption,
  dd,
  dl,
  fieldset,
  figure,
  form,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  hr,
  legend,
  ol,
  p,
  pre,
  ul,
  table,
  td,
  th {
    margin: 0;
    padding: 0;
  }

  blockquote,
  caption,
  code,
  dd,
  dl,
  fieldset,
  figure,
  form,
  hr,
  legend,
  ol,
  p,
  pre,
  q,
  table,
  td,
  th,
  ul {
    margin-bottom: 1.143rem;
  }

  body {
    line-height: 1.714;
    min-height: 100vh;
    margin-left: 1.5vw;
    margin-right: 2.5vw;
    overflow-x: hidden;
    position: relative;
  }

  embed+[class*='caption'],
  figcaption,
  img+[class*='caption'],
  object+[class*='caption'],
  video+[class*='caption'] {
    display: table;
    font-size: .857rem;
    line-height: 1.667;
    margin-bottom: 1rem;
  }

  embed,
  img,
  object,
  video {
    max-width: 100%;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: 1.417;
    margin: 1em 0;
  }

  hr {
    height: 1px 0 0 0;
    width: 75%;
    border-style: solid;
  }

  html {
    font-size: 14px;
    overflow-x: hidden;
  }

  img {
    display: block;
    height: auto;
    margin: .6rem auto .4rem;
  }

  ol,
  ul {
    margin-left: 1.296rem;
  }

  sub {
    bottom: -.25em;
  }

  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sup {
    top: -.5em;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
    display: block;
  }

  td,
  th {
    padding: .5rem;
  }
}

.logbook-note {
  background-color: #392F5A;
  color: #EAEBEB;
  text-align: center;
  font-weight: bolder;
  text-shadow: none;
}

.logbook-note>a {
  color: #FFBA08;
}