html {
  position: relative;
  min-height: 100%;
}

body {
  background: #ffffff;
  margin: 0 0 30px;
  font-family: "Avenir Light";
}

#main {
  width: 90%;
  height: 50%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

h1 {
  margin: -20px 0px;
  font-family: "Megrim", cursive;
  color: #3a69af;
  opacity: 70%;
  text-align: left;
  font-size: 10rem;
  font-weight: 100;
}

#role {
  color: #203e6c;
  opacity: 50%;
  margin: 5px;
  font-size: 36px;
  text-align: left;
  font-weight: 100;
  margin-bottom: 250px;
}

#resume {
  font-family: "Roboto Mono", monospace;
  font-size: 24px;
  color: #3a69af;
  opacity: 50%;
}

#resume a {
  text-decoration: none;
  color: inherit;
  opacity: 0.5;
}

#resume a:hover {
  opacity: 1;
}

#social-icons a {
  opacity: 0.5;
  margin-right: 24px;
  margin-bottom: 24px;
}

#social-icons a:hover {
  opacity: 1;
}

.icon {
  display: inline-block;
  background-size: 100%;
  width: 48px;
  height: 48px;
  text-indent: -999em;
  text-align: left;
  margin-bottom: 5px;
}

.linkedin {
  background: url("static/icons/linkedin.svg");
}

.github {
  background: url("static/icons/github.svg");
}

.twitter {
  background: url("static/icons/twitter.svg");
}

.foursquare {
  background: url("static/icons/foursquare.svg");
}

.download-icon,
.download-text {
  vertical-align: text-top;
  display: inline-block;
}

.download-text {
  margin-left: -10px;
}