@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;600;800&family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Edu+NSW+ACT+Cursive:wght@400..700&family=Hammersmith+One&family=Hurricane&display=swap');

body {
    margin: 0 auto;
    padding: 0;
    font-family: "Poppins";
    background: #fafafa;
    max-width: 1920px;
}

/* navbar */
nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    justify-items: center;
    background: white;
    text-align: center;
}

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

nav h1 {
    line-height: .9em;
    background-color: black;
    color: white;
    padding: 10px;
}

nav h1 div:first-child {
    font-weight: 600;
    position: relative;
    left: -1px;
}

nav h1 div:last-child {
    font-weight: 300;
    letter-spacing: 2px;
}

/* content */
/* main */
main {
    background: linear-gradient(rgba(0, 0, 0, 0.473)), url('assets/img/hero.jpg') no-repeat center / cover;
    width: 100%;
    height: 90vh;
    margin-bottom: 5em;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    color: white;
    text-align: center;
}

main h1 {
    font-weight: 1000;
}

main p {
    margin-top: -1.5em;
}

main button {
    background: black;
    color: white;
    border: none;
    padding: 1.5em 2em;
    font-weight: 600;
}

main button:hover {
    background: rgb(70, 70, 70);
}

/* menu */
#menu {
    background: rgb(240, 240, 240);
}

section.menu {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    max-width: 1300px;
    margin: 0 auto;
}

section.menu div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid black;
    margin-bottom: 2em;
}

section.menu div p {
    margin: 0;
}

section.menu div p:last-child {
    margin-left: 5rem;
}

.menu-selection-btn {
    max-width: 445px;
    margin: 0 auto 2em auto;
    padding: 0;
}

.menu-selection-btn button {
    padding: 8px;
    margin: 0;
    border: none;
    margin-right: -4.5px;
    background: white;
    color: black;
}

.menu-selection-btn button:nth-child(2) {
    background: black;
    color: white;
}

/* mosque section */
section.mosque {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1300px;
    margin: 0 auto;
    margin-bottom: 7em;
    position: relative;
    padding: 0 1em;
}

section.mosque button {
    position: relative;
    z-index: 5;
    background: black;
    color: white;
    border: none;
    padding: 1.5em 3em;
    margin-top: 3em;
}

section.mosque img {
    height: 500px;
    position: relative;
    z-index: 1;
    box-shadow: 5px 5px 10px rgba(105, 105, 105, 0.5);
    justify-self: center;
}

section.mosque:before {
    content: "";
    position: absolute;
    width: 78%;
    height: 50%;
    bottom: 5em;
    left: -25%;
    z-index: -1;
    background-color: rgb(238, 238, 238);
    border-radius: 0 100px 0 0;
}

/* Reviews Section */
section.customer-reviews {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    margin-bottom: 5em;
    margin-top: -5em;
    column-gap: 1em;
    padding: 0 1em;
}

section.customer-reviews:before {
    content: "";
    position: absolute;
    width: 78%;
    height: 50%;
    bottom: 5em;
    border-radius: 100px;
    background-color: rgb(114, 180, 255);
    z-index: -1;
    opacity: 15%;
    /* change 50 to a value that gets the shape right */
}

.comments {
    display: grid;
    grid-template-columns: 1fr;
    padding-top: 5em;
}

.comments p {
    background-color: #2B99FB;
    color: #F1FEFF;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    padding: 1em;
    height: fit-content;
    border-radius: 20px;
    width: fit-content;
}

.comments p:nth-child(even){
    justify-self: end;
}

/* gallery masonry */
.food-gallery-masonry {
    columns: 5;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 .5em;
    gap: 8px;
}

.food-gallery-masonry img {
    width: 100%;
    height: auto;
}

/* footer */
footer {
    background: black;
    color: white;
    text-align: center;
    padding: 4em 0;

    display: grid;
    grid-template-columns: repeat(3, 1fr);


    margin-top: 5em;
}

footer a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 1em;
}

.footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: start;
    max-width: 400px;
    margin: 0 auto;
    column-gap: 10em;
}

/* animation */

/* responsive screen */
@media screen and (max-width: 1200px) {
    section.mosque {
        column-gap: 1em;
    }
    section.menu {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 970px) {
    section.mosque {
        grid-template-columns: 1fr;
    }

    section.customer-reviews {
        margin-top: -10em;
        grid-template-columns: 1fr;
        max-width: 700px;
    }

    section.customer-reviews .comments {
        margin-top: -3em;
        margin-left: 0;
    }

    section.mosque img {
        margin-top: 1em;
        grid-row: 2/3;
        justify-self: center;
    }

    section.mosque a {
        display: block;
        text-align: center;
    }

    .food-gallery-masonry {
        gap: 5px;
    }
}

@media screen and (max-width: 840px) {
    .food-gallery-masonry {
        columns: 4;
        margin: 0 1em;
    }

    footer {
        padding-right: 1em;
    }
}

@media screen and (max-width: 770px) {
    main {
    background: linear-gradient(rgba(0, 0, 0, 0.473)), url('assets/img/hero-mobile.jpg') no-repeat center / cover;
    }

    section.menu {
        grid-template-columns: 1fr;
    }

    footer {
        font-size: 1em;
        grid-template-columns: 1fr 1fr;
    }

    footer p:last-child {
        grid-column: span 2;
    }

    .footer-links {
        column-gap: 2em;
    }
}

@media screen and (max-width: 680px) {
    main h1 {
        font-size: 1.5em;
    }

    .food-gallery-masonry {
        columns: 3;
    }
}

@media screen and (max-width: 570px) {
    section.mosque img {
        width: 90dvw;
        height: auto;
        margin: 1em 0 0 0 0;
        padding: 0;
    }

    section.customer-reviews .comments p {
        font-size: 12px;
    }

    section.customer-reviews .comments {
        margin-top: -3em;
    }
}

@media screen and (max-width: 520px) {
    main h1 {
        font-size: 1.3em;
    }

    main p {
        font-size: 12px;
    }

    section.mosque h1, section.mosque p {
        scale: .9;
    }

    section.mosque button {
        margin-top: -4em;
    }
}

@media screen and (max-width: 450px) {
    #menu button {
        font-size: .7em;
        padding: 10px 4px;
    }

    #menu button:first-child {
        padding-left: 4px;
    }

    #menu button:last-child {
        padding-right: 4px;
    }

    .menu-selection-btn {
        text-align: center;
    }

    #menu h1 {
        font-size: 1.5em;
    }

    .food-gallery-masonry {
        columns: 2;
        margin: 0;
    }

    section.customer-reviews p {
        font-size: 12px;
    }
}

@media screen and (max-width: 420px) {
    #menu button {
        font-size: 10px;
    }

    nav h1 {
        font-size: 1em;
    }

    nav a {
        font-size: 12px;
    }

    section.menu div p:last-child {
        padding: 0 1em;
    }

    section.menu {
        margin: 0 1em;
    }

    .footer-links {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    section.customer-reviews .comments {
        margin-top: -5em;
    }

    section.customer-reviews .comments p {
        font-size: 9px;
    }
}