html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
}

header {
  background: black;
  color: white;
}

.photos {
  /* Prevent vertical gaps */
  line-height: 0;
  -webkit-column-count: 2;
  -webkit-column-gap:   0px;
  -webkit-row-gap: 0px;
  -moz-column-count:    2;
  -moz-column-gap:      0px;
  -moz-row-gap: 0px;
  column-count:         2;
  column-gap:           0px;
  row-gap: 0px;
  
}

.photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;

}

header .container {
    text-align: center;
    height: 400px;
    margin: auto;
    overflow: hidden;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../images/birthday.jpg);
    background-size: cover;
    background-position: center;
}

.container h1 {
    display: inline-block;
    margin-top: 150px;
    font-size: 4em;
}

.banner {
    width: 100%;
    margin-top: -400px;
}
a {
  color: inherit;
  font-weight: bold;
}

nav {
  background: #202020;
  color: white;
  text-transform: uppercase;
  padding: 1.5em;
}

nav a {
  color: inherit;
  text-decoration: none;
}

nav .links {
  text-align: center;
}


nav .links .button{
    display: inline-block;
    width: auto;
    height: 20px;
    line-height:20px;
    text-align: center;
    background: #202020;
    margin-left: .5em;
    margin-right: .5em;
    padding: 10px;

    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    /* ...and now for the proper property */
    transition:.5s;
}
nav .links .button:hover {
    color: #aaaaaa;
}

nav .links .button a {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    font-size: medium;
    
}

.content {
    width: 60%;
    max-width: 800px;
    text-align: left;
    margin: auto;
    font-size: medium;
    padding-top: 2em;
}

.small {
    font-size: xx-small;
}
 .medium{
  font-size: medium;
 }
 .large{
  font-size: large;
 }
 .larger {
	font-size: x-large;
}
 .largest {
  font-size: xx-large;
}

@media screen and (max-width: 800px) {

  header .container {
    height: 150px;
  }

  .container h1 {
    font-size: 2.5em;
    margin-top: 50px;
  }

  .content {
    width: 80%;
  }

}

.photos .rotate90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}