html {
  height: 100%; }

img[alt=MediaHug] {
  width: 100%;
  max-width: 600px;
  height: auto; }

img[alt=MergeIcon] {
  width: 50px; }

body {
  background: #20555d;
  background-image: url("/images/ocean-background.jpg");
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
  grid-template-columns: 1fr 800px 1fr;
  display: grid; }

@media only screen and (max-width: 800px) {
  body {
    grid-template-columns: 10px 1fr 10px; }
  .screenshot {
    display: block;
    margin-bottom: 10px; }
  img[alt=MediaHug] {
    max-width: 100%; } }

.screenshot {
  width: 100%;
  max-width: 200px;
  height: auto; }

h1 {
  font-size: x-large; }

a:link {
  color: #9bdaff; }

a:visited {
  color: #9bdaff; }

a:active, a:hover {
  color: #9bdaff; }

li {
  list-style-type: none; }

.highlight {
  padding: 10px; }

pre {
  white-space: pre-wrap; }

article {
  background-color: #0b1d3a;
  padding: 25px; }

section#main {
  grid-row: 3 / span 1;
  grid-column: 2 / span 1;
  padding: 20px; }

footer {
  grid-row: 4;
  grid-column: 1 / span 3;
  text-align: center;
  padding: 50px; }