body{
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #383838;
  background-color: #DDDDDD;
}
.landing{
  width: 100%;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}
nav{
  height: 50px;
  display: flex;
  justify-content: space-between;
  margin: 0 10%;
}
nav a{
  margin: 12px 0 auto 10px;
}
.fa-bars{
  display: none;
  font-size: 24px;
  margin: auto 0;
}
.fa-bars:hover{
  cursor: pointer;
  color: #FF7F2A;
}
.links{
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.links a{
  text-decoration: none;
  color: #383838;
  font-weight: bold;
  margin: 0;
  padding-right: 40px;
}
.links a:hover{
  color: #FF7F2A;
}
.socials{
  display: flex;
  margin: auto 0;
  font-size: 24px;
}
.socials a{
  text-decoration: none;
  color: #383838;
}
.socials .fab:hover{
  color: #FF7F2A;
}
.fa-envelope{
  font-size: 24px;
  text-decoration: none;
  color: #383838;
}
.fa-envelope:hover{
  color: #FF7F2A;
}
.freelance{
  display: flex; 
}
.freelance-status{
  width: 10px;
  height: 10px;
  background-color: #FF7F2A;
  border-radius: 10px;
  margin: 17px 10px auto 0; 
}
.freelance p{
  font-size: 14px
}
header{
  margin: -50px 10% 30px 10%;
  max-width: 100vw;
}
.info{
  margin-top: 120px;
  max-width: 45%;
}
.info p{
  font-size: 14px;
  padding-bottom: 30px;
}
.info a{
  font-size: 14px;
  text-decoration: none;
  font-weight: bold;
  background-color: #212B38;
  color: #FFFFFF;
  padding: 12px 30px;
  border-radius: 5px;
}
.info a:hover{
  background-color: #FF7F2A;
}
.banner{
  width: 80%;
}
.latest{
  margin-top: 40px;
}
.latest a{
  text-decoration: none;
  color: #212B38;
  font-weight: bold;
}
.latest a:hover{
  color: #FF7F2A;
}
h2{
  font-size: 36px;
  text-decoration: underline;
  text-decoration-color: #FF7F2A;
}
h3{
  font-size: 30px;
}
.works{
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.works div{
  width: 19vw;
  height: 12vw;
  background-color: #EEEEEE;
}
.bitmoji{
  min-width: 572px;
  z-index: -1;
  position: absolute;
  left: 45vw;
  top: 4vw;
  max-width: 30%;
}
.skills{
  width: 100%;
  min-height: 33vh;
  background-color: #EEEEEE;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 50px;
  color: #A7A7A7;
}
.skills h2{
  color: #383838;
  text-decoration: underline;
  text-decoration-color: #212B38;
  margin: 50px 0 50px 10%;
}
.skills div{
  width: 80%;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}
.skills .fab{
  font-size: 5vw;
}
.tech{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tech p{
  font-weight: bold;
  color: #383838;
}
.portfolio{
  width: 100%;
  margin-top: 120px;
  margin-bottom: 2px;
}
.portfolio h2{
  margin: 50px 0 50px 10%;
}
.tags{
  list-style-type: none;
  display: flex;
  font-size: 14px;
  width: 100%;
  margin: 0 0 50px 10%;
  padding: 0;
}
.tags li{
  background-color: #A7A7A7;
  color: #FFFFFF;
  padding: 10px 20px;
  margin-right: 20px;
  border-radius: 10px;
  font-weight: bold;
}
.tags li:hover{
  background-color: #212B38;
  cursor: pointer;
}
#golfgalaxy{
  background-image: url(img/golfgalaxy.png);
}
#golfgalaxy:hover{
  background-image: url(img/golfgalaxy.gif);
}
#morningbrew{
  background-image: url(img/morningbrew.png);
}
#morningbrew:hover{
  background-image: url(img/morningbrew.gif);
}
.portfolio-row{
  width: 100%;
  display: flex;
  gap: 2px;
  margin-bottom: 2px;
}
.single{
  width: 25vw;
  height: 25vw;  
  background-color: #383838;
  color: #FFFFFF;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  align-items: center;
  box-shadow: inset 0 0 0 25vw rgba(28, 40, 56, .8);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center;
  position: relative;
}
.single h3{
  padding-top: 16%;
}
.single:hover{
  background-color: #383838;
  cursor: pointer;
  box-shadow: inset 0 0 0 25vw rgba(28, 40, 56, 0);
  -webkit-transition: all 0.4s ease-in-out;
}
.double{
  width: 50vw;
  height: 25vw;  
  background-color: #383838;
  color: #FFFFFF;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  align-items: center;
  box-shadow: inset 0 0 0 25vw rgba(255, 127, 42, .8);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center;
}
.double h3{
  padding-top: 8%;
}
.double:hover{
  background-color: #383838;
  cursor: pointer;
  box-shadow: inset 0 0 0 25vw rgba(255, 127, 42, 0);
  -webkit-transition: all 0.4s ease-in-out;
}
.about{
  width: 100%;
  min-height: 50vh;
  background-color: #EEEEEE;
}
.about h2{
  color: #383838;
  text-decoration: underline;
  text-decoration-color: #212B38;
  margin: 0px 0 50px 10%;
  padding-top: 50px;
}
.contact{
  width: 100%;
  min-height: 50vh;
}
.contact h2{
  margin: 0px 0 50px 10%;
  padding-top: 50px;
}
.testportfolio{
  width: 100%;
}
.testrow{
  width: 100%;
  height: 25vw;
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 2px;
  margin-bottom: 2px;
}
.singletest{
  background-color: #383838;
  color: #FFFFFF;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  align-items: center;
  box-shadow: inset 0 0 0 25vw rgba(28, 40, 56, .8);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center;
  position: relative;
}
.doubletest{
  background-color: #383838;
  color: #FFFFFF;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  align-items: center;
  box-shadow: inset 0 0 0 25vw rgba(255, 127, 42, .8);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center;
}
@media screen and (max-width: 1538px) {
    header{
      margin: 0 5% 30px 5%;
    }
    nav{
      margin: 0 5%;
    }
    .bitmoji{
      top: 7vw;
    }
    .skills h2{
      margin: 50px 0 50px 5%;
    }
    .portfolio h2{
      margin: 50px 0 50px 5%;
    }
    .about h2{
      margin: 0 0 50px 5%;
    }
    .contact h2{
      margin: 0 0 50px 5%;
    }
    .tags{
      margin: 0 0 50px 5%;
    }
  }
@media screen and (max-width: 1360px) {
  .info{
    margin-top: 100px;
      max-width: 55%;
    }
  .works div{
    width: 21vw;
    height: 14vw;
  }
  .bitmoji{
    min-width: 500px;
    top: 12vw;
  }
@media screen and (max-width: 1110px) {
    .info{
      max-width: 60%;
    }
    .info p{
      padding-right: 20px;
    }
    nav{
      margin: 0 2%;
    }
    .bitmoji{
      min-width: 450px;
      top: 15vw;
    }
    .tech .fab{
      font-size: 8vw;
    }
  }
@media screen and (max-width: 895px) {
    .works{
      flex-wrap: wrap;
      gap: 2vw;
      justify-content: center;
    }
    .works div{
      width: 41vw;
      height: 28vw;
    }
    .info{
      margin-top: 80px;
      max-width: 55%;
    }
    .banner{
      width: 100%;
    }
    .bitmoji{
      width: 400px;
      top: 15vw;
    }
    .latest{
      margin-top: 50px;
    }
    nav{
      margin: 0 5%;
    }
    .links{
      display: none;
    }
    .socials{
      display: none;
    }
    .fa-bars{
      display: block;
    }
  }
@media screen and (max-width: 650px) {
    .bitmoji{
      top: 10vw;
    }
    .skills div{
      width: 100%;
    }
    .tech p{
      font-size: 14px;
    }
    .tags{
      width: 100%;
      margin: 0 0 50px 0;
      font-size: 12px;
      flex-wrap: wrap;
      justify-content: center;
      gap: 3vw;
    }
  }
@media screen and (max-width: 500px) {
    .info{
      margin-top: 160px;
      max-width: 70%;
    }
    .info p{
      font-size: 11px;
      padding: 10px 0 40px 0;
    }
    .works{
      flex-wrap: wrap;
      gap: 2vw;
      justify-content: start;
      margin: 0 auto 30px auto;
    }
    .works div{
      width: 100vw;
      height: 50vw;
    }
    .bitmoji{
      left: 40vw;
      top: 20vw;
    }
    .latest{
      margin-top: 80px;
    }
    .freelance p{
      margin: auto 0;
      font-size: 12px;
    }
    .freelance-status{
      width: 7px;
      height: 7px;
      margin: 21px 5px auto 0;
    }
    .tech p{
      font-size: 12px;
    }
    .tech .fab{
      font-size: 10vw;
    }
  }
}