*,
html,
body{
    padding: 0;
    margin: 0;

    font-family: Lato, serif;
}

/* Latar Nav - Hero START */
.nav-hero-latar{
    width: 100%;
    /* height: 100vh; */
    height: 100%;
    background-color: #202020;
}

    /* COntainer */
        .nav-hero-latar-container{
            padding: 20px;
        }
    /* COntainer */
/* Latar Nav - Hero END */



/* Latar Content START */
.latar-content{
    width: 100%;
    height: 100%;
    background-color: #F1F3F5;
}
/* Latar Content END */



/* Navbar START */
    nav{
        width: 100%;
        position: sticky;
    }

    nav .container{
        padding: 10px;
    }

    nav .container ul{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    nav .container ul li{
        list-style-type: none;
        align-content: top;
    }


    nav .container ul li a{
        font-size: 16px;

        color: white;
        text-decoration: none;

        padding: 5px;
        
        transition: all ease-in 520ms; 
    }nav .container ul li a:hover{
        color: gray;
        transition: all ease-in-out 20ms;
    }

        /* Judul */
            nav .container ul li .judul{
                color: gold;
                font-weight: 700;
            }
        /* Judul */


        /* Menu */
            nav .container ul li a{

            }
        /* Menu */

        /* Social */
            nav .container ul li .social{
                color: white;
                transition: all ease-in 520ms; 
            }

                /* GITHUB */
                    nav .container ul li .social .fa-github:hover{
                        color: gray;
                        transition: all ease-in-out 20ms;
                    }
                /* GITHUB */
        /* Social */
/* Navbar END */




/* Hero START */
    .hero{
        width: 100%;
    }

    .hero .container{
        align-content: center;
        padding: 10px;
    }

    .hero .container ul{
        display: flex;
        justify-content: center;
    }

        /* Text */
            .hero .container ul .text{
                min-width: 70%;
                max-width: 100%;
                
                color: white;

                display: flex;
                justify-content: space-around;

                flex-wrap: wrap-reverse;
            }
            
            .hero .container ul .text .container .border-left{
                margin: 10px;
                border-left: 2px solid white;
            }


                /* Button */
                    .hero .container ul .text .container .button{
                        padding: 10px;
                    }

                    .hero .container ul .text .container .button a{
                        color: white;
                        text-decoration: none;

                        margin: 10px;
                        padding: 8px;
                        border: 1px solid gold;
                        border-radius: 12px;
                        
                        transition: all ease 220ms; 
                    }.hero .container ul .text .container .button a:hover{
                        color: white;

                        margin: 0;
                        border-radius: 18px;
                        transition: all ease-out 320ms;

                        border: none;
                        text-decoration: underline gold;
                        text-underline-offset: 10px;
                    }
                /* Button */
        /* Text */


        /* Image */
            .hero .container ul .image{
                margin: 10px;
            }

            .hero .container ul .image .container{
                padding: 10px;
            }

            .hero .container ul .image .container img{
                min-width: 50%;
                max-width: 100%;

                min-height: 100px;
                max-height: 300px;

                object-fit: cover;

                /* border: 2px solid white;
                background-color: gray;
                border-radius: 100px; */
            }
        /* Image */

/* Hero END */





/* My Skill START */
.skill{
    width: 100%;
    background-color: #202020;
}

.skill .container{
    padding: 10px;


    background-image: url('https://static.vecteezy.com/system/resources/thumbnails/022/666/586/small/hill-illustration-forest-illustration-fog-free-png.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}

.skill .container .skill-p{
    color: gold;
    font-size: 14.5px;
    text-align: center;

}

.skill .container .skill-h2{
    color: white;
    text-align: center;

    margin-bottom: 20px;
}


    .skill .container ul{
        display: flex;
        justify-content: center;
    }

        .skill .container ul .text{
            min-width: 100px;
            max-width: 600px;    
        }

            .skill .container ul .text .skill-text-h3{
                color: white;
            }

            .skill .container ul .text .skill-text-p{
                min-width: 100px;
                max-width: 500px;
                color: gray;
            }



            .skill .container ul .text .flex{
                display: flex;
                flex-wrap: wrap;
            }


                /* Text language START */
                    .skill .container ul .text .language-1{
                        display: flex;
                        padding: 10px;

                    }.skill .container ul .text .language-1 p{
                        color: white;
                        margin-left: 10px;

                        align-content: center;
                    }
                /* Text language END */


                /* Repository START */
                    .skill .container ul .repository{
                        padding: 10px;
                        text-align: center;
                        align-content: center;
                    }

                    .skill .container ul .repository .repo-1{
                        display: inline-block;
                        padding: 10px;
                    }

                    .skill .container ul .repository .repo-1 h4{
                        color: white;
                        margin-left: 10px;
                    }

                    .skill .container ul .repository .repo-1 p{
                        color: gray;
                    }
                /* Repository END */
/* My Skill END */






/* Hero Child START */

    /* Shape Hero Child */
        .hero-child-shape{
            width: 80%;
            position: absolute;

            display: flex;
            justify-content: center;

            filter: drop-shadow(2px 2px 2px black);
        }

        .hero-child-shape img{
            min-width: 50px;
            max-width: 100px;


        }
    /* Shape Hero Child*/


.hero-child{
    width: 100%;
}

.hero-child .container{
    padding: 10px;
}

.hero-child .container  .judul-hero-child{
    color: white;
    text-shadow: 2px 2px 2px black;
    text-align: center;

    margin: 20px;
}

.hero-child .container ul{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

    /* Card-1 */
        .hero-child .container ul .card-1{
            border-radius: 10px;
            background-color: white;

            padding: 10px;
            margin: 10px;

            box-shadow: 0 0 10px 1px; 
        }

        .hero-child .container ul .card-1 a{
            color: black;
            text-decoration: none;

        }

        .hero-child .container ul .card-1 a img{
            min-width: 100px;
            max-width: 300px;

            height: 200px;

            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            object-fit: cover;
        } 


            /* Text Card */
                .hero-child .container ul .card-1 a h2{
                    margin-bottom: 20px;
                }


                    /* Information */
                        .hero-child .container ul .card-1 a .information{
                            font-size: 14.5px;

                            display: block;
                            margin-bottom: 20px;
                        }

                        .hero-child .container ul .card-1 a .information h4{
                        }

                        .hero-child .container ul .card-1 a .information p{
                            width: 50%;
                            height: 50px;
                        }


                        /* Button */
                            .hero-child .container ul .card-1 .button {
                                color: white;
                                background-color: black;

                                
                                border-top-right-radius: 10px;

                                padding: 5px;
                                float: right;

                                margin-right: 20px;

                                transition: all ease-in 420ms;
                            }.hero-child .container ul .card-1 .button:hover{
                                background-color: gray;
                                transition: all ease-out 50ms;
                            }

                            .hero-child .container ul .card-1 .button:active{
                                background-color: red;
                            }
                        /* Button */

                    /* Information */
            /* Text Card */

    /* Card-1 */




    /* Card-2 */
        .hero-child .container ul .card-2{
            border-radius: 10px;
            background-color: white;

            padding: 10px;
            margin: 10px;

            box-shadow: 0 0 10px 1px;
        }

        .hero-child .container ul .card-2 a{
            color: black;
            text-decoration: none;

        }

        .hero-child .container ul .card-2 a img{
            min-width: 100px;
            max-width: 300px;

            height: 200px;

            border-top-left-radius: 10px;
            border-top-right-radius: 10px;


            object-fit: cover;

        }

                    /* Text Card */
                    .hero-child .container ul .card-2 a h2{
                        margin-bottom: 20px;
                    }
                
    
                        /* Information */
                            .hero-child .container ul .card-2 a .information{
                                font-size: 14.5px;
    
                                display: block;
                                margin-bottom: 20px;
                            }
    
                            .hero-child .container ul .card-2 a .information h4{
                            }

                            .hero-child .container ul .card-2 a .information p{
                                width: 50%;
                                height: 50px;
                            }


                            /* Button */
                            .hero-child .container ul .card-2 .button {
                                color: white;
                                background-color: black;


                                border-top-right-radius: 10px;

                                padding: 5px;
                                float: right;

                                margin-right: 20px;

                                transition: all ease-in 420ms;
                            }
                            .hero-child .container ul .card-2 .button:hover{
                                background-color: gray;
                                transition: all ease-out 50ms;
                            }

                            .hero-child .container ul .card-2 .button:active{
                                background-color: red;
                            }

                        /* Button */


                        /* Information */
                /* Text Card */

    /* Card-2 */


/* Hero Child END */




/* About START */
.about{
    width: 100%;
    /* background-color: white; */
}

.about .container{
    padding: 10px;
}

.about .container .judul-about{
    color: white;
    text-shadow: 2px 2px 2px black;
    text-align: center;
    margin: 20px;

}

.about .container ul{
    display: flex;
    justify-content: center;

    background-color: white;

}

    /* Card 1 */
        .about .container ul .card-1{
            width: 100%;
            margin: 10px;

            background-color: white;

            display: flex;
            justify-content: center;
            flex-wrap: wrap;

            margin-bottom: 50px;
        }

        .about .container ul .card-1 a{
            margin: 10px;
        }


        .about .container ul .card-1 a img{
            min-width: 50%;
            max-width: 100%;

            min-height: 250px;
            max-height: 300px;
            object-fit: cover;
        }


            /* card text */
                .about .container ul .card-1 .card-1-text{
                    padding: 10px;
                    background-color: white;
                }

                .about .container ul .card-1 .card-1-text .container{
                    min-width: 100px;
                    max-width: 500px;

                }

                .about .container ul .card-1 .card-1-text h2{
                    font-size: 14.5px;
                    margin: 10px;
                }

                .about .container ul .card-1 .card-1-text p{
                    font-size: 13.5px;
                }

                    /* Social START */

                        /* Shape1 Card1 */
                            .shape-card-1{
                                width: 10%;

                                filter: drop-shadow(2px 2px 2px black);


                                display: flex;
                                justify-content: end;

                            }

                            .shape-card-1 img{
                                min-width: 50px;
                                max-width: 85px;

                                position: absolute;

                                margin-top: -70px;

                            }
                            /* Shape1 Card1 */
                            
                            
                            
                            /* Shape2 Card2 */
                            .shape-card-2{
                                display: flex;
                                justify-content: center;
                            }
                            
                            .shape-card-2 img{
                                min-width: 50px;
                                max-width: 100px;
    
                                position: absolute;
                            }
                        /* Shape2 Card2 */


                        .about .container ul .card-1 .card-1-text .social{
                            margin-top: 60px;
                        }

                        .about .container ul .card-1 .card-1-text .social .fa-github, 
                        .about .container ul .card-1 .card-1-text .social .fa-instagram{
                            color: black;
                            font-size: 36px;

                            text-decoration: none;

                            margin-top: 10px;
                        }

                        .about .container ul .card-1 .card-1-text .social .fa-github:hover,
                        .about .container ul .card-1 .card-1-text .social .fa-instagram:hover{
                            color: red;
                        }
                    /* Social END */
            /* card text */

    /* Card 1 */



    /* Card 2 */
        .about .container ul .card-2{
            width: 100%;
            margin-top: 50px;


            margin-left: 10px;
            margin-right: 10px;

            background-color: white;

            display: flex;
            justify-content: center;
            flex-wrap: wrap-reverse;

        }

        .about .container ul .card-2 a{
            margin: 10px;
        }

        .about .container ul .card-2 a img{
            min-width: 50%;
            max-width: 100%;

            min-height: 250px;
            max-height: 300px;
            object-fit: cover;        

        }


            /* card text */
                .about .container ul .card-2 .card-2-text{
                    padding: 10px;
                    background-color: white;
                }

                .about .container ul .card-2 .card-2-text .container{
                    min-width: 100px;
                    max-width: 500px;

                }

                .about .container ul .card-2 .card-2-text h2{
                    font-size: 14.5px;
                    margin: 10px;
                }

                .about .container ul .card-2 .card-2-text p{
                    font-size: 13.5px;
                }
            /* card text */

    /* Card 2 */



/* About END */




/* Gallery START */
.gallery{
    width: 100%;
}

.gallery .container{
    padding: 10px;

    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: -10px;
    background-color: #202020;
}

.gallery .container .judul-gallery{
    color: white;
    text-shadow: 2px 2px 2px black;
    text-align: center;

    margin: 20px;
}

.gallery .container ul{
    display: flex;
    justify-content: center;

    flex-wrap: wrap;
    background-color: #202020;

}


    /* Card START */

        .gallery .container .card-1{
            min-width: 100px;
            max-width: 300px;

            border-radius: 20px;
            box-shadow: 0 0 10px 1px gray;
            text-align: center;
        }

        .gallery .container .card-1 .container{
            background-color: white;
            padding: 10px;
            margin: 10px;
        }

        .gallery .container .card-1 .container img{
            min-width: 50%;
            max-width: 100%;

            min-height: 100px;
            max-height: 400px;

            object-fit: cover;
        }


            .gallery .container .card-1 .container .text-card{
                display: flex;
                justify-content: space-evenly;

                margin: 10px;
            }


            .gallery .container .card-1 .container  .text-card h2{
                color: black;
                text-align: left;

                align-content: center;

                font-weight: 500;
                text-shadow: unset;

                margin-right: 10px;
            }

            .gallery .container .card-1 .container .text-card p{
                color: #008AFF;
                font-size: 12.5px;
            }


                .gallery .container .card-1 .container .text-card a{
                    color: black;
                    font-size: 14px;

                    text-underline-offset: 3px;
                }

                .gallery .container .card-1 .container .text-card a:hover{
                    color: #CCCCCC;
                }

    /* Card END */
/* Gallery END */
















/* Arrow Up START */
.arrow{
    width: 100%;
    position: fixed;
    bottom: 0;
}

.arrow .container{
    padding: 40px;
}

.arrow .container ul{
    display: flex;
    justify-content: end;
}

.arrow .container a{
    color: white;
    padding: 10px;
    background-color: black;
}.arrow .container a:hover{
    background-color: gray;
}
/* Arrow Up END */