* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    scroll-behavior: smooth;
}

/* Custom Scroll Bar CSS */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #d39df0;
    border-radius: 12px;
    transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: #b796bf;
}

/*styling body*/
  html , body {
    overflow-x: hidden;
  }


 body { 
    background-color:rgb(230, 203, 240);
    width:0 auto;
    margin: 0 auto;
    position: relative;  
}

.container {
    width: 100%;
}




/*styling navbar*/

.navbar-section {

    overflow: hidden;
    background-color: rgb(230, 203, 240);
    position: fixed;
    top:0;
    width: 100%;
    z-index: 1;
  
    
}

a{
    text-decoration:none ;
    color:black;
}

a:hover {
    color:white;
}

ul {
    list-style: none;
    text-decoration: none;
    

}

li {
padding: 10px;



}

.logo {
    font-size: 30px;
}




/*styling home section*/

.home-section {
    width: 100%;
    height: 800px;
    margin-top: 60px;
    margin: 0 auto;
    background-image: url(img/keyboard.png);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    font-family: sans-serif;
       
}

.home .home-content {
    width:90%;
    height: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 0 auto;
   
    
}

.text-one {
    font-size: 30px;
}

.text-two {
    font-size: 55px;
font-family: 'Grandiflora One', serif;
    font-family: 'Noto Serif Makasar', serif;
}

.text-three {
    font-size: 35px;
}

.text-four {
    font-size: 24px;
}

span::before {
    content: "Software engineer";
    animation: animate infinite 5s;
    padding-left: 10px;
}

@keyframes animate {

    0% {
        content: "Frontend developer";
    }

    50% {
        content: "Web designer";
    }

    75% {
        content: "App developer";
    }
}


button {
    padding: 20px 30px;
    margin-top: 30px;
    background-color: #b796bf;
    border: transparent;
    border-radius: 35px;
    color: white;
    font-size: 20px;

}

button:hover {
    padding: 20px 30px;
    margin-top: 30px;
    background-color: white;
    border: transparent;
    border-radius: 35px;
    color: #b796bf;

}

/*styling about section*/

.about-section {
 padding-bottom: 15px;
}

.about-content {
    padding: 15px;
    padding-top: 20px;
    border: solid 3px #b796bf;
    border-radius: 20px;
}

.about-text {
   /* animation-duration: 3s;
    animation-name: slidein;*/
    width: 700px;
    height: auto;
    margin: 0 auto;
    box-shadow: 2px 2px 4px #9975a2;  
    border-radius: 90px;
    padding:50px;
}

/*@keyframes slidein {
    from {
        margin-left: 100%;
    }
    to {
        margin-left: 0%;
    }
}
*/

.about-image {
    width: 400px;
    height: 600px;
    background-image: url(img/aboutMe-pic.JPG);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 90px;
    padding: 50px;
  
}


h1 {
    text-align: center;
    margin-bottom: 20px;
    padding-top: 20px;
    font-size: 45px;
    font-family: 'Noto Serif Makasar', serif;
}

 h5 {
    text-align: center;
 } 

 p {
    padding-top: 10px;
    font-size: 20px;
 }






/*styling skill section*/

  .skills {
   padding-bottom: 15px;
  }

 .container-skills {
    border: solid 3px #b796bf;
    border-radius: 20px;
 }

.card {
    margin: 10px;
}

.card:hover{
    background-color: #b796bf;
}


.html  {
    display: block;
    margin: 0 auto;
    padding-top: 15px;
}

.css {
    display: block;
    margin: 0 auto;
    padding-top: 15px;
}

.bootstrap {
    display: block;
    margin: 0 auto;
    padding-top: 15px;
}

.javascript {
    display: block;
    margin: 0 auto;
    padding-top: 15px;
}






/*styling project section*/


.container {
    padding:20px;
}

.projects {
    padding-bottom: 15px;
}

.container-project {
    border: solid 3px #b796bf;
    border-radius: 20px; 
}

.card-project {
    margin-left: 10px;
    margin: 0 auto;
    margin-bottom: 15px;
    padding:10px;
    box-shadow: 2px 2px 4px #9975a2 ;
}

.card-project:hover {
   background-color: #b796bf;
   color: white;
   width:300px;
}

.weather-app {
    height:220px;
}

.weather-app:hover {
 
  display: block;
  margin: 0 auto;
  cursor: pointer;
-webkit-filter: brightness(50%);

    };


.login {
    height: 220px;
    
}

.login:hover {
  
    display: block;
    margin: 0 auto;
    cursor: pointer;
-webkit-filter: brightness(50%);
   
}

.netflix {
    height: 213px;
}

.netflix:hover {
   
    display: block;
    margin: 0 auto;
    cursor: pointer;
    -webkit-filter: brightness(50%);
 
}

.landing-page {
    height: 213px;
}

.landing-page:hover {
  
    display: block;
     margin: 0 auto;
     cursor: pointer;
    -webkit-filter: brightness(50%);

}



h2 {
    text-align: center;
    margin-top: 10px;
     font-family: 'Noto Serif Makasar', serif;
     font-size: 20px;
}


/*styling certificate section*/

.certificates {
    padding-bottom: 15px;
}
.cert-1 {
    margin-right: 10px;
    margin-bottom: 15px;
    display: block;
    margin: 0 auto; 
}

.cert-1:hover {

        -webkit-filter: brightness(50%);
    
}


.cert-2 {
    margin-right: 10px;
    display: block;
    margin: 0 auto;
}

.cert-2:hover {

    -webkit-filter: brightness(50%);

}



.certificate-container {
    border: solid 3px #b796bf;
    border-radius: 20px;
    margin-top: 40px;
}

h3 {
    text-align: center;
    margin-top: 15px;
    font-family: 'Noto Serif Makasar', serif;
}

/*styling contact section*/

.contact {
    padding-bottom: 15px;
}

.contact-container {
    border: solid 3px #b796bf;
    border-radius: 20px;
}

.form-content {
    width: 500px;
    height:400px;
    padding: 30px;
    padding-bottom: 20px;
    margin-bottom: 25px;
    margin-right: 25px;
    background-color: #b796bf;
    border-radius: 20px;
}

form {
    margin: 0 auto;
}

input {
    font-size: 18px;
    width: 400px;
    padding: 8px;
}

.contact-content {
    width: 400px;
    height: 400px;
    padding-top: 50px;
    border:solid 1px #b796bf;
    border-radius: 90px;
}

.submit-button {
    width: 100px;
    background-color: #e8c2ef;
    color: white;
    border: transparent;
    border-radius: 90px;
}

.submit-button:hover {
    background-color: white;
    color: black;
}

.contact-heading {
    font-size: 30px;
}

.phone-number {
    text-align: center;
}

.email {
    text-align: center;
}

/*styling social section*/

.socials {
    padding-bottom: 15px;
}
.container-socials {
  border: solid 3px #b796bf;
  border-radius: 20px;
}

.github-icons,
.linkedin-icons,
.instagram-icons {
    width: 100px;
    height: 100px;
     margin: 0 auto;
     display: flex;
     justify-content: center;
     align-items: center;
     border:solid 1px #9975a2;
     border-radius: 50px;
}

.github-icons:hover,
.linkedin-icons:hover,
.instagram-icons:hover {
    background-color:#9975a2 ;
}

 

.fa-instagram {
    font-size: 50px;
   text-align: center;
   
}

.fa-linkedin {
    font-size: 50px;
}

.fa-github {
    font-size: 50px;
}