:root {
  --box-color: #111417;
  --name-color: #fdc501;
  --text-color: #ffe45e;
}

body {
  font-family: 'Helvetica Neue', 'sans-serif';
  background-color: var(--box-color);
  color: #fff;
}

.headerText,
.headerQuote {
  font-family: 'Raleway', 'sans-serif';
  padding-left: 50px;
  text-shadow: 3px 3px 2px rgba(150, 150, 150, 1);
}

.social {
  align-items: right;
}

.headerText {
  font-weight: bold;
  font-size: 48px;
  color: var(--name-color);
    padding-top: 80px;
}

.headerQuote {
  font-size: 36px;
}

.author {
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
  font-size: 16px;
  text-align: right;
  color: var(--text-color);
  margin-left: 220px;
}

h1,
p {
  margin: 0 0 1em 0;
}

.container {
  display: grid;
  grid-gap: 10px;
}


.container {
  display: grid;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  grid-template-rows: minmax(450px, auto);
}

.container > div > a > img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}


.header {

  
  background-image:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/907049/honolua.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
    background-position: center;
  position: relative;
}

.header,
.footer {
  margin-left: 5px;
  margin-right: 5px;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 100%;
          flex: 0 1 100%;
  grid-column: 1 / -1;
}

.footer {
  text-align: center;
  font-family: 'Raleway', 'sans-serif';
  font-size: 12px;
  color: white;
  margin: 0 auto;
  background-color: var(--box-color);
}

.container > * {
  background-color: var(--box-color);
  color: white;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 10px;
}
.subtitle {
  grid-column: 1/-1;
  text-align: center;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
  font-size: 36px;
  font-weight: 400;
  color: #575859;
  margin: 0px 50px 0px 50px;
}
.subtitleHead {
  font-family: 'Raleway', 'sans-serif';
  font-weight: bold;
  text-decoration: underline;
  -webkit-text-decoration-color: var(--text-color);
          text-decoration-color: var(--text-color);
  font-size: 36px;
  color: white;  
}



.contactHead {
  font-family: 'Raleway', 'sans-serif';
  font-weight: bold;
  font-size: 36px;
  color: var(--name-color);  
}