*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
   --base: #555;
   --base-100: #f1f1f1;
   --base-800: #000;
   --yellow: #ffda4b;
   --yellow-100: #fffbe6;
   --yellow-400: #ffda4b;
   --yellow-800: #8b6f00;
   --blue: #0a61ae;
   --blue-100: #e2f8ff;
   --blue-400: #61dafb;
   --blue-800: #0a61ae;
   --lemon-green: #71C946;
   --blue-cyan: #A4C8E1;
   --dark-blue: #002C58;
   --orange-yellow: #F8BD2D;
}

body {
   font-family: "Roboto", sans-serif;
   font-optical-sizing: auto;
   font-style: normal;
   font-size: 20px;
}

a {
   text-decoration: none;
   color: var(--blue);
   &:hover {
      text-decoration: underline;
   }
}

header {
   position: sticky;
   top: 0;
   z-index: 1000;
   background-color: white;
   padding-top: 10px;
   padding-bottom:10px;
   display: flex;
   max-width: 1441px;
   justify-content: space-between;
   margin: auto;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   .logo-holder {
      display: flex;
      padding: 10px;
      align-items: center;
      font-weight: 600;
      color: var(--base-800);
      .logo {
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 32px;
         background-color: var(--blue-cyan);
         color: var(--base-100);
         height: 64px;
         width: 64px;
         margin-right: 20px;
         border-radius: 50%;
         transition: background-color 0.5s ease-in-out;
      }
      .logo-text {
         flex: 1;
         transition: opacity 0.5s ease-in-out;
      }
      .fade-out {
         opacity: 0;
      }
   }

   nav {
      display: flex;
      align-items: center;
      ul {
         display: flex;
         list-style-type: none;
         gap: 5px;
         li {
            display: inline-block;
            a {
               display: inline-block;
               padding: 10px 20px;
               color: var(--base);
               &:hover {
                  background-color: var(--base-100);
                  border-radius: 10px;
                  text-decoration: none;
               }
            }
         }
      }
      .mobile-toggle {
         display: none;
         color: var(--base-800);
         padding: 10px;;
         @media (max-width: 768px) {
            display: inline-block;
            position: absolute;
            top: 20px;
            right: 20px;
         }
      }
   }

   @media (max-width: 1024px) {
      flex-direction: column;
      align-items: center;
      position: relative;
   }

   @media (max-width: 768px) {
      flex-direction: column;
      align-items: center;
      position: relative;
      
      nav {
         margin-top: 10px;
         width: 100%;
         ul {
            display: none;
            flex-direction: column;
            text-align: center;
            width: 100%;
            a {
               width: 100%;
            }
            &.active {
               display: flex;
            }
         }
      }
   }
}

h1 {
   font-size: 64px;
   line-height: 1;
   margin-bottom: 10px;
   small {
      display: block;
      font-weight: 100;
   }

   @media (max-width: 1024px) {
      font-size: 48px;
   }
}

h2 {
   font-size: 64px;
   line-height: 1;
   margin-bottom: 10px;
   text-align: center;
   color: var(--base-800);
   padding: 30px;
   small {
      display: block;
      font-weight: 100;
      font-size: 0.5em;
      color: var(--base);
   }
}

h3 {
   font-size: 32px;
   font-weight: 600;
   line-height: 1;
   margin-bottom: 20px;
   color: var(--base-800);
}

.container {
   max-width: 1440px;
   margin: auto;
   gap: 30px;
   margin-top: 30px;
   margin-bottom: 30px;

   @media (max-width: 1440px) {
      padding-left: 30px;
      padding-right: 30px;
   }
}

.button {
   display: inline-block;
   padding: 10px 20px;
   background-color: var(--blue-cyan);
   color: var(--base-100);
   border-radius: 10px;
   transition: ease 0.3s all;
   &:hover {
      text-decoration: none;
      background-color: var(--base-800);
      color: var(--base);
   }

   &.white {
      background-color: white;
      color: var(--base-800);
      &:hover {
         background-color: var(--blue-cyan);
         color: var(--base);
      }
   }

   &.black {
      background-color: black;
      color: white;
      &:hover {
         background-color: var(--base);
      }
   }
}

.putra {
   display: flex;
   @media (max-width: 1024px) {
      flex-direction: column;
   }
   .putra-info {
      flex: 1;
      background-color: var(--base-100);
      border-radius: 30px;
      padding: 30px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: justify;
      span {
         @media (max-width: 1024px) {
            display: none;
         }
      }
      .call-to-action {
         margin-top: 20px;
         margin-bottom: 10px;
         a {
            margin-right: 10px;
            margin-bottom: 10px;
         }
         .social-links {
            a {
               &:hover {
                  text-decoration: none;
               }
            }
         }
      }
   }
   .putra-image {
      flex: 1;
      align-items: center;
      border-radius: 30px;
      padding: 0px 30px;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      background-color: var(--blue-cyan);
      background-image: url("./images/putras/professional.png");
      background-size: contain;
      background-position: center bottom;
      background-repeat: no-repeat;
      border-radius: 30px;
      transition: background-color 0.5s ease-in-out;
      transition: background-image 0.5s ease-in-out;

      @media (max-width: 1024px) {
         min-height: 450px;
      }      
   }
}

.logos {
   background-color: var(--base-100);
   border-radius: 30px;
   padding: 30px 10px;
   @media (max-width: 1024px) {
      border-radius: 0px;
   }
   .marquee {
      width: 100vw;
      max-width: 100%;
      height: 148px;
      overflow: hidden;
      position: relative;
      .track {
         position: absolute;
         white-space: nowrap;
         will-change: transform;
         animation: marquee 40s linear infinite;
         display: flex;
         gap: 10px;
      }
   }
}

@keyframes marquee {
   0% {
      transform: translateX(0);
   }
   100% {
      transform: translateX(-50%);
   }
}

.skills {
   .holder-putra {
      background-color: var(--base-100);
      border-radius: 30px;
      padding: 30px;
      display: flex;
      @media (max-width: 1024px) {
         flex-direction: column;
      }
      .left-column {
         flex: 1;
         ul {
            list-style-type: none;
            gap: 10px;
            margin-right: 100px;
            margin-bottom: 20px;
            li {
               display: inline-block;
               background-color: var(--blue-cyan);
               padding: 10px 20px;
               border-radius: 15px;
               margin-bottom: 10px;
            }
         }
      }
      .right-column {
         flex: 2;
         h3 {
            text-align: center;
         }
         .holder-timeline {
            box-sizing: border-box;
            h3 {
               text-align: left;
               font-size: 24px;
               @media (max-width: 1024px) {
                  font-size: 20px;
               }
            }
            font-size: 16px;
            @media (max-width: 1024px) {
               font-size: 10px;
            }
            .timeline {
               position: relative;
               margin: 0 auto;
               .container {
                  padding: 0px 40px;
                  position: relative;
                  width: 60%;
                  height: 50%;
                  .content {
                     padding: 10px 30px;
                     background-color: white;
                     position: relative;
                     border-radius: 15px;
                     @media (max-width: 1024px) {
                        padding: 10px 12px;
                     }
                  }
               }
               .left {
                  left: -27%;
               }
               .right {
                  left: 27%;
               }
            }
            .timeline::after {
               content: '';
               position: absolute;
               width: 6px;
               background-color: white;
               top: 0;
               bottom: 0;
               left: 50%;
               margin-left: -3px;
            }
         }
      }
   }
}

.hobbies {
   .hobbies-holder {
      display: flex;
      flex-direction: row;
      gap: 10px;
      @media (max-width: 1024px) {
         flex-direction: column;
      }
      figure {
         width: 100%;
         padding-top: 15%;
         overflow: hidden;
         position: relative;
         border-radius: 15px;
         @media (max-width: 1024px) {
            padding-top: 50%;
         }
         img {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            object-fit: cover;
            transition: ease 3s all;
         }
         figcaption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.5);
            color: var(--base-100);
            text-align: center;
            padding: 10px;
            opacity: 0;
            visibility: hidden;
            transition: ease 0.3s all;
         }
         &:hover {
            figcaption {
               opacity: 1;
               visibility: visible;
            }
            img {
               scale: 1.2;
            }
         }
      }
   }
}

.experience {
   .jobs {
      display: flex;
      gap: 30px;
      img {
         max-height: 512px;
      } 
      @media (max-width: 1024px) {
         flex-direction: column;
      }
      article {
         background-color: var(--base-100);
         padding: 29px;
         border-radius: 30px;
         flex: 1;
         h3 {
            margin-top: 20px;
            margin-bottom: 10px;
         }
         div {
            font-weight: 600;
            margin-bottom: 5px;
            color: var(--base-800);
         }
         p {
            margin-bottom: 10px;
         }
         figure {
            width: 100%;
            padding-top: 56.25%;
            overflow: hidden;
            position: relative;
            border-radius: 15px;
            img {
               position: absolute;
               top: 0;
               left: 0;
               height: 100%;
               object-fit: cover;
               transition: ease 3s all;
            }
            figcaption {
               position: absolute;
               bottom: 0;
               left: 0;
               right: 0;
               background-color: rgba(0, 0, 0, 0.5);
               color: var(--base-100);
               text-align: center;
               padding: 10px;
               opacity: 0;
               visibility: hidden;
               transition: ease 0.3s all;
            }
            &:hover {
               figcaption {
                  opacity: 1;
                  visibility: visible;
               }
               img {
                  scale: 1.2;
               }
            }
         }
      }
   }
}

.bento {
   .bento-grid {
      display: grid;
      grid-gap: 30px;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(4, 1fr);
      height: 960px;
      @media(max-width: 1024px) {
         grid-template-rows: repeat(8, 1fr);
      }
      @media(max-width: 768px) {
         display: flex;
         flex-direction: column;
         gap: 30px;
         height: auto;
      }
      .bento-item {
         padding: 30px;
         background-color: var(--base-100);
         border-radius: 15px;
         position: relative;
         overflow: hidden;
         img {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            object-fit: cover;
            transition: ease 3s all;
         }
         figcaption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.5);
            color: var(--base-100);
            text-align: center;
            padding: 10px;
            opacity: 0;
            visibility: hidden;
            transition: ease 0.3s all;
         }
         &:hover {
            figcaption {
               opacity: 1;
               visibility: visible;
            }
            img {
               scale: 1.2;
            }
         }
         @media(max-width: 768px) {
            height: 240px;
         }
         &:nth-child(1) {
            grid-column: span 2;
            grid-row: span 2;
            @media(max-width: 1024px) {
               grid-column: span 2;
               grid-row: span 2;
            }
         }
         &:nth-child(2) {
            grid-column: span 2;
            grid-row: span 1;
            @media(max-width: 1024px) {
               grid-column: span 3;
               grid-row: span 2;
            }
         }
         &:nth-child(3) {
            grid-column: span 1;
            grid-row: span 1;
            @media(max-width: 1024px) {
               grid-column: span 3;
               grid-row: span 2;
            }
         }
         &:nth-child(4) {
            grid-column: span 1;
            grid-row: span 1;
            @media(max-width: 1024px) {
               grid-column: span 2;
               grid-row: span 4;
            }
         }
         &:nth-child(5) {
            grid-column: span 2;
            grid-row: span 1;
            @media(max-width: 1024px) {
               grid-column: span 3;
               grid-row: span 2;
            }
         }
         &:nth-child(6) {
            grid-column: span 3;
            grid-row: span 2;
            @media(max-width: 1024px) {
               grid-column: span 3;
               grid-row: span 2;
            }
         }
         &:nth-child(7) {
            grid-column: span 2;
            grid-row: span 3;
            @media(max-width: 1024px) {
               grid-column: span 2;
               grid-row: span 2;
            }
         }
      }
   }
}

.credits {
   text-align: center;
}

#skills {
   scroll-margin-top: 100px;
}

#education {
   scroll-margin-top: 100px;
}

#experience {
   scroll-margin-top: 100px;
}

#projects {
   scroll-margin-top: 100px;
}