@font-face {
  font-family: "Special Elite";
  src: url(../fonts/SpecialElite.ttf);
}
@font-face {
  font-family: "Young Serif";
  src: url(../fonts/YoungSerif-Regular.ttf);
}
@media screen and (max-width: 500px) {
  .grid-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 40vw auto repeat(5, auto) 30vw;
  }
  h1 {
    margin: 10% 2.5% 10% 14vw;
    font-size: 12vw;
  }
  h3 {
    font-size: 9vw !important;
  }
  p {
    font-size: 4vw !important;
  }
  nav {
    grid-column: 1/-1;
    grid-row: 2/3;
    justify-content: center;
    position: sticky;
    top: 0;
  }
  ul {
    display: inline-block;
    text-align: center;
    margin: 1vw 2vw;
    padding: 3vw;
    font-size: 4vw !important;
  }
  li {
    float: left;
  }
  li.spacer {
    margin-left: 16vw;
  }
  li a,
  li a:visited {
    display: inline-block;
    padding: 1.5vw 3vw;
  }
  img {
    float: right !important;
    width: 90% !important;
    margin: 5vw 5vw 8vw !important;
  }
  .grid-item {
    grid-column: 1/-1;
    grid-row: span 1;
    margin: 5vw 8vw 4vw;
  }
  footer {
    grid-column: 1/-1;
  }
}
@media screen and (min-width: 500px) {
  .grid-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 17vw 8vw repeat(5, auto) 17vw;
  }
  h1 {
    margin: 4% 2.5% 10% 32vw;
    font-size: 6.5vw;
  }
  nav {
    grid-column: 1/-1;
    grid-row: 2/3;
    position: sticky;
    top: 0;
  }
  ul {
    display: inline-block;
    text-align: center;
    margin: 1vw 3vw;
  }
  li {
    float: left;
  }
  li a,
  li a:visited {
    display: inline-block;
    padding: 1.5vw 3vw;
  }
  .short {
    width: 47vw !important;
  }
  .grid-item {
    grid-column: 1/-1;
    grid-row: span 1;
    margin: 5vw 8vw 4vw;
  }
  footer {
    grid-column: 1/-1;
  }
}
@media screen and (min-width: 945px) {
  .grid-container {
    display: grid;
    grid-template-columns: 20vw 3fr;
    grid-template-rows: 17vw repeat(5, auto) 17vw;
  }
  h1 {
    margin: 5% 2.5% 10% 32vw;
    font-size: 6vw;
  }
  nav {
    grid-column: 1/span 1;
    grid-row: 2/-2;
  }
  ul {
    margin: 0;
    padding: 2vw 0.5vw;
  }
  li a,
  li a:visited {
    text-align: left;
    padding: 1.5vw 1vw;
  }
  .short {
    width: 35vw !important;
  }
  .grid-item {
    grid-column: 2/5;
    grid-row: span 1;
    margin: 5vw 8vw 4vw;
  }
  footer {
    grid-column: 2/-1;
  }
}
body {
  margin: 0px;
  background-image: url(../img/lightWhiteBG.png);
  background-size: 100%;
}

header {
  grid-column: 1/-1;
  grid-row: 1/2;
  width: 100%;
  background-image: url(../img/brownPaperBG.jpg);
  background-size: 100%;
  align-content: center;
}

nav {
  background-color: #3c2818;
  color: white;
  padding: 1vw;
}

img.right {
  width: 30vw;
  float: right;
  margin: 5vw 0 3vw 3vw;
}

img.left {
  width: 30vw;
  float: left;
  margin: 5vw 3vw 3vw 0;
}

#personal {
  margin-bottom: 13vw;
}

footer {
  background-image: url(../img/brownPaperBG.jpg);
  background-size: 100%;
  text-align: center;
  color: white !important;
}

h1 {
  font-family: "Young Serif", serif;
  color: white;
  line-height: 0.75em;
  text-align: left;
}

h3 {
  font-family: "Young Serif", serif;
  font-size: 3.5vw;
  color: #3c2818;
}

p {
  font-family: "Special Elite", monospace;
  line-height: 1.25em;
  font-size: 1.85vw;
  color: black;
}

ul {
  list-style-type: none;
  text-decoration: none;
  font-family: "Special Elite", monospace;
  font-size: 1.75vw;
  position: sticky;
  top: 0;
}

a {
  color: #3c2818;
}

a:hover {
  color: #8d6b51;
}

li a,
li a:visited {
  list-style-type: none;
  text-decoration: none;
  color: white;
  display: inline-block;
}

li a:hover {
  background-color: #8d6b51;
  transition: 0.7s;
}

#copyright {
  color: white;
}/*# sourceMappingURL=main.css.map */