@font-face {
  font-family: Augustina;
  src: url(../assets/fonts/agustina.otf);
}
@font-face {
  font-family: Montserrat;
  src: url(../assets/fonts/montserrat.ttf);
}
@font-face {
  font-family: Montserrat-Thin;
  src: url(../assets/fonts/Montserrat-Thin.ttf);
}
/* width */
.showing::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar {
  width: 0px;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #C0392B;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #cc4f41;
}
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
body {
    overflow: overlay;
    font-size: 0.5rem;
    color: white;
    background: #000;
    font-family: Montserrat;
}
a {
  color: white;
  text-decoration: none;
}
p {
  font-size: 1rem;
  font-family: Montserrat-Thin;
  margin-bottom: 2rem;
  line-height: 1.5rem;
}
nav.nav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  position: fixed;
  z-index: 10;
  animation: expand 2s;
}
@keyframes expand{
  0%{height: 0px}
  100%{height: 70px}
}
h1 {
  padding: 10px 0px 0px 20px;
  display: flex;
  flex-wrap: nowrap;
}
h2{
  font-size: 1.2rem;
  font-weight: 300;
}
.title {
  font-weight: 100;
  font-size: 1.8rem;
  font-family: Augustina;
}
.quote {
  position: relative;
  font-size: 1.4rem;
  margin: 10px;
  top: 5px;
  font-weight: bold;
}
.navLink {
  display: flex;
  flex-direction: row;
  font-size: 1rem;
  width: 100%;
  justify-content: flex-end;
}
.hamburger {
  display: none;
  margin: 20px;
}
.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: #C0392B;
}
.navLink > li > a {
  font-size: 0.8rem;
  padding: 10px 15px 10px 15px;
  margin-right: 20px;
  border-radius: 5%;
}

.navLink > li > a:hover, .button-red:hover {
  background-color: #C0392B;
}

.navLink > li > a:active {
  background-color: #cc4f41;
}

.border-red {
  border: solid 1px #C0392B;
}
.button-red {
  border: solid 1px #C0392B;
  font-size: 0.8rem;
  padding: 10px 15px 10px 15px;
  border-radius: 5%;
}
.home {
  min-height: 100vh;
  flex-direction: row;
  display: flex;
  align-items: center;
  padding: 0 10% 0 10%;
  justify-content: space-between;
  overflow: hidden;
  /* flex-wrap: wrap;
  padding-top: 50px;
  justify-content: center; */
}
.about {
  min-height: 100vh;
  background-color: #212121;
  padding: 7% 2% 7% 2%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.skills, .projects, .contact {
  min-height: 100vh;
  padding: 0% 2% 0% 2%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.leftAbout {
  max-width: 60%;
}
.aboutImg {
  display: flex;
}
.aboutImg > li {
  margin: 2%;
}
h3 {
  color: #C0392B;
  font-size: 1rem;
  padding-top: 10%;
}
.technologies {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 10% 4% 4% 4%;
  /*columns: 2;*/
}
.technologies > li {
  padding: 5% 0 5% 0;
  text-align: center;
  font-size: 1rem;
}
.technologies > li > img {
  width: 50px;
  transition: width 1s;
}
.technologies > li > img:hover {
  width: 65px;
  filter: brightness(0) saturate(100%) invert(26%) sepia(34%) saturate(3409%) hue-rotate(342deg) brightness(101%) contrast(89%);
}
.profilImg {
  opacity: 0.8;
  width: 50%;
}
.names {
  font-size: 4rem;
}
.social-media {
  display: flex;
  flex-direction: row;
  animation-name: fadeIn;
  -webkit-animation-name: fadeIn; 
  animation-duration: 2s;   
  -webkit-animation-duration: 2s;
  animation-timing-function: ease-in-out; 
  -webkit-animation-timing-function: ease-in-out;     
  visibility: visible !important; 
}
@keyframes fadeIn {
  0% {
      transform: scale(0);
      opacity: 0.0;       
  }
  60% {
      transform: scale(1.1);  
  }
  80% {
      transform: scale(0.9);
      opacity: 1; 
  }   
  100% {
      transform: scale(1);
      opacity: 1; 
  }       
}

@-webkit-keyframes fadeIn {
  0% {
      -webkit-transform: scale(0);
      opacity: 0.0;       
  }
  60% {
      -webkit-transform: scale(1.1);
  }
  80% {
      -webkit-transform: scale(0.9);
      opacity: 1; 
  }   
  100% {
      -webkit-transform: scale(1);
      opacity: 1; 
  }       
}
.social-media > li > a > img {
  height: 35px;
  margin: 15px;
}
.social-media > li > a > img:hover {
  box-shadow: 0 0 0 10px #C0392B;
  background-color: #C0392B;
  -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
}
.animatedText {
  padding: 5px;
  font-family: Montserrat-Thin;
  font-size: 1.5rem;
}
.aboutTitle {
  font-size: 4rem;
  font-family: Montserrat-Thin;
  margin-bottom: 3%;
  text-align: center;
}
.box {
  background-color: #212121;
  border-radius: 15px;
  margin: 15px;
  padding: 0 5% 0 5%;
  transition: all 0.2s ease-in-out;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  overflow: hidden;
  min-height: 90%;
}
.box:hover {
  box-shadow: 0 5px 15px #C0392B;
}
.skillsBoxes, .projectBoxes {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
.skillsBoxes > li {
  flex: 1 0 33%;
}
.projectBoxes > li {
  flex: 0 1 33%;
}
.box > p {
  font-size: 0.7rem;
  line-height: normal;
  padding-top: 2%;
}
.box > img {
  width: 10vh;
  margin-top: 5%;
}
.box > i {
  color:#C0392B;
  font-size: 5rem;
  padding-top: 5%;
}
footer {
  text-align: center;
  background-color: #212121;
  padding: 3vh;
  font-family: Montserrat-Thin;
  font-size: 0.6rem;
}
.pub{
  display: block;
}
.pubMobile {
  display: none;
}
/* Mobile Version */
@media (max-width: 48em) {
  .pub{
    display: none;
  }
  .pubMobile {
    display: block;
  }
  .home {
    padding-top: 50px;
    justify-content: center;
    flex-direction: column;
  }
  .profilImg {
    min-width: 300px;
    transform: translateY(0%) translateX(+30%);
  }
  .names {
    font-size: 3rem;
  }
  nav.nav {
    width: 100%;
    justify-content: space-between;
  }
  .navLink {
    display: block;
    position: fixed;
    right: -100%;
    top: 5rem;
    flex-direction: column;
    background-color: #302f2f;
    border-radius: 10px;
    text-align: center;
    transition: 0.3s;
    width: auto;
    margin: 5%;
  }
  .navLink > li > a {
    margin-left: 20px;
  }
  .navLink.active {
      right: 0;
  }

  .navLink > li {
      margin: 2.5rem 0;
  }

  .hamburger {
      display: block;
      cursor: pointer;
  }
  
  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active .bar:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
  }

  .hamburger.active .bar:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
  }
  .about {
    flex-direction: column;
    text-align: center;
    padding: 10% 2% 10% 2%;
  }
  .aboutImg {
    justify-content: center;
  }
  .leftAbout {
    max-width: 100%;
  }
  .aboutTitle {
    font-size: 3.5rem;
  }
  .technologies {
    grid-template-columns: repeat(3, 1fr);
  }
  .technologies > li{
    white-space: nowrap;
  }
  .skills, .projects, .contact {
    padding: 15% 2% 0% 2%;
    text-align: center;
  }
  .projectBoxes > li {
    flex: 1 0 100%;
  }
}

@media only screen and (max-width: 480px) {
  .home {
    padding-top: 10px;
  }
  .names {
    font-size: 2rem;
  }
  .aboutTitle {
    font-size: 2.5rem;
    font-family: Montserrat-Thin;
  }
  .about {
    padding: 25% 2% 25% 2%;
  }
  .skillsBoxes > li {
    flex: 1 0 50%;
  }
}

@media only screen and (max-height: 580px) {
  .home {
    padding-top: 50px;
  }
  .box {
    max-width: 100%;
  }
}