@media screen and (max-width: 768px) {
    .menu {
        height: 55px !important;
        width: 100% !important;

        top: auto !important;
        bottom: 0 !important;

        flex-direction: row !important;
    }
    
    .container {
        padding-right: 0 !important;
        transform: none !important;
        width: 100% !important;
    }
    .container .introOne {
        .wrapper {
            flex-direction: column-reverse;
            max-width: 89% !important;

            min-height: 76vh;
            gap: 1rem;

            .kiri {
                height: 500px !important;
                justify-content: center;

                .hello {
                    font-size: .7rem;
                }
                h1 {
                    font-size: 1.5rem !important;
                }
                .subJudul {
                    width: 64%;
                    p {
                        font-size: .7rem;
                    }
                }
                .ha {
                    width: 100%;
                    align-items: end;
                    svg {
                        height: 6rem;
                    }
                }
                .pernik {
                    transform: translateY(54px);
                    right: 0;
                    left: auto;
                    width: 100px;
                    height: 10px;
                }
            }
            .kanan {
                flex: 1.3;
                width: 100%;
                .background1 {
                    width: 110%;
                }
            }
        }
    }
    .projectIni {
        padding: 0;
        height: max-content3;
        .wrapper {
            .judul {
                h1 {
                    width: 100%;
                    background-color: var(--warna1);
                    padding: 8px 28px 8px 18px;
                    font-size: 1.3rem;
                }
                .pencetan {
                    padding-right: 8px;
                }
            }
            .isian {
                grid-template-columns: 1fr;
                grid-template-rows: 1fr auto;

                .kirie {
                    display: grid;
                    grid-template-columns: repeat(6, 1fr);
                    grid-template-rows: 1fr;
                    gap: 2rem;

                    .tombolan {
                        height: 2rem;
                        width: auto;
                        .tebal {
                            position: absolute;
                            top: -30%;
                            border-radius: 100px;

                            z-index: -1;

                            width: 100%;
                            height: 200%;
                            transform: translateY(-100%);
                        }
                        .tombolIni {
                            top: -30%;
                            border-radius: 100px;
                            z-index: -1;
                            height: 115%;
                            width: 100%;
                            transform: translateY(-100%);
                        }
                        .pilihIni {
                            transform: translateY(0);
                            opacity: 1;
                        }
                        
                        .move-center {
                            transform: translateY(-10%);
                            opacity: .5;
                            width: 100%;
                        }
                        .move-right {
                            transform: translateY(100%);
                            opacity: 0;

                        }
                        .no-transition {
                            transition:none;
                        }
                    }
                    .tombolan:hover {
                        svg {
                            transform: translateY(-1px) !important;
                        }
                    }
                }
                .kanane {
                    position: relative;
                    display: flex;
                    justify-content: center;

                    height: max-content;

                    .wadah {
                        font-size: .8rem;
                        width: 100%;
                        padding: 1rem 0;
                        .dataProject {
                            padding: 1rem;
                            .tulisan {
                                .judul2 {
                                    display: flex;
                                    flex-direction: column;
                                    gap: 0;
                                }
                                .arrowJudul2 {
                                    height: 1rem;
                                }
                            }
                            .gambar {
                                --tinggiGambarProyek: 10rem;
                                min-height: var(--tinggiGambarProyek);
                                height: var(--tinggiGambarProyek);
                            }
                            .dependency {
                                margin-top: 1rem;
                                height: 1rem;
                                .icon {
                                    img {
                                        height: 100%;

                                    }
                                }
                            }
                        }
                    }
                    .loading {
                        padding: 1rem 2rem;
                    }
                }
            }
        }
    }
    .penjelasan {
        font-size: .7rem;
    }

    .contactMe {
        font-size: .7rem;
        .wrapper {
            .gambaran {
                display: flex;
                flex-direction: column;
                gap: 18px;
                .gambar {
                    .kotak {
                        height: 4rem;
                        border-radius: 12px;
                        aspect-ratio: 1;;
                    }
                    .kotak::before {
                    }
                    .coba {
                    }
                }
            }
        }
    }
    
    footer {
        font-size: .8rem;
        height: 620px;

        .wrapper {
            flex-direction: column;
            gap: 55px;
            height: 500px;

            .kiri {
                width: 100%;
                flex-direction: row;
                .judul {
                    align-items: start;
                    width: 700px;
                    h2 {
                        line-height: 1.3rem;
                    }
                    p {
                        font-size: .7rem;
                    }
                }
            }
            .tengah {
                width: 100%;
                .kataKata {
                    p {
                        font-size: .7rem;
                    }
                }
                .judul {
                    h4:nth-child(5) {
                        display: none;
                    }
                    h4:nth-child(6) {
                        display: none;
                    }
                }
            }
            .kanan {
                width: 100%;
                padding: 0;
                flex-direction: row;

                margin-bottom: 100px;
            }
        }
    }
    
    .menu {
        padding: 12px;

        display: flex;
        flex-direction: column;


        .darkmode {
            width: auto;
            height: 100%;
            padding: 6px;
        }
    }


}