* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

header h3 {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

ul {
  list-style: none;
}

section:nth-child(n + 2) {
  padding: 3em;
}

section:nth-child(1) {
  background: #203239;
  height: 93vh;
}

section:nth-child(2n + 3) {
  background: #eeedde;
}

header {
  height: 7vh;
  background: #141e27;
  color: white;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

.nav-link {
  color: white;
}

.nav-link:hover {
  color: #e0ddaa;
  color: #141e27;
}

.active {
  background: #e0ddaa !important;
  color: #141e27 !important;
  -webkit-transition: all 0.5 ease;
  transition: all 0.5 ease;
}

.homeHeaderContainer {
  padding-left: 20%;
}

.homeHeader {
  font-size: 5rem;
  color: #eeedde;
}

.changingHeader {
  font-size: 8rem;
  color: #e0ddaa;
}

.wordAnimatedFade {
  opacity: 0;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.wordAnimatedFade.fadeAnimation {
  opacity: 1;
}

#Contact {
  height: 50vh;
  background: #141e27;
  color: white;
}

.scrollDownArrow {
  position: absolute;
  bottom: 0%;
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  height: 50px;
  width: 100px;
  border-radius: 150px 150px 0 0;
  background-color: green;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.arrow {
  -webkit-animation: arrowAnimation 3s infinite;
          animation: arrowAnimation 3s infinite;
}

@-webkit-keyframes arrowAnimation {
  from {
    -webkit-transform: scale(2) translate(0, 0%);
            transform: scale(2) translate(0, 0%);
  }
  50% {
    -webkit-transform: scale(2) translate(0, 35%);
            transform: scale(2) translate(0, 35%);
  }
  100% {
    -webkit-transform: scale(2) translate(0, 0%);
            transform: scale(2) translate(0, 0%);
  }
}

@keyframes arrowAnimation {
  from {
    -webkit-transform: scale(2) translate(0, 0%);
            transform: scale(2) translate(0, 0%);
  }
  50% {
    -webkit-transform: scale(2) translate(0, 35%);
            transform: scale(2) translate(0, 35%);
  }
  100% {
    -webkit-transform: scale(2) translate(0, 0%);
            transform: scale(2) translate(0, 0%);
  }
}

.homeImg {
  max-width: 100px;
  max-height: 100px;
  opacity: 0.4;
  -webkit-animation: homeImgAnimation 2s;
          animation: homeImgAnimation 2s;
}

.homeImg:hover {
  opacity: 1;
}

@-webkit-keyframes homeImgAnimation {
  from {
    max-width: 500px;
    max-height: 500px;
    opacity: 1;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    max-width: 100px;
    max-height: 100px;
    opacity: 0.4;
  }
}

@keyframes homeImgAnimation {
  from {
    max-width: 500px;
    max-height: 500px;
    opacity: 1;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    max-width: 100px;
    max-height: 100px;
    opacity: 0.4;
  }
}

.bootStrapLogo {
  position: absolute;
  top: 10%;
  left: 15%;
  -webkit-transform: rotate(-15deg) translate(-50%);
          transform: rotate(-15deg) translate(-50%);
}

.javaLogo {
  position: absolute;
  top: 45%;
  left: 10%;
  -webkit-transform: rotate(-95deg) translate(-50%);
          transform: rotate(-95deg) translate(-50%);
}

.csharpLogo {
  position: absolute;
  top: 12%;
  left: 75%;
  -webkit-transform: rotate(-15deg) translate(-50%);
          transform: rotate(-15deg) translate(-50%);
}

.cppLogo {
  position: absolute;
  top: 45%;
  left: 78%;
  -webkit-transform: rotate(20deg) translate(-50%);
          transform: rotate(20deg) translate(-50%);
}

.htmlLogo {
  position: absolute;
  top: 72%;
  left: 65%;
  -webkit-transform: rotate(-60deg) translate(-50%);
          transform: rotate(-60deg) translate(-50%);
}

.cssLogo {
  position: absolute;
  top: 78%;
  left: 30%;
  -webkit-transform: rotate(30deg) translate(-50%);
          transform: rotate(30deg) translate(-50%);
}

.jsLogo {
  position: absolute;
  top: 5%;
  left: 40%;
  -webkit-transform: rotate(-15deg) translate(-50%);
          transform: rotate(-15deg) translate(-50%);
}

.profileImg {
  width: 100%;
  max-width: 240px;
  max-height: 240px;
  border-radius: 50%;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 3rem;
}

#Profile h1 {
  text-align: center;
}

#Profile p.lead {
  text-align: center;
  font-size: 21px;
}

#Experience h1,
#Education h1,
#Projects h1,
#Abilities h1,
#Contact h1 {
  text-align: center;
}

.ability-title {
  display: inline-block;
  width: 60%;
}

.ability-score {
  float: right;
}

.filled {
  color: #203239;
}

.unfilled {
  color: grey;
}

#Contact li {
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
  margin: 30px;
  color: white;
  padding-left: 100px;
}

.iconStyling {
  font-size: 20px;
  margin: 10px;
}

@media only screen and (max-width: 1000px) {
  .nav li a {
    padding: 7px 10px;
  }
  .homeHeaderContainer {
    padding-left: 10%;
  }
  .homeHeader {
    font-size: 4rem;
  }
  .changingHeader {
    font-size: 7rem;
  }
  #Contact li {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
    margin: 0;
    margin-top: 20px;
    padding-left: 50px;
  }
}

@media only screen and (max-width: 767px) {
  .homeHeaderContainer {
    padding-left: 5%;
  }
  .homeHeader {
    font-size: 3rem;
  }
  .changingHeader {
    font-size: 5rem;
  }
  .homeImg {
    max-width: 60px;
    max-height: 60px;
  }
  #Contact li {
    padding-left: 0px;
  }
  @-webkit-keyframes homeImgAnimation {
    from {
      max-width: 300px;
      max-height: 300px;
      opacity: 1;
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }
    to {
      max-width: 60px;
      max-height: 60px;
      opacity: 0.4;
    }
  }
  @keyframes homeImgAnimation {
    from {
      max-width: 300px;
      max-height: 300px;
      opacity: 1;
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }
    to {
      max-width: 60px;
      max-height: 60px;
      opacity: 0.4;
    }
  }
}

a:link {
  color: #eeedde;
}

/* visited link */
a:visited {
  color: #eeedde;
}

/* mouse over link */
a:hover {
  color: #e0ddaa;
}

/* selected link */
a:active {
  color: #e0ddaa;
}
/*# sourceMappingURL=style.css.map */