@import url('https://fonts.googleapis.com/css?family=Lato:700%7CMontserrat:300&subset=latin&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat:500&text=%E2%86%92&display=swap');

html, body {
  position: absolute;

  height: 100%;
  width: 100%;

  margin: 0;
  padding: 0;

  background: #222228;
  color: #E8E8EA;

  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.3;
}

h1, h2, h3 {
  margin: 1em 0 0.5em;

  font-family: 'Lato', sans-serif;
  font-weight: 700;
}

h1:first-child, h2:first-child, h3:first-child, p:first-child {
  margin-top: 0;
}

h1 {
  font-size: 200%;
}

h2 {
  font-size: 150%;
}

h3 {
  font-size: 100%;
}

:link, :visited {
  color: #EAA;
}

ul {
  list-style: none;
  margin: 1em 2em;
  padding: 0;
}

ul > li {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

ul > li::before {
  display: block;
  position: absolute;
  left: -1em;
  content: '\2192';
  font-weight: 500;
  color: #66666A;
}

#container {
  position: relative;
  margin: 8.1015% 0 8.1015% 13.1085%;
  width: 24.5943%;
  min-width: calc(48.6949% - 236px);
  padding: 0 118px;
}

#content {
  margin: 0 -118px;
}

#navigation {
  position: relative;
  margin: 3em -118px 1em;

  font-size: 14px;
  color: #99999F;
}

#navigation::before {
  display: block;
  position: absolute;
  top: -1.5em;
  left: 3em;
  right: 4.5em;

  border-top: solid 1px #333339;
  content: '';
}

#navigation :link, #navigation :visited {
  color: #BF9090;
}

.adbox {
  width: 250px;
  margin: 4em auto 0;

  color: #66666A;
  font-size: 11px;
}

.adbox::before {
  display: block;
  margin-bottom: 0.5em;

  content: 'this is an ad:';
}

.ad {
  margin: auto;

  background: #333339;
}

.ad > * {
  vertical-align: middle;
}

@media(min-width: 1000px) {
  #navigation {
    position: absolute;
    top: 0;
    left: 110.2826%;
    margin: 0;

    width: 41.2415%;
    text-align: right;
  }

  #navigation::before {
    display: none;
  }

  .adbox {
    text-align: left;
  }

  .ad {
    margin: 0;
  }
}

@media print {
  html, body {
    background: white;
  }

  * {
    color: black !important;
  }

  :link, :visited {
    color: #66666A !important;
  }
  a[href]:after {
    content: " \00AB\202F" attr(href) "\202F\00BB";
  }

  .adbox {
    display: none;
  }
}