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

html{
  font-size: 10px;
  font-family: 'Roboto', sans-serif;
  color: #eee;
}

body{
  width: 100%;
  height: 100%;
  background-color: #2A1B3D;
  /* background: url('images/art-background.jpg') no-repeat center;
  background-size: cover; */
}

section{
  padding: 6rem 0;
}

a{
  text-decoration: none;
  color: #eee;
}

h5{
  letter-spacing: 1px;
}

p{
  font-size: 1.8rem;
  font-weight: 300;
  letter-spacing: 0.5px;
  line-height: 180%;
}

img{
  width: 100%;
}

/* -- Reusable -- */
.container{
  width: 90%;
  max-width: 120rem;
  height: 100%;
  margin: 0 auto;
  position: relative;
  /* border: 1px solid red; */
}

.section-heading{
  text-align: center;
  margin-bottom: 10rem;
}

.section-heading h1{
  font-size: 3.5rem;
  color: rbga(255,255,255,0.3);
  text-transform: uppercase;
  font-weight: 300;
  position: relative;
  margin-bottom: 1rem;
  padding: 1rem 0;
}

/* line and dot between section heading */
.section-heading h1::before,
.section-heading h1::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  bottom: -0.5rem;
  background-color: rgba(255,255,255,0.75);
}
/* line size */
.section-heading h1::before{
  width: 10rem;
  height: 3px;
  border-radius: 0.8rem;
}

/* dot size */
/* .section-heading h1::after{
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 100%;
  bottom: -1.1rem;
} */

.section-heading h5{
  font-size: 1.6rem;
  font-weight: 300;
  padding: 1rem 0;
}

.margin-right{
  margin-right: 5rem;
}

/* -- Header -- */
header{
  width: 100%;
  height: 100vh;
}

/* A Cubic Bezier curve is defined by four points P0, P1, P2, and P3. P0 and P3 are the start and the end of the curve and, in CSS these points are fixed as the coordinates are ratios. P0 is (0, 0) and represents the initial time and the initial state, P3 is (1, 1) and represents the final time and the final state. */

/* top: -100vh; is for hiding the top nav*/
.top-nav{
  width: 100%;
  height: 100vh;
  position: fixed;
  top: -100vh;
  z-index: 100;
  background-color: #07071a;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  transition: all 650ms cubic-bezier(1,0,0,1);
}

.nav-list{
  list-style: none;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

li{
  margin: 0 2rem;
}

.nav-link{
  font-family: 'Pattaya', sans-serif;
  font-size: 5rem;
  padding: 1rem;
}

/* This is a non-standardized property, but it was invented to do jknockout text. Can pair it with -webkit-text-fill-color: transparent; so that you're only "hiding" the text in a browser that can do the clipping. */
.nav-link:hover,
.nav-link:focus{
  background: linear-gradient(#ffe838, #fd57bf);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

.top-nav.open{
  top: 0;
  border-radius: initial;
}

/* hamburger nemu bars */
.menu-toggler{
  position: absolute;
  top: 5rem;
  right: 5rem;
  width:5rem;
  height: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  z-index: 999;
  transition: transform 650ms ease-out;
}

.menu-toggler.open{
  transform: rotate(-45deg);
}

.bar{
  background: linear-gradient(to right, #ffe838, #ef4f91);
  width: 100%;
  height: 4px;
  border-radius: 0.8rem;
}

.bar.half{
  width: 50%;
}

.bar.start{
  transform-origin: right;
  transition: transform 650ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
}

.bar.end{
  align-self: flex-end;
  transform-origin: left;
  transition: transform 650ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
}

/* the bar will be rotated 5 times (90deg*5=450) when got clicked */
.open .bar.start{
  transform: rotate(-450deg) translateX(0.8rem);
}

.open .bar.end{
  transform: rotate(-450deg) translateX(-0.8rem);
}

.landing-text{
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 1;
}

.landing-text h1{
  font-size: 18rem;
  font-family: 'Pattaya', sans-serif;
  background: linear-gradient(#feb602, #ef4f91);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  user-select: none;
}

.landing-text h5{
  font-size: 2.5rem;
  font-weight: 300;
  letter-spacing: 4px;
  text-transform: uppercase;
}

/* -- About -- */
.about .container{
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-heading{
  text-align: center;
  text-transform: uppercase;
  line-height: 0;
  margin-bottom: 7rem;
}

.about-heading h1{
  font-size: 10rem;
  opacity: 0.3;
}

.about-heading h5{
  font-size: 2rem;
  font-weight: 300;
}

.profile-img{
  flex: 1;
  margin-right: 5rem;
}

.about-details{
  flex: 1;
}

.social-media{
  margin-top: 5rem;
}

.social-media i{
  font-size: 4rem;
  transition: color 650ms;
}

.fa-github-square:hover{
  color: #b0b0b03a;
  
}

.fa-linkedin:hover{
  color: #4875b4;
}

/* -- Skills -- */
/* Using repeat function that is a functional notation that defines a size range greater than or equal to min and less than or equal to max. If max is smaller than min, then max is ignored and the function is treated as min. Using this, we don't have to use media query as it's already responsive. */
.my-skills{
  margin-top: 10rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  grid-gap: 2.5rem;
  text-align: center;
}

.skill{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.skill h1{
  text-transform: uppercase;
  margin: 2rem -2px 2rem 0;
  letter-spacing: 2px;
}

.icon-container{
  width: 8rem;
  height: 8rem;
  border: 3px solid #ffe838;
  background-color: #fd57bf;
  margin-bottom: 2rem;
  transform: rotate(45deg);
  display: flex;
}

.icon-container i{
  color: #ffe838;
  font-size: 5rem;
  margin: auto;
  transform: rotate(-45deg);
}
/* -- Portfoilo -- */
.portfolio-item{
  display: flex;
  text-align: center;
  justify-content: center;
  margin-bottom: 8rem;
}

.portfolio-item:last-child{
  margin-bottom: 0;
}

.portfolio-img{
  flex: 1;
}

.portfolio-description{
  flex: 1;
}

.portfolio-description h1{
  font-size: 2.9rem;
  font-weight: 300;
  margin: 1rem 0;
}

.portfolio-description h5{
  text-transform: uppercase;
  font-size: 1.5rem;
  font-weight: 300;
  opacity: 0.4;
}

.portfolio-description .utilized{
  margin-top: 2rem;
}

.portfolio-description .cta{
  display: inline-block;
  margin-top: 2.5rem;
  font-size: 1.6rem;
  color: #ffe838;
}

.portfolio-description .cta:hover{
  padding: 0.5rem 1rem;
}
/* -- Experience -- */
.timeline ul{
  border-left: 4px solid #ffe838;
  position: relative;
  margin: 0 auto;
  text-align: left;
  padding: 5rem;
  list-style: none;
  width: 70%;
}

.timeline h1{
  font-size: 2rem;
  text-transform: uppercase;
  font-weight: 300;
  margin-bottom: 2rem;
  opacity: 0.7;
}

.timeline h5{
  font-size: 1.5rem;
  text-transform: uppercase;
  font-weight: 300;
  margin-bottom: 1rem;
  opacity: 0.3;
}

.timeline .date{
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  position: relative;
}

.timeline .date:last-of-type{
  border: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.timeline .date::before,
.timeline .date::after{
  position: absolute;
  display: block;
  top: 50%;
  transform: translateY(-50%);
}

.timeline .date::before{
  content: attr(data-date);
  left: -22rem;
  text-align: right;
  min-width: 12rem;
  font-size: 1.5rem;
}

.timeline .date::after{
  content: "";
  box-shadow: 0 0 0 4px #fd57bf;
  border-radius: 100%;
  height: 1.5rem;
  width: 1.5rem;
  left: -8rem;
  background-color: #11113c;
}

/* -- Contact -- */
form{
  width: 70%;
  margin: 0 auto;
}

form label{
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

input,
select,
textarea{
  width: 100%;
  padding: 1rem;
  margin: 5px 0 20px 0;
  outline-color:#fd57bf;
  border: none;
  border-radius: 0.3rem;
}

input[type='submit']{
  width: initial;
  padding: 1rem 2.5rem;
  font-size: 1.6rem;
  border-radius: 0.8rem;
  background-color: #fd57bf;
  color: #ffe838;
  cursor: pointer;
  transition: background-color 650ms;
}

input[type='submit']:hover{
  color: #fd57bf;
  background-color: #ffe838;
}

/* -- Footer -- */
.copyright{
  width: 100%;
  text-align: center;
  background-color: #07071a;
  padding: 2rem 0;
  position: relative;
}

.up{
  position: absolute;
  width: 5rem;
  height: 5rem;
  background-color: #eee;
  top: -2.5rem;
  right: 5rem;
  border-radius: 100%;
  display: flex;
  cursor: pointer;
  animation: pulse 2s infinite;
}

.up i{
  color: #16162d;
  font-size: 2rem;
  margin: auto;
}

.copyright p{
  font-size: 1.4rem;
}

/* -- Animation -- */
@keyframes pulse{
  0%{
    box-shadow: 0 0 0 0 rgba(253, 87, 191, 0.99);
  }
  70%{
    box-shadow: 0 0 0 2rem rgba(253, 87, 191, 0);
  }
  100%{
    box-shadow: 0 0 0 0 rgba(253, 87, 191, 0);
  }
}

/* === Media Query Tablet Version === */
@media screen and (max-width: 768px) {

  .landing-text h1{
    font-size: 15rem;
  }

  .landing-text h5{
    font-size: 1.7rem;
  }

  /* nav list cover */
  .nav-list{
    flex-direction: column;
  }

  li{
    margin: 2rem 0;
  }

  .nav-link{
    font-size: 4.5rem;
  }

  /* About */
  .about-heading h1{
    font-size: 8rem;
  }

  .section-heading h1{
    font-size: 3rem;
  }

  /* Social Media */
  .about-details .nav-list{
    flex-direction: initial;
  }

  .about-details li{
    margin: 0 2rem;
  }

  .social-media i{
    font-size: 3.5rem;
  }

  /* Services */
  .icon-container{
    width: 7rem;
    height: 7rem;
  }

  .icon-container i{
    font-size: 3.5rem;
  }

  /* Experience */
  .timeline ul{
    margin: 0 0 0 auto;
  }

  .timeline .date::before{
    left: -20rem;
  }

  .timeline .date::after{
    left: -5.9rem;
  }
}


/* === Media Query Mobile Version === */
@media screen and (max-width: 600px) {
  
  .menu-toggler{
    top: 2rem;
    right: 2rem;
  }

  .landing-text h1{
    font-size: 8rem;
  }

  .landing-text h5{
    font-size: 1.4rem;
  }

  .nav-link{
    font: 3.5rem;
  }

  /* About */
  .about .container{
    flex-direction: column;
  }

  .profile-img{
    margin: 0 0 7rem 0;
  }

  .portfolio-item{
    flex-direction: column;
  }

  .portfolio-img{
    margin: 0 0 2rem 0;
    order: 1;
  }

  .portfolio-description{
    margin: 0;
    order: 2;
  }

  .timeline ul{
    width: 60%;
    padding: 2rem;
  }

  .timeline p{
    font-size: 1.6rem;
  }

  .timeline .date::before{
    font-size: 1.5rem;
    left: -18rem;
  }

  .timeline .date::after{
    left: -3rem;
  }

  form{
    width: 100%;
  }

  .up{
    right: 2rem;
  }
}