body {
  background-color: #000000;
  color: #eeeeee;
  max-width: 100vw;
  padding-left: 22vw;
  padding-right: 22vw;
}

@media screen and (max-width: 850px) {
  body {
    padding-left: 10vw;
    padding-right: 10vw;
  }
}

@media screen and (max-width: 600px) {
  body {
    padding-left: 5vw;
    padding-right: 5vw;
  }
}

::selection {
  background-color: rgba(0,26,61,0.99);
}

::-moz-selection {
  background-color: rgba(0,26,61,0.99);
}

h1 {
  font-weight: 700;
}

.video {
  padding-bottom: 25%;
  max-width: 100%;
}

img {
  max-width: 100%;
  width: auto\9;
}

.iframe-container {
  overflow: hidden;
  /* Calculated from the aspect ration of the content (in case of 16:9 it is 9/16= 0.5625) */
  padding-top: 56.25%;
  position: relative;
}

.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

p {
  margin-left: 5px;
}

.title {
  color: #aaa;
  font-weight: 700;
  line-height: 0.8;
}

.sub {
  color: #555;
  font-weight: 300;
}

.description {
  color: #666;
  letter-spacing: 0.01em;
  font-family: 'Lato';
  font-size: 9.5pt;
}

.date, .runtime {
  color: #666;
  font-weight: 300;
  font-size: 9pt;
  line-height: 0.5;
}

a {
  color: #a44;
  text-decoration: none;
}

a:hover {
  font-style: italic;
}

a.section, a.section :hover {
  color: #eeeeee;
}

footer {
  color: #333;
}