:root {
   --primary-color: #C778DD;
   --backgrounf-color: #282C33;
   --gray-color: #ABB2BF;
   --white-color: #ffffff;
   font-family: 'Fira Code', monospace;
 }

 html {
   scroll-padding-top: 100px;
   scroll-behavior: smooth;
 }

body {
   margin: 0 auto;
   padding: 0 20px;
   max-width: 1024px;
   justify-content: center;
   background-color: var(--backgrounf-color);
   color: var(--white-color);
}

/* navbar */
#navbar {
   padding-block: 0 !important;
   position: sticky;
   top: 0;
   z-index: 99;
   background-color: var(--backgrounf-color);
}

.nav-menu {
   display: flex;
   justify-content: space-between;
}

.nav-menu .nav-menu-list {
   width: 500px;
   display: flex;
   justify-content: space-between;
   margin: 30px 0;
}

.nav-menu .nav-menu-list li {
   list-style: none;
}

.nav-menu .nav-menu-list a{
   text-decoration: none;
   color: var(--white-color);
}

.nav-menu .nav-menu-list a:hover{
   opacity: 60%;
}

.nav-menu .nav-menu-list a > span{
   color: var(--primary-color);
}

@media screen and (max-width: 600px) {
   .nav-menu .nav-menu-list {
      display: none;
      flex-direction: column;
      width: 100%;
      text-align: center;
      position: absolute;
      top: 50px;
      left: 0;
      background-color: var(--backgrounf-color);
   }

   .nav-menu .nav-menu-list li {
      text-align: start;
      border-bottom: solid 1px var(--gray-color);
      min-height: 44px;
   }   

   .nav-menu .nav-menu-list li a{
      width: 100%;
      display: flex;
      align-items: center;
      min-height: 60px;
   }

   .nav-menu .nav-menu-list.show {
      display: flex;
      align-content: center;
      padding: 0;
      margin: 0;
      transition: all 300ms ease;
   }

   .menu-icon {
      display: block;
      cursor: pointer;
      padding: 24px 14px;
   }

   .menu-icon span {
      display: block;
      width: 25px;
      height: 1px;
      margin: 5px 0;
      background-color: var(--white-color);
      transition: 0.3s;
   }

   .menu-icon.active span:nth-child(1) {
      transform: rotate(-45deg) translate(-5px, 4px);
    }

    .menu-icon.active span:nth-child(2) {
      opacity: 0;
    }

    .menu-icon.active span:nth-child(3) {
      transform: rotate(45deg) translate(-5px, -4px);
    }

    .nav-menu .nav-menu-list a {
      padding: 0;
    }
}

/* navbar end */

/* section header */
.section-header{
   display: flex;
   justify-content: space-between;
   margin-top: 20px;
   align-items: center;
   height: 500px;
   margin-bottom: 100px;
}

.section-header .section-header-desc {
   max-width: 800px;
}

.section-header .section-header-desc h1 {
   font-size: 32px;
   font-weight: 600;
}

.section-header .section-header-desc h1 > span {
   color: var(--primary-color);
}

.section-header .section-header-desc > p {
   color: var(--gray-color)
}


.section-header-desc .section-header-sosmed > a {
   color: var(--white-color);
   font-size: 20px;
}

.section-header-desc .section-header-sosmed > a:hover{
   color: var(--primary-color);
}

.section-header-desc .section-header-readmore{
   border: solid 1px var(--primary-color);
   display: flex;
   justify-content: center;
   width: 200px;
   margin-top: 20px;
}

.section-header-desc .section-header-readmore > a {
   color: var(--white-color);
   font-size: 15px;
   text-decoration: none;
   padding: 10px;
}

.section-header-desc .section-header-readmore:hover{
   background-color: var(--primary-color);
}

.section-header-desc .section-header-readmore > a:hover {
   color: var(--backgrounf-color);
}

.section-header .section-header-pict{
   max-width: 469px;
}

.section-header .section-header-pict > img{
   width: 100%;
   border-radius: 500px;
}

@media screen and (max-width: 600px) {
   .section-header {
      margin-top: 200px;
      flex-direction: column-reverse;
   }
}

@media screen and (max-width: 420px) {
   .section-header {
      margin-top: 120px;
   }
}
/* section header end */

/* section project */
.section-project-title {
   display: flex;
   align-items: center;
   margin-bottom: 30px;
}

.section-project-title h2 > span {
   color: var(--primary-color);
}

.section-project-title > h2 {
   font-weight: 500;
}

.section-project-title .line {
   background-color: var(--primary-color);
   margin-left: 12px;
   width: 50%;
   height: 1px;
}

.section-project-list {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 10px;
}

.section-project-card {
   border: solid 1px var(--gray-color);
   max-width: 320px;
   margin: 0 auto;
}

.section-project-list .card-img > img
{
   width: 100%;
   height: 154px;
}

.section-project-card > .card-tech{
   border-bottom: solid 1px var(--gray-color);
   padding: 10px 20px;
}

.section-project-card .card-tech > img{
   width: 20px;
   color: #47A248;
}

.section-project-card .card-info {
   padding: 0 20px;
}

.section-project-card .card-info .card-title > h3 {
   font-size: 24px;
   font-weight: 500;
   margin: 9px 0;
}

.section-project-card .card-info .card-detail > p {
   font-size: 16px;
   color: var(--gray-color);
   margin: 10px 0;
}

.section-project-card .card-info .card-button {
   border: solid 1px var(--primary-color);
   display: flex;
   justify-content: center;
   width: 100px;
   margin-bottom: 10px;
}

.section-project-card .card-info .card-button > a {
   color: var(--white-color);
   font-size: 16px;
   text-decoration: none;
   padding: 5px 0;
}

.section-project-card .card-info .card-button:hover {
   background-color: var(--primary-color);
}

.section-project-card .card-info .card-button > a:hover{
   color: var(--backgrounf-color);
}

@media screen and (max-width: 786px) {
   .section-project-list {
      grid-template-columns: 1fr 1fr;
      gap: 30px 10px;
   }
}

@media screen and (max-width: 530px) {
   .section-project-list {
      grid-template-columns: 1fr;
   }
}
/* section project end */

/* section skill */
.section-skill {
   margin-top: 100px;
}

.section-skill-title {
   display: flex;
   align-items: center;
   margin-bottom: 30px;
}

.section-skill-title h2 > span {
   color: var(--primary-color);
}

.section-skill-title > h2 {
   font-weight: 500;
}

.section-skill-title .line {
   background-color: var(--primary-color);
   margin-left: 12px;
   width: 40%;
   height: 1px;
}

.section-skill-list .section-skill-item {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 50px 20px;
   align-items: center;
   justify-content: center;
}

.section-skill-list .section-skill-item > img{
   width: 60px;
   transition: transform 0.3s ease;
   margin: 0 auto;
}

.section-skill-list .section-skill-item > img:hover{
   transform: scale(1.2)
}

@media screen and (max-width: 687px) {
   .section-skill-list .section-skill-item {
      grid-template-columns: repeat(5, 1fr);
   }
}

@media screen and (max-width: 500px) {
   .section-skill-list .section-skill-item {
      grid-template-columns: repeat(4, 1fr);
   }
}

@media screen and (max-width: 386px) {
   .section-skill-list .section-skill-item {
      grid-template-columns: repeat(3, 1fr);
   }
}
/* section skill end */

/* section about */
.section-about {
   margin-top: 100px;
}

.section-about-title {
   display: flex;
   align-items: center;
   margin-bottom: 10px;
}

.section-about-title h2 > span {
   color: var(--primary-color);
}

.section-about-title > h2 {
   font-weight: 500;
}

.section-about-title .line {
   background-color: var(--primary-color);
   margin-left: 12px;
   width: 40%;
   height: 1px;
}

.section-about .section-about-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.section-about .section-about-desc {
   max-width: 500px;
}

.section-about .section-about-desc p {
   color: var(--gray-color);
   line-height: 1.8;
}

.section-about-container .code > img{
   max-width: 350px;
}

@media screen and (max-width: 776px) {
   .section-about .section-about-container {
      flex-direction: column-reverse;
   }

   .section-about .section-about-desc {
      padding-left: 15px;
   }
}

@media screen and (max-width: 360px) {
   .section-about-container .code > img{
      display: none;
   }
}
/* section about end */

/* section contact */
.section-contact {
   margin-top: 100px;
}

.section-contact-title {
   display: flex;
   align-items: center;
}

.section-contact-title h2 > span {
   color: var(--primary-color);
}

.section-contact-title > h2 {
   font-weight: 500;
}

.section-contact-title .line {
   background-color: var(--primary-color);
   margin-left: 12px;
   width: 50%;
   height: 1px;
}

.section-contact-info {
   margin-top: 10px;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.section-contact-info .contact-desc {
   max-width: 40%;
}

.section-contact-info .contact-desc > p {
   font-size: 16px;
   color: var(--gray-color);
}

.section-contact-info .contact-message {
   border: solid 1px var(--gray-color);
   padding: 0 20px;
}

.section-contact-info .contact-message p {
   color: var(--gray-color);
   text-wrap: wrap;
}

@media screen and (max-width: 700px) {
   .section-contact-info {
      flex-direction: column;
   }

   .section-contact-info .contact-message {
      width: 100%;
   }
   .section-contact-info .contact-desc {
      max-width: 100%;
   }
}
/* section contact end */

/* footer */
footer{
   margin-top: 100px;
   border-top: solid 1px var(--primary-color);
   padding: 20px 0;
}

footer .footer-info {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

footer .footer-info .footer-info-desc > h4 {
   font-size: 16px;
   margin-bottom: -8px;
}

footer .footer-info .footer-info-sosmed > a {
   font-size: 24px;
   text-decoration: none;
   color: var(--gray-color);
}

footer .footer-info .footer-info-sosmed > a:hover {
   color: var(--white-color);
}

footer .footer-bottom > p{
   text-align: center;
   font-size: 16px;
   color: var(--gray-color);
}
/* footer end */