* {
    box-sizing: border-box;
}

body {
    background-color: #222;
    width: 100%;
    color: #fff;
    font-family: 'Signika';
    margin: 0;
}

#preloader {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgb(75, 75, 75);
    z-index: 10000;
    overflow: hidden;
    display: flex;
}

.preloader-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#path_1 {
    animation: animate1 1s;
}

#path_2 {
    animation: animate2 1.2s;

}

#path_4 {
    animation: animate4 1.4s;
}

#path_5 {
    animation: animate5 1.5s;
}

#path_6 {
    animation: animate6 1.6s;
}

#path_7 {
    animation: animate7 1.8s;
}

#path_8 {
    animation: animate8 2s;
}

#path_9 {
    animation: animate9 2.3s;
}

#path_10 {
    animation: animate10 2.5s;
}

/* All of animation / Keyframe */
@keyframes animate1 {
    0% {
        opacity: 0;
        fill: white;
    }
    100% {
        opacity: 0;
        fill: #6A8ECA;
    }
}

@keyframes animate2 {
    0% {
        opacity: 0;
        fill: white;
    }
    100% {
        opacity: 0;
        fill: #6390CB;
    }
}

@keyframes animate4 {
    0% {
        opacity: 0;
        fill: white;
    }
    100% {
        opacity: 0;
        fill: #4695D4;
    }
}

@keyframes animate5 {
    0% {
        opacity: 0;
        fill: white;
    }
    100% {
        opacity: 0;
        fill: #5992CE;
    }
}

@keyframes animate6 {
    0% {
        opacity: 0;
        fill: white;
    }
    100% {
        opacity: 0;
        fill: #6CCCF6;
    }
}

@keyframes animate7 {
    0% {
        opacity: 0;
        fill: white;
    }
    100% {
        opacity: 0;
        fill: #4895D4;
    }
}

@keyframes animate8 {
    0% {
        opacity: 0;
        fill: white;
    }
    100% {
        opacity: 0;
        fill: #3C4397;
    }
}

@keyframes animate9 {
    0% {
        opacity: 0;
        fill: white;
    }
    100% {
        opacity: 0;
        fill: #4378E5;
    }
}

@keyframes animate10 {
    0% {
        opacity: 0;
        fill: white;
    }
    100% {
        opacity: 0;
        fill: #3B4296;
    }
}

@keyframes reveal {
    0% {
        opacity: 0;
        transform: translateY(100%);
      }
      50% {
        opacity: 0.5;
        transform: translateY(50%);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes contentAnimation {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
}

    #main-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0;
    }

    header {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        padding: 1.3rem 10%;
        background: #222;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
  
      .navbar a {
        color: white;
        font-size: 1.3rem;
        text-decoration: none;
        margin-left: 2.5rem;
      }

      .navbar a:hover {
        color: aqua;
      }
  
      .list {
        font-size: 2.8rem;
        right: 5%;
        color:white;
        cursor: pointer;
        display: none;
      }
  
      #check {
        display: none;
      }

.animate {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.5s ease, transform 1.5s ease;
  }
  
.animate.active {
    opacity: 1;
    transform: translateY(0);
  }

    #content {
        height: 80vh;
        display: flex;
        position: relative;
        align-items: center;
        width: 80%;
        max-width: 1200px;
        padding: 20px 0;
        gap: 50px;
        opacity: 0;
        transform: translateY(20px);
        animation: contentAnimation 7s ease forwards;
    }
    
    #content .text {
        flex: 1;
    }
    
    #content .text h1 {
        font-size: 48px;
        margin-bottom: 20px;
    }
    
    #content .text p {
        font-size: 24px;
        line-height: 1.5;
    }
    
    #About-me {
        background-image: url(img/bg-about.png);
        position: relative;
        width: 100%;
        height: 632px;
        font-family: 'Share' ;
        line-height: 1.5;
    }

    #About-me .animate {
        opacity: 0;
        transform: translateX(-20px);
        transition: opacity 1.5s ease, transform 1.5s ease;
      }
      
      #About-me .animate.active {
        opacity: 1;
        transform: translateX(0);
      }
    
      #About-me .text {
        display: flex;
        width: 65%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-family: 'Share';
        line-height: 1.5;
    }
    
    #About-me h1 {
        position: absolute;
        font-size: 48px;
        top: 5%;
    }
    
    #About-me p {
        position: absolute;
        width: 50%;
        font-size: 24px;
        top: 25%;
        left: 10%;
        margin-bottom: 20px;
    }

    #About-me img {
        position: absolute;
        top: 15%;
        left: 60%;
    }

    #Skill {
        display: flex;
        position: relative;
        background-image: url(img/bg-skill.png);
        width: 100%;        
        height: 1233px;
        text-align: center;
        justify-content: center;
        }

    #Skill h1 {
        top: 30px;
        position: absolute;
        font-size: 48px;
    }

    .only-desktop {
        display: flex;
        align-items: center;
        justify-content: center;  
    }

    .only-mobile {
        display: none;
    }
    
    #contact {
        text-align: center;
        height: 150px;
    }

    #contact h1 {
        font-size: 48px;
    }

    @media (max-width: 1024px) {
        #you {
            width: 486px;
            height: fit-content;
        }
    }
        @media (max-width :768px) {
            .list {
                display: inline-flex;
              }
        
              #check:checked~.list #open {
                display: none;
              }
        
              .list #close {
                display: none;
              }
        
              #check:checked~.list #close {
                display: block;
              }
        
              .navbar {
                background-color: rgb(182, 182, 182);
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                height: 0;
                transition: .3s ease;
                overflow: hidden;
                z-index: 2;
              }
        
              #check:checked~.navbar {
                height: 17.7rem;
              }
              
              #check:checked~.navbar a{
                transform: translateY(0);
              }
        
              .navbar a {
                color: #000;
                display: block;
                font-size: 1.1rem;
                margin: 1.5rem;
                text-align: center;
                transform: translateY(-50px);
                transition: .3s ease;
              }
        
              #you {
                width: 263px;
                height: fit-content;
              }
            
    
            #you {
                width: 263px;
                height: fit-content;
            }
    
            #About-me img {
                width:281px;
                height:301px;
            }

            .only-desktop {
                display: none;
              }
              
            #Skill {
                height: 900px;
            }
            
            .only-mobile {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;  
              }
        
            .firstkill {
                position: relative;
                height: fit-content;
              }
        
            .secskill {
                position: relative;
                height: fit-content;
              }
        }
    
        @media (max-width : 425px) {
            #content img {
                display: none;
            }   
    
            #About-me h1 {
                font-size:24px;
            }
    
            #About-me p {
                font-size:18px;
            }
    
            #About-me img {
                width:153px;
                height:167px;
                top:30%;
            }

            #Skill {
                height: 1200px;
            }
    }