@import url('https://fonts.googleapis.com/css?family=Russo+One|Source+Sans+Pro:400,700');
@import 'foundation.min.css';

/* colors: http://www.colourlovers.com/palette/42041/The_Burden */

body {
  font-family: 'Source Sans Pro', sans-serif;
  background-color: #000;
  color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Russo One', sans-serif;
  color: #c33;
  text-transform: uppercase;
}

a,
a:visited,
a:hover,
a:active {
  color: #c33;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1 {
  font-size: 48px;
}

h2 {
  font-size: 24px;
}

.content {
  background: rgba(0, 0, 0, 0.75);
  padding: 20px;
}

.light {
  color: #aaa;
}

.bg {
  display: block;
  background-image: url(../images/bg.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-size: cover;
  background-position: center center;
}

@media screen and (min-width: 320px) {
  .bg {
    height: 300px;
    width: 100%;
  }
}

@media screen and (min-width: 640px) {
  .bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: auto;
  }

  .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 320px;
    min-height: 100vh;
    z-index: 2;
  }
}

@media screen and (min-width: 1024px) {
  .content {
    width: 400px;
  }
}

@media screen and (min-width: 1200px) {
  .content {
    width: 500px;
  }
}