body {
  margin: 36px 0;
  color: white;
  background: #333;
  font-family: Segoe UI, sans-serif;
  text-shadow: 0 0 10px rgba(0,0,0,.2);
  font-size: 14px;
}

.background {
  position: fixed;
  background: url("background.jpg");
  background-size: cover;
  opacity: 0.5;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

body > section {
  display: inline-block;
  width: 600px;
  margin: 0 100px;
  vertical-align: top;
}

.screenshots img {
  height: 120px;
}

p {
  padding-left: 20px;
}

body, a {
  color: white;
}

abbr:after {
  content: "?";
  vertical-align: super;
  font-size: 60%;
}

li:after {
  content: ";";
}

li:last-child:after {
  content: ".";
}

h1 {
  font-size: 80px;
  font-weight: 100;
  margin-top: 32px;
  font-family: Segoe UI Light, Segoe UI, sans-serif;
}

h3 {
  font-size: 20px;
  font-weight: 100;
  font-family: Segoe UI Semibold, Segoe UI, sans-serif;
}

@media (max-width: 999px) { 
  h1 { font-size: 40px; }
  p { padding-left: 0; }
  body > section { display: block; width: auto; margin: 0 20px; }
  .screenshots img { height: 100px; }
}

@media (max-width: 400px) { 
  body > section { margin: 0 16px; }
  .screenshots img { height: 80px; }
}

@media (max-width: 360px) { 
  h1 { font-size: 36px; }
  body > section { margin: 0 10px; }
  .screenshots img { height: 60px; }
}