@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Poppins:ital,wght@0,100;0,300;0,400;0,700;1,700&display=swap');

*{    margin : 0;
    padding : 0;
    box-sizing: border-box;
    font-family : 'poppins',sans-serif;
}
html {
    scroll-behavior: smooth;
}

body {
    background-color : #1f242d;
    color : #fff;
}

.header {
    position : fixed;
    top : 0;
    left : 0;
    width : 100%;
    padding : 20px 10%;
    background : transparent;
    display : flex;
    justify-content: space-between;
    align-items : center;
    z-index : 999;
}

.logo {
    font-size : 25px;
    color : #fff;
    text-decoration : none;
    font-weight : 600;
    cursor : defauit;
    opacity : 0;
    animation : slideRight 1s ease forwards;
}

.navbar a {
    display : inline-block;
font-size : 18px;
color : #fff;
text-decoration: none;
font-weight : 500;
margin-left : 35px;
transition : .3s;
opacity : 0;
animation : slideTop .5s ease forwards;
animation-delay : calc(.2s *var(--i));
}


.navbar a:hover {
    color : #0ef;
}

 #menu {
    display : none;
} 

.home {
    position : relative;
    width : 100%;
    height : 100vh;
    display : flex;
    justify-content: space-between;
    align-items: center;
    padding : 70px 10% 0;
}

.home-content {
    max-width: 600px;
}
.home-content h3{
    font-size : 32px;
    font-weight : 700;
    opacity : 0;
    animation : slideBottom 1s ease forwards;
    animation-delay : .7s;
}

.home-content h3 span {
    color : #0ef;
}

.home-content h3:nth-of-type(2) {
    margin-bottom : 30px; 
    animation : slideTop 1s ease forwards;
    animation-delay : .7s;
}

.home-content h1  {
    font-size : 56px;
    font-weight : 700;
    margin : -3px 0;
    opacity : 0;
    animation : slideRight 1s ease forwards;
    animation-delay : 1s;
}


.home-content p{
    font-size : 16px;
    opacity : 0;
    animation : slideLeft 1s ease forwards;
    animation-delay : 1s;
}


.home-img img {
    max-width : 450px;
    margin-right : -20px;
    opacity : 0;
    animation : zoomIn 1s ease forwards, floatImage 4s ease-in-out infinite;
    animation-delay : 2s, 3s;
}

.social-media a {
    display : inline-flex;
    justify-content: center;
    align-items: center;
    width : 40px;
    height : 40px;
    background : transparent;
    border : 2px solid #0ef;
    font-size : 20px;
    color : #0ef;
    border-radius: 50%;
    text-decoration: none;
    margin : 30px 15px 30px 0;
    opacity : 0;
    animation : slideLeft 1s ease forwards;
    animation-delay : calc(.2s *var(--i));
}

.social-media a:hover {
    background-color : #0ef;
    color : #1f242d;
    box-shadow : 0 0 20px #0Ef;
}

.btn {
   display : inline-block;
    padding : 12px 28px;
    background-color: #0ef;
    border-radius: 40px;
    box-shadow : 0 0 10px #0ef;
    font-size : 16px;
    color : #1f242d;
    letter-spacing : 1px;
    text-decoration: none;
    font-weight : 600;
    opacity : 0;
    animation : slideTop 1s ease forwards;
    animation-delay : 2s;
}

/* ABOUT SECTION */

.about h3 ,
.skills h3,
.portofolio h3{
    position : relative;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    font-size : 30px;
    font-weight : 700;
    margin : 15px 30px;
    opacity : 0;
    animation : slideRight 1s ease forwards;
    animation-delay : 1s;
}
.portofolio a {
    text-decoration: none;
    text-align: center;
    color :#fff;
}.portofolio a:hover {
    color : #0ef;
    font-weight: 700;
}



.about h3 span,
.skills h3 span,
.portofolio h3 span
{
    color : #0ef;
}

.about p,
.skills p,
.portofolio p {
    margin : 30px 16px;
    padding : 30px;
    font-size : 16px;
    opacity : 0;
    animation : slideLeft 1s ease forwards;
    animation-delay : 1s;
    border : 1px solid #0ef;
}

/* KEYFRAME ANIMATION */

@keyframes slideRight {
    0% { 
        transform : translateX(-100px);
        opacity : 0;
    }
    100% {
        transform : translateX(0);
        opacity : 1;
    }
}

@keyframes slideLeft {
    0% { 
        transform : translateX(100px);
        opacity : 0;
    }
    100% {
        transform : translateX(0);
        opacity : 1;
    }
}

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

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

@keyframes zoomIn {
    0% { 
        transform : scale(0);
        opacity : 0;
    }
    100% {
        transform : scale(1);
        opacity : 1;
    }
}

@keyframes floatImage {
    0%{
        transform : translateY(0);
    }
    50%{
        transform : translateY(-24px);
    }
    100%{
        transform : translateY(0);
    }
}
/* tablet */
@media (max-width: 768px) {
    html {
        font-size: 20%;
        display : inline-block;
        flex-wrap: wrap;
        width : auto;
        height : 100vh;
    }

    .home-img {
        padding : 1rem;
    }

    

   .header .navbar {
    flex-direction: column;
    }

    .header .navbar .navbar-nav a {
     flex-wrap: wrap;
     gap : .5rem;
    }

    .navbar a .active {
        right : 0;
    }
} 

.about {
    margin : 1rem;
    padding : 1rem;
}