h1 {
  font-family: "Dela Gothic One", cursive;
}

h2 {
  font-family: "Mate SC", serif;
  font-weight: 600;
}

h4 {
  margin: 0;
}

.heading {
  margin-top: 0;
  padding: 5% 0;
  text-align: center;
}

.small-header,
.small-header a {
  text-decoration: none;
  font-size: 1.5rem;
  color: grey;
}

@media (max-width: 990px) {
  .small-header,
  .small-header a {
    margin-top: 2rem;
    font-size: 1.3rem;
  }
}

.float-right {
  float: right !important;
}

.fa {
  text-align: center;
  font-size: 3.375rem;
  width: 3.75rem;
}

.navbar {
  background-color: #292f36 !important;
}

.fix {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
}

.navbar-brand {
  font-family: "Dela Gothic One", cursive;
}

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500);
.snip1198 {
  font-family: "Raleway", Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1px;
}
.snip1198 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.snip1198 li {
  display: inline-block;
  list-style: outside none none;
  margin: 0.4em 0.8em;
  padding: 0;
}
.snip1198 a {
  padding: 0 0.7em;
  color: rgba(255, 255, 255, 0.5);
  position: relative;
  text-decoration: none;
  display: inline-block;
}
.snip1198 a:before {
  position: absolute;
  content: "";
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  opacity: 0;
  left: 15%;
  right: 15%;
  top: 0;
  bottom: 0;
  border-left: 3px solid #27ae60;
  border-right: 3px solid #27ae60;
}
.snip1198 a:hover,
.snip1198 .current a {
  color: #ffffff;
}
.snip1198 a:hover:before,
.snip1198 .current a:before {
  opacity: 1;
  left: 0;
  right: 0;
}

@media (max-width: 990px) {
  .snip1198 a:before {
    border-left: 3px solid #292f36;
    border-right: 3px solid #292f36;
    z-index: -1;
  }
}

#home {
  padding-top: 5%;
  margin-right: 1.875rem;
  border-bottom-left-radius: 10%;
  border-bottom-right-radius: 15%;
}

#home .container {
  margin-top: 10%;
}

#home h1 {
  font-size: 3.75rem;
  margin-bottom: 0;
}

#home h3 {
  margin-top: 0;
  /* font-size: 2.5rem; */
  font-weight: 500;
}

#home .bitmoji {
  height: 5.3125rem;
  width: 5.3125rem;
}

#home img {
  width: 105%;
}

#home ul {
  margin: 0;
  margin-top: 3%;
  padding: 0;
  list-style: none;
  display: block;
  overflow: hidden;
}

#home ul li {
  float: left;
}

#home .fa {
  margin: 0 1.25rem;
}

#progress-bar-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: transparent;
  z-index: 9999;
}

#progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, #00f260, #0575e6);
  transition: width 0.25s ease-out;
  border-radius: 0 10px 10px 0;
}
#scroll-percentage {
  position: absolute;
  top: -20px;
  right: 10px;
  color: white;
  font-size: 12px;
  font-weight: bold;
  display: none; /* Hidden by default */
}

.output {
  color: #000;
}

#home .output h3 {
  font-size: 2.5rem;
  font-family: "Shadows Into Light", cursive;
  margin-left: 0;
  padding-top: 0;
  display: inline;
}

/* Cursor Styling */
.cursor::after {
  content: "";
  display: inline-block;
  background-color: #000;
  animation-name: blink;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  49% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@media (max-width: 990px) {
  #home {
    padding-top: 15%;
  }

  #home img {
    width: 100%;
  }

  #home h3 {
    font-size: 1.5rem;
  }

  #home h1 {
    font-size: 2.4rem;
  }

  #home .output h3 {
    font-size: 1.5rem;
    font-family: "Shadows Into Light", cursive;
    margin-left: 0;
  }

  #home .container {
    margin-left: 5%;
  }

  #home .fa {
    font-size: 2.1rem;
    width: 2.33334rem;
    margin: 0 0.5rem;
  }
}

#about {
  background-color: #e8f1ff;
  border-top-left-radius: 75%;
  border-top-right-radius: 25%;
  padding-bottom: 6rem;
}

#about img {
  padding-right: 0;
  width: 25rem;
  border-radius: 2%;
  box-shadow:
    rgba(0, 0, 0, 0.3) 0px 19px 38px,
    rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

#about h2 {
  font-family: "Varela Round", sans-serif;
  font-weight: 100;
  font-size: 1.5rem;
}

#about .expert,
.star,
.company {
  display: inline;
}

#about a {
  text-decoration: none;
  transition: box-shadow 0.3s;
  color: #000;
  overflow: hidden;
}

#about .expert a {
  color: blue;
  box-shadow: inset 0 -2px 0 blue;
}

#about .expert a:hover {
  box-shadow: inset 0 -30px 0 blue;
}

#about .star a {
  color: #ffbf00;
  box-shadow: inset 0 -2px 0 #ffbf00;
}

#about .star a:hover {
  box-shadow: inset 0 -30px 0 #ffbf00;
}

#about .company a {
  color: green;
  box-shadow: inset 0 -2px 0 green;
}

#about .company a:hover {
  box-shadow: inset 0 -30px 0 green;
}

#about a:hover {
  color: #fff;
}

/* COLUMNS */
.col {
  display: block;
  float: left;
  margin: 1% 0 1% 1.6%;
}

.col:first-of-type {
  margin-left: 0;
}

@media (max-width: 990px) {
  #about {
    padding-bottom: 2rem;
  }

  #about img {
    display: block;
    max-width: 100%;
    margin-bottom: 5%;
  }

  #about h2 {
    font-size: 20px;
    margin-left: 2%;
  }
}

#skills {
  padding-bottom: 5%;
  background-color: #e8f1ff;
}

#skills .container {
  margin-left: 0;
  margin-right: 0;
}

.border-bottom {
  padding-bottom: 5%;
  box-shadow: 0 1em 1em -1em rgba(0, 0, 0, 0.25);
}

#skills .description {
  background: #292f36;
  box-shadow:
    rgba(0, 0, 0, 0.3) 0px 19px 38px,
    rgba(0, 0, 0, 0.22) 0px 15px 12px;
  text-align: center;
  color: #fff;
}

#skills h2 {
  font-weight: 200;
  font-size: 1.9rem;
}

#skills .web-section img {
  width: 9.375rem;
}

#skills .web-section .bootstrap {
  width: 7rem;
}

#skills .web-section .mongo {
  margin-top: 21%;
}

#skills .cp-section {
  padding-top: 5%;
}

#skills .cp-section img {
  width: 12rem;
}

#skills .cp-section .languages {
  width: 5rem;
}

#skills .cp-section .description img {
  width: 10rem;
}

#skills .cp-section .description h2 {
  font-size: 1.7rem;
}

@media (max-width: 990px) {
  #skills h2 {
    font-size: 1.7rem;
  }

  #skills .web {
    margin-top: 9%;
  }

  #skills .web-section img {
    width: 7rem;
  }

  #skills .web-section .heroku {
    width: 4.48rem;
  }

  #skills .web-section .bootstrap {
    width: 5.227rem;
  }

  #skills .cp-section img {
    width: 7rem;
  }

  #skills .description .add {
    display: contents;
    background: #fff;
  }

  #skills .cp-section ul {
    list-style: none;
  }
}

@media (min-width: 990px) {
  .add {
    display: none;
  }
}

@media (max-width: 990px) {
  .remove {
    display: none;
  }
}

#work {
  padding-bottom: 6rem;
}

#work h2 {
  font-family: "Rubik", sans-serif;
  font-size: 2.6rem;
}

#work p {
  font-family: "Montserrat", sans-serif;
}

#work img {
  width: 100%;
}

#work .stacks {
  color: #fff;
  background-color: red;
  font-family: "Georama", sans-serif;
}

#work .links a {
  text-decoration: none;
  color: #fff;
  font-family: "Georama", sans-serif;
}

@media (max-width: 990px) {
  #work {
    padding-bottom: 3rem;
  }

  #work h2 {
    font-size: 2rem;
  }

  #work .btn {
    margin: 1% 0;
  }
}

#contact {
  padding-bottom: 5%;
}

#contact .heading {
  padding-bottom: 0;
}

#contact .message-section {
  color: #fff;
  box-shadow:
    rgba(0, 0, 0, 0.3) 0px 19px 38px,
    rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

#contact .contact-section {
  color: #fff;
  box-shadow:
    rgba(0, 0, 0, 0.3) 0px 19px 38px,
    rgba(0, 0, 0, 0.22) 0px 15px 12px;
  /* padding-bottom: 3%; */
}

#contact i {
  font-size: 4.5rem;
  width: 5rem;
}

#contact .fa-github {
  background-color: #fff;
  border-radius: 10%;
}

#contact .fa-facebook {
  font-size: 3.6rem;
  width: 4rem;
}

@media (max-width: 990px) {
  #contact {
    padding-top: 5%;
  }

  #contact h4 {
    font-size: 1rem;
  }

  #contact .mb-5 {
    margin-bottom: 0 !important;
  }

  #contact .message-section {
    margin: 5%;
  }

  #contact ul {
    padding-left: 0;
  }

  #contact i {
    font-size: 2.7rem;
    width: 3rem;
  }

  #contact .fa-facebook {
    font-size: 2.4rem;
    width: 2.66667rem;
  }

  #contact .container-fluid {
    padding-right: 0;
  }
}

#footer {
  background-color: #292f36;
  color: #fff;
}

#footer h4 {
  font-size: 1.2rem;
}

@media (max-width: 990px) {
  #footer h4 {
    font-size: 0.7rem;
  }
}

.fa-snapchat-ghost {
  background: #fffc00;
  color: white;
  border-radius: 10%;
  text-shadow:
    -2px 0px black,
    0px 2px black,
    2px 0px black,
    0px -2px black;
}

.fa-google {
  background: #dd4b39;
  color: white;
  border-radius: 10%;
}

.fa-envelope {
  color: #dd4b39;
}

.fa-facebook {
  padding-top: 0.4rem;
  background: #3b5998;
  color: #fff;
  border-radius: 10%;
}

.fa-instagram {
  background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
  color: #fff;
  border-radius: 25%;
}

.fa-github {
  color: black;
}

.fa-linkedin {
  background-color: #007bb5;
  border-radius: 10%;
  color: #fff;
}

.hvr-grow-rotate {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgb(0 0 0 / 0%);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

.hvr-grow-rotate:hover,
.hvr-grow-rotate:focus,
.hvr-grow-rotate:active {
  -webkit-transform: scale(1.1) rotate(4deg);
  transform: scale(1.1) rotate(4deg);
}