/* GENERAL STYLES */
*{
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}
a{
  color: #000;
}
input{
  appearance: none;
}
button{
  font-size: 100%;
  color: #000;
}
p{
  line-height: 35px;
}
::-webkit-scrollbar{
width: 7px;
height: 7px;
background: #e5e5fa;
position: absolute;
cursor:grab;
}
::-webkit-scrollbar-thumb{
background: #88b8ff;
}

.sectionHeader{
  padding: 15px 20px;
  border-left: 4px solid #6f87f3;
}

/* ANIMATED BUTTON */
.button {
  color: #6f87f3;
  display: inline-block;
  vertical-align: middle;   
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  transition: color 0.5s linear;
  background: transparent;
  border: 2px solid #6f87f3;
  padding: 15px;
  cursor: pointer;
}
.button:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #6f87f3;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s ease-out;
}
.button:hover, .button:active {
color: #fff;
}
.button:hover:before, .button:active:before {
transform: scaleX(1);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}


/* UNDERLINE BUTTON */
.underline {
display: inline-block;
padding: 20px;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
overflow: hidden;
}
.underline:before {
content: "";
position: absolute;
z-index: 8;
left: 51%;
right: 51%;
bottom: 0;
background: #6f87f3;
height: 2.5px;
transition-property: left, right;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}

.underline:hover:before{
left: 0;
right: 0;
}

/* HEADER */
header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  background: #fff;
  position: fixed;
  padding: 0 15px;
  top: 0;
  right: 0;
  width: 100%;
  box-shadow: 0 1px 4px rgba(55, 41, 105, 0.3);
  z-index: 25;
}
header .logo{
  font-weight: bold;
  font-size: 1.05em;
}
header .logo img{
  vertical-align: middle;
  width: 42px;
}
header .menu{
  min-width: 50%;
  flex-shrink: 1;
  display:flex;
  align-items:center;
}
header .menu a, header .menu span{
  width: 25%;
  display: inline-block;
  flex-grow: 1;
  text-align: center;
  padding: 20px;
  border-left: 1px solid #dfe3f7;
  cursor: pointer;
}
header a:last-child{
  border-right: 1px solid #dfe3f7;
}
header .active{
  padding: 19px 20px !important;
  font-weight: bold;
  color:#6f87f3;
  border-bottom: 2px solid #6f87f3 !important;
}
header a.active:before{
  display: none !important;
}
header .contact .active{
  padding: 10px;
  color: #fff;
  font-weight: normal;
  background: #6f87f3;
}
header .contact a{
  border-right: 2px solid #6f87f3;
}
header .button{
  padding: 10px;
}

#resHeader{
  display: none;
  padding: 0 10px;
}
.hamburgerMenu{
  justify-content: flex-end;
}
#resHeader svg{
  width: 30px;
}
#resMenu{
  display: none;
}
.hamburgerMenu div{
  padding: 2px 5px;
  margin:7px 0;
  border-radius: 5px;
  cursor: pointer;
  background: #edeafd;
}



/* JUMBOTRON */
#backdrop{
  position: fixed;
  width: 100%;
  height: 782px;
  z-index: -2;
  top:-40px;
  right:0;
  overflow: hidden;
  background:linear-gradient(120deg,#2b3a80,#6250a0,#84ceff);
}
#backdrop img{
  min-width: 100%;
  height: 100%;
  object-fit: cover;
}
#greeting{
  text-align: center;
  color: #fff;
  min-height: 560px;
  padding-top: 190px;
  max-width: 800px;
  margin:auto;
}
#greeting p{
  margin: 30px 0;
  opacity: 0.65;
}

/* ABOUT (BRIEF) */
#whiteSpace{
  position: relative;
  top:70px;
  width: 100%;
  left: 0;
  min-height: 1000px;
  background: #fff;
  z-index: 1;
}

#aboutBrief{
  position: absolute;
  top: -50px;
  background: #ebebff;
  box-shadow: 0 2px 15px rgba(128, 119, 218, 0.5);
  margin:auto;
  left:10%;
  right:10%;
  min-height: 450px;
  padding: 50px;
  border-radius: 5px;
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 5;
}
#aboutBrief .info{
  flex-grow: 1;
}
#aboutBrief p{
  margin-top: 20px;
  text-align: justify;
  color: #7d86ad;
}


/* SKILLs */
#skills{
  position: absolute;
  top:350px;
  width: 100%;
  background:linear-gradient(90deg,#6078e2,#84b9ff,#c1b3ff);
  padding-top: 80px;
}

#skills .sectionHeader{
  margin-left: 50px;
  color: #fff;
  border-left-color: rgba(255, 255, 255, 0.4);
}

#skills ul{
  display:flex;
  align-items:center;
  padding: 30px 0;
  margin:auto;
  width: calc(100% - 150px);
  overflow-x: hidden; /* turn to overlay for mobile*/
  white-space: nowrap;
}
#skills li{
  white-space: normal;
  cursor: pointer;
  width: 250px;
  height: 300px;
  perspective: 60rem;
  position: relative;
  margin-right: 20px;
  flex-shrink: 0;
}
#skills li:nth-child(7){
  margin-right: 100px;
}

.tool{
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
  width: 100%;
  font-size: 0.95em;
  box-shadow: 0 2px 7px rgba(55, 41, 105, 0.35);
}
.tool:hover {
  transform: rotateY(180deg);
}
.toolInfo,.toolBack {
  backface-visibility: hidden;
  height: 100%;
  position: absolute;
  overflow: hidden;
  border-radius: 6px;
  width: 100%;
  background: #fff;
  padding: 30px 20px;
}

.toolPic{
  text-align: center;
  margin-bottom: 17px;
}
.toolPic img{
  width: 72px;
  height: 72px;
}
.toolBack {
  background: #ebebff;
  color: #6f87f3;
  transform: rotateY(180deg);
  text-align: center;
}
.toolInfo, .toolDescription, .toolDescription p{
  flex-grow: 1;
  display:flex;
  flex-direction: column;
}
.toolBack p{
  color:#000 !important;
  font-size: 1.15em !important;
}
.toolBack div{
  margin:auto;
  width: 100px;
  height: 100px;
  border: 2px solid #6f87f3;
  display:flex;
  align-items:center;
  justify-content: center;
  border-radius: 50%;
  margin-top: 30px;
  margin-bottom: 20px;
}
#skills li h3{
  font-size:1em;
  padding-bottom: 5px;
}
#skills li p{
  color: #6c6c92;
  background: #fff;
  padding:10px;
  border-radius: 5px;
  margin-top: 5px;
  font-size: 0.97em;
  line-height: 25px !important;
  box-shadow: 0px 2px 5px rgba(171, 166, 228, 0.5);
}
#toolsLabel{
  padding-top: 10px;
  padding-bottom: 60px;
  font-size: 1.3em;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 15px rgba(98, 75, 160, 0.5);
}
#left,#right{
  position: absolute;
  top:50%;
  left:20px;
  width:40px;
  height:40px;
  border-radius: 50%;
  border:2px solid #fff;
  display:flex;
  align-items:center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: all linear 0.3s;
}
#right{
  left: auto;
  right:20px;
}
#left:hover, #right:hover{
  background: #fff;
  color: #000;
}

/* PORTFOLIO */
#portfolio{
  position: relative;
  z-index: 2;
  background: #fff;
}
#portfolio .top{
  max-width: 1250px;
  margin:70px auto;
}
#portfolio .top p{
  color: #818cbb;
  margin-top: 10px;
}
#portfolio nav{
  border-top: 1px solid #dfe3f7;
  display:flex;
  align-items:center;
  z-index: 20;
  position: sticky;
  top:56px;
  background: #fff;
}
#portfolio nav div{
  display:flex;
  align-items:center;
  padding: 14px;
  width: 25%;
  justify-content: center;
  border-bottom: 2px solid #dfe3f7;
  cursor: pointer;
  transition: all linear 0.3s;
  border-right: 1px solid #dfe3f7;
}
#portfolio nav div:last-child{
  border-right: none;
}
#portfolio nav svg{
  width: 40px;
  margin-right: 10px;
}

#portfolio nav div.active{
  font-weight: bold;
  border-bottom-color: #8399fa;
  color: #667fec !important;
  fill: #667fec !important;
}
#portfolio .underline:before {
  height: 2px;
}
#portfolioContent{
  background: #f2f2fd;
}
.portWrapper{
  display:flex;
  flex-wrap: wrap;
  padding: 25px;
  padding-bottom: 0;
  max-width: 1300px;
  margin: auto;
  align-items: flex-start;
}

.portfolioItem{  
  width: 30%;  
  flex-shrink: 0;
  flex-basis: 30%;  
  margin-right: 20px;
  margin-bottom: 20px;
  cursor: pointer;  
  position: relative;  
} 
.portfolioPicture{
  width: 100%;
  height: 200px;
  border: 7px solid #fff;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 7px rgba(68, 52, 128, 0.3);
  transition: all linear 0.4s;
}
.portfolioItem img{
  width: 100%;
  height:100%;
  object-fit: cover;
}
.portfolioItem.app {
  width: 15%;
  max-width: 120px;
}
.portfolioItem.app img{
  object-fit: contain
}
.portfolioItem:hover .portfolioPicture{
  transform: scale(1.08);
}
.portfolioItem b{
  text-align: center;
  font-size: 1;
  display: block;
  text-align: center;
  padding: 20px;
  color: rgb(88, 83, 121);
}

.portfolioGitHubButton{
  text-align: center;
  padding-top: 0px;
  padding-bottom: 40px;
}

#portWebsitesSection,#portAppSection{
  padding: 20px;
  text-align: center;
}
.portProjects{
  min-height: 200px;
  margin-top: 10% !important;
}


/* SOCIAL MEDIA ---------------------------------------------------------------------------------------------------- */
#socialMedia{
  background: #fff;
  text-align: center;
  padding: 50px;
  padding-bottom: 80px;
}

#socialMedia p{
  color: #818cbb;
  margin-top: 10px;
}

#socialMedia .links{
  display:flex;
  align-items:center;
  margin-top: 30px;
  justify-content: center;
}

#socialMedia .links a{
  display:flex;
  align-items:center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin-right: 25px;
  border-radius: 50%;
  border: 2px solid #768ef8;
  transition: all linear 0.2s;
}

.fb:hover{
  fill:#fff;
  background: #768ef8;
}
.twi:hover{
  fill:#fff;
  background: #6fb2ff;
  border-color: #6fb2ff !important;
}
.yt:hover{
  fill:#fff;
  background: #fd3b65;
  border-color: #fd3b65 !important;
}
.ins:hover{
  fill:#fff;
  background:linear-gradient(50deg,#846cd8,#ff6ca9,#ff9456);
  border-color: #846cd8 !important;
}
.git:hover{
  fill:#fff;
  background: #000;
  border-color: #000 !important;
}


/* CONTACT */
#contactMe .sectionHeader{
  border-left-color: rgba(255, 255, 255, 0.4);
}
#contactMe{
  display:flex;
  min-height: 500px;
}
#contactMe .left{
  background: #768ef8;
  width: 45%;
  color: #fff;
  padding: 50px;
  display:flex;
  flex-direction: column;
  position: relative;
}
#contactMe p{
  margin-top: 30px;
  opacity: 0.6;
}
#contactMe .left::after{
  content:"";
  position: absolute;
  top:45%;
  right:-50px;
  border:25px solid transparent;
  border-left-color: #768ef8;
}
#contactMe .right{
  padding: 50px;
  display:flex;
  flex-direction: column;
  background: rgba(18, 18, 48, 0.6);
  flex-grow: 1;
}
#contactMe input, #contactMe textarea{
  display: inline-block;
  margin-bottom: 25px;
  padding: 17px;
  border: 1px solid #fff;
  color: #fff;
  background: none;
  width:100%;
  font-size: 1em;
  outline: none;
}
#contactMe input:focus, #contactMe textarea:focus{
  border-color: #8fa3ff;
}
#contactMe textarea{
  flex-grow: 1;
  resize:vertical;
  margin-bottom: 35px;
}
#contactMe input::placeholder, #contactMe textarea::placeholder{
  color: rgba(255, 255, 255, 0.5);
}


/* BOTTOM SECTION */
#backtoTop{
  display: block;
  background: #fff;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: all linear 0.3s;
}

#backtoTop svg{
  width: 50px;
  height:50px;
}
#backtoTop:hover{
  background: #000;
  fill:#fff;
}
#footerMenu{
  background: #454088;
  padding: 25px;
  text-align: center;
  padding-bottom: 30px;
}
#footerMenu a, #footerMenu span{
  color:#fff;
  min-width:12%;
  cursor: pointer;
}
footer{
  background: #2b325e;
  color: #a8b4e7;
  padding: 30px;
  text-align: center;
  font-size: 0.95em;
}


.holder,.portProjects{
  text-align: center;
  font-size: 2em;
  margin-top:15%;
  color: #8b93b6;
}