body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 0;
  background-color: #020202;
  color: #c8c8c8;
  font-size: 1.3rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: auto;
}

a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
}

h1, h2 {
  margin: 0;
  padding: 0;
  font-weight: 400;
}

h1 {
  color: #ffffff;
  align-self: center;
}

h2 {
  margin-bottom: 1.3em;
}

img {
  width: 20vw;
  border-style: solid;
  border-radius: 50%;
  border-color: #ffb341;
  border-width: 5px;
}

header, section, footer {
  padding: 2em;
}

header {
  display: grid;
  grid-template-columns: 30vw auto;
  grid-template-rows: auto auto;
}

header p {
  margin-top: 2em;
  grid-column-start: 1;
  grid-column-end: span 2;
}

section#software-engineering {
  background-color: #00855a;
  color: #ffffff;
}

section#music {
  background-color: #ffb341;
  color: #404040;
}
section#music a {
  color: #000000;
}

section#silly-stuff {
  background-color: #a459ae;
  color: #ffffff;
}

footer {
  font-size: 0.5em;
  text-align: center;
  color: #575a5f;
}

@media(min-width:992px) {

  body {
    font-size: 1.6rem;
  }

  header img {
    border:none;
    border-radius: unset;
    height: 100vh;
    width: auto;
  }

  header {
    padding: 0 0 0 2em;
    grid-template-columns: auto 50vw;
    grid-template-rows: auto auto;
    overflow-y: hidden;

  }

  header picture {
    grid-column: 2;
    grid-row-start: 1;
    grid-row-end: span 2;
    justify-self: end;
  }

  header h1 {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }

  header p {
    grid-column: 1;
    grid-row: 2;
  }

  section {
    padding-right: 33vw;
  }

  section p {
    max-width: 1100px;
  }

}