@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html{
  font-family: 'Montserrat', sans-serif;
  font-weight: 0.400;
  background-color: var(--black-color);
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body{
  margin: 0;
}

:root{
  --main-color: #F7C873;
  --light-color: #FAEBCD;
  --white-color: #F8F8F8;
  --black-color: #1A1A1A;
  --softblack-color: #242120;
}

a{
  text-decoration: none;
}

/* Scroll Bar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--softblack-color); 
}
::-webkit-scrollbar-thumb {
  background: var(--white-color); 
}
::-webkit-scrollbar-thumb:hover {
  background: var(--main-color);
}
/* Scroll Bar */

/* Nav Bar */
li{
  list-style: none;
}
header{
  position: fixed;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  padding: 0.2rem;
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: var(--black-color);
}
.navbar{
  width: 100%;
  height: 60px;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbar .logo a{
  color: var(--white-color);
  font-size: 1.5rem;
  font-weight: 600;
}
.navbar .links{
  display: flex;
  gap: 2rem;
}
.navbar .resicon{
  color: var(--white-color);
  font-size: 1.5rem;
  cursor: pointer;
  display: none;
}
.links li a{
  color: var(--white-color);
  font-size: 1rem;
}
.links li a:hover{
  color: var(--main-color);
}
.navbar > .resicon{
  color: var(--white-color);
  font-size: 1.5rem;
  cursor: pointer;
  display: none;
}
.accordion{
  display: none;
  position: absolute;
  right: 2rem;
  z-index: 1;
  top: 60px;
  width: 250px;
  height: 0;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  border-radius: 10px;
  overflow: hidden;
  transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.accordion.open{
  height: 167px;
}
.accordion li{
  padding: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.accordion li a{
  color: var(--white-color);
  font-size: 1rem;
}
.accordion li a:hover{
  color: var(--main-color);
}
/* Nav Bar */

/* Home */
.home{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.center{
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 100vh;
}
h2{
  font-size: 3rem;
  font-weight: 400;
  color: var(--white-color);
}
.text .head{
  color: var(--white-color);
  font-weight: 600;
  font-size: 3rem;
}
.hidden-text{
  font-size: 3rem;
  font-weight: 600;
  color: var(--main-color);
  animation: ani 6s infinite;
}
.button{
  padding-top: 25px;
  gap: 25px;
  display: flex;
  flex-direction: row;
}
.btn1{
  color: var(--white-color);
  border: 1px solid var(--white-color);
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 25px;
  padding-left: 25px;
  border-radius: 25px;
}
.btn1:hover{
  color: var(--white-color);
  border: 1px solid var(--main-color);
  background-color: var(--main-color);
}
.btn2{
  border-radius: 25px;
  color: var(--main-color);
  border: 1px solid var(--white-color);
  background-color: var(--white-color);
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 25px;
  padding-left: 25px;
}
.btn2:hover{
  color: var(--white-color);
  border: 1px solid var(--main-color);
  background-color: var(--main-color);
}
@keyframes ani{
  0%{
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}
/* Home */

/* About Me */
.aboutme{
  align-items: center;
  justify-content: center;
}
.card{
  display: flex;
  float: center;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: center;
  margin: 0 auto;
  background-color: var(--softblack-color);
  padding-left: 50px;
  padding-right: 50px;
  gap: 20px;
}
.about h2{
  font-weight: 800;
}
.skill-bar h3{
  font-weight: 700;
  font-size: 1rem;
  color: var(--white-color);
}
.bar{
  background: var(--black-color);
  border-radius: 20px;
  overflow: hidden;
  height: 5px;
  display: block;
  box-shadow:  0 0.5px 1.5px #161616, 0 0.5px 1px #1e1e1e;
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.bar:hover{
  box-shadow:  0 7px 14px rgba(22, 22, 22, 1.13), 0 5px 5px rgba(30, 30, 30, 0);
}
.bar span{
  height: 5px;
  border-radius: 20px;
  float: left;
  background: var(--main-color);
}
.html{
  width: 75%;
  animation: html 6s;
}
.css{
  width: 70%;
  animation: css 6s;
}
.js{
  width: 45%;
  animation: js 6s;
}
.ps{
  width: 85%;
  animation: ps 6s;
}
@keyframes html {
  0%{
    width: 0%;
  }
  100%{
    width: 75%;
  }
}
@keyframes css {
  0%{
    width: 0%;
  }
  100%{
    width: 70%;
  }
}
@keyframes js {
  0%{
    width: 0%;
  }
  100%{
    width: 45%;
  }
}
@keyframes ps {
  0%{
    width: 0%;
  }
  100%{
    width: 85%;
  }
}
.who{
  display: flex;
  flex-direction: column;
}
.foto .normal{
  width: 100%;
  max-width: 720px;
  height: auto;
}
.foto .medium{
  width: 100%;
  max-width: 400px;
  height: auto;
}
.foto .small{
  width: 100%;
  max-width: 400px;
  height: auto;
}
.who-text h6{
  font-weight: 400;
  margin: 0;
  padding-bottom: 5px;
  font-size: 1rem;
  color: var(--white-color);
}
.batas{
  display: flex;
}
.who-text h4{
  margin: 0;
  font-weight: 600;
  color: var(--white-color);
  box-sizing: border-box;
  background-color: var(--main-color);
  padding: 5px;
  font-size: 1.7rem;
  display: inline-block;
}
.who-text h5{
  margin: 0;
  padding-top: 30px;
  font-weight: 700;
  color: var(--white-color);
  font-size: 1rem;
}
.who-text p{
  margin: 0;
  padding-top: 5px;
  padding-bottom: 50px;
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--white-color);
}
.socialmedia{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}
.socialmedia span{
  color: var(--main-color);
  font-weight: 400;
  font-size: 0.7rem;
}
.socialmedia a{
  color: var(--white-color);
}
.socialmedia a:hover{
  color: var(--main-color);
}
/* About Me */

/* Portofolio */
.porto{
  padding-left: 50px;
  padding-top: 100px;
  padding-right: 50px;
  padding-bottom: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* justify-items: center; */
  /* align-content: center; */
}
.porto h2{
  color: var(--white-color);
  font-weight: 800;
}
.gall-con{
  gap: 30px;
  display: flex;
  flex-direction: row;
}
.gallery{
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 30%;
}
.porto .gall-con .gallery img{
  width: 100%;
  border-radius: 5px;
}
.btn-gall{
  padding: 40px;
}
.btn-gall a{
  display: none;
  color: var(--white-color);
  border-radius: 20px;
  border: 1px solid var(--white-color);
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 20px;
  padding-left: 20px;
}
.btn-gall a:hover{
  color: var(--white-color);
  background-color: var(--main-color);
  border: 1px solid var(--main-color);
}
/* Portofolio */

/* Contact */
.contact{
  padding: 50px;
  padding-bottom: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--softblack-color);
}
.contact h2{
  color: var(--white-color);
  font-weight: 800;
}
.contact-con{
  gap: 25px;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;
}
.rescontact{
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* width: 400px; */
}
.con-text{
  width: 100%;
}
.con-text h6{
  margin-bottom: 0;
  font-weight: 500;
  font-size: 0.7rem;
  color: var(--main-color);
}
.con-text span{
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--white-color);
  padding-bottom: 1rem;
}
input{
  background-color: var(--black-color);
  padding: 10px;
  border: none;
  border-radius: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--white-color);
}
textarea{
  background-color: var(--black-color);
  padding: 10px;
  border: none;
  border-radius: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--white-color);
}
form button{
  background-color: var(--main-color);
  color: var(--white-color);
  margin-top: 5px;
  padding: 15px;
  border-radius: 30px;
  border: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
}
form button:hover{
  background-color: var(--white-color);
  color: var(--main-color);
}
/* Contact */

/* footer */
footer {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  left: 0px;
  right: 0px;
  background-color: var(--black-color);
}
footer span{
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--white-color);
  padding-top: 40px;
  padding-bottom: 20px;
}
footer p{
  color: var(--white-color);
  font-weight: 500;
  font-size: 0.8rem;
  padding-bottom: 40px;
}
.socia-foot{
  display: flex;
  flex-direction: row;
  gap: 20px;
}
.socia-foot a{
  font-size: 1rem;
  background-color: var(--softblack-color);
  padding: 10px;
  border-radius: 10px;
  color: var(--main-color);
}
.socia-foot a:hover{
  color: var(--white-color);
  background-color: var(--main-color);
  transform: bac;
}
@media print{
  footer{
    display: block;
    position: absolute;
    bottom: 0;
  }
}
/* footer */

/* Web Animation */
.hidden{
  opacity: 0;
  filter: blur(5px);
  transform: translateY(-100%);
  transition: all 2s;
}
.show{
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
.hidden-right{
  opacity: 0;
  filter: blur(5px);
  transform: translateX(-100%);
  transition: all 1s;
}
.show-right{
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}
@media(prefers-reduce-motion){
  .hidden{
    transition: none;
  }
  .hidden-right{
    transition: none;
  }
}
/* Web Animation */

/* responsive section */
@media(min-width: 992px){
  .normal{
    display: unset;
  }
  .medium{
    display: none;
  }
  .small{
    display: none;
  }
  .socialmedia{
    padding-bottom: 0;
  }
  .skill-bar{
    width: 450px;
  }
  .porto .gall-con .gallery{
    width: 100%;
  }
  .contact .contact-con .rescontact{
    width: 400px;
  }
}
@media(max-width: 992px){
  .navbar .links{
    display: none;
  }
  .navbar > .resicon{
    display: block;
  }
  .accordion{
    display: block;
  }
  .card{
    flex-direction: column;
    align-items: unset;
  }
  .socialmedia{
    padding-bottom: 50px;
  }
  .normal{
    display: none;
  }
  .medium{
    display: unset;
  }
  .small{
    display: none;
  }
  .contact .contact-con .rescontact{
    width: 300px;
  }
}
@media(max-width: 690px){
  .contact .contact-con .rescontact{
    width: 250px;
  }
}
@media(max-width: 576px){
  .accordion{
    left: 2rem;
    width: unset;
  }
  .normal{
    display: none;
  }
  .small{
    display: unset;
  }
  .medium{
    display: none;
  }
  .hide-gall{
    display: none;
  }
  .porto .gall-con .gallery{
    width: unset;
    /* height: auto; */
  }
  .btn-gall a{
    display: unset;
  }
  .contact-con{
    flex-direction: column;
  }
  .contact .contact-con .rescontact{
    width: 300px;
  }
}
@media(max-width: 342px){
  .contact .contact-con .rescontact{
    width: 250px;
  }
}
/* responsive section */