@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

* {
    padding: 0;
    margin: 0%;
}

body {
    background-color: rgb(22, 20, 20);
    height: 2000px;
}

.nav {
    width: 100%;
    height:10vh;
    width: 97%;
    display: flex;
    background-color: rgb(41, 36, 36);
    color: white;
    padding-left: 40px;
    position: fixed;
}

.nav .Mangan-Universe {
    padding-top: 20px;
    font-family: 'Lobster', cursive;
}

.huda {
    text-decoration: none;
}



.nav ul {
    padding-top: 20px;
    display: flex;
    padding-left: 90px;
}

.nav ul li {
    margin-left: 150px;
    list-style-type: none;
}

.nav ul li a {
    color: white;
}

.anto-x-habibi {
    text-decoration: none;
}

.nav .log ul {
    margin-left: 120px;
}

.nav .log ul li {
    margin-left: 20px;
}

.content-1 {
    background-image: url(makanan1.jpg);
    background-size: cover;
    height: 370px;
    width: 100%;
}

.content-1 h1 {
    text-align: center;
    padding-top: 200px;
    color: white;
}


.content-row-1 {
    color: white;
    display: flex;
    margin-top: 20px;
    text-align: center;
}

.a-row-1 {
    text-decoration: none;
    color: white;
}

.content-row-1 div {
    padding-top: 200px;
}

.content-row-1 .row-1 {
    width: 320px;
    margin-left: 14px;
    height: 90px;
    padding-top: 0%;
}

.img-1 {
    width: 320px;
    height: 210px;
}

.content-row-1 .row-1 h3 {
    background-color: rgb(41, 36, 36);
    height: 29px;
    padding-top: 11px;
}

.content-row-1 .row-2 {
    background-color: rgb(41, 36, 36);
    width: 320px;
    margin-left: 13px;
    height: 0px;
    padding-top: 0%;
}

.content-row-1 .row-2 h3 {
    background-color: rgb(41, 36, 36);
    height: 29px;
    padding-top: 11px;
}

.content-row-1 .row-3 {
    background-color: rgb(41, 36, 36);
    width: 320px;
    margin-left: 13px;
    height: 90px;
    padding-top: 0%;
}

.content-row-1 .row-3 h3 {
    background-color: rgb(41, 36, 36);
    height: 29px;
    padding-top: 11px;
}


.content-row-1 .row-4 {
    background-color: rgb(41, 36, 36);
    width: 320px;
    margin-left: 13px;
    height: 90px;
    padding-top: 0%;
}

.content-row-1 .row-4 h3 {
    background-color: rgb(41, 36, 36);
    height: 29px;
    padding-top: 11px;
}


@media screen and (max-width: 576px) {
    .nav  {
        width: 100%;
    }

    .content-1 {
        width: 100%;
    }
    
    .nav ul {
        display: none;
    }

    .content-row-1 {
        flex-direction: column;
        margin-left: 16px;
        width: 100%;
    }

    .content-row-1 .row-2 {
        margin-top: 180px;
    }
    .content-row-1 .row-3 {
        margin-top: 270px;
    }
    .content-row-1 .row-4 {
        margin-top: 180px;
    }

}