@import url("https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap");

body {
    background-image: url(https://shibuya-bay.vercel.app/bg-1.png);
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Fjalla One", sans-serif;
    color: #251607;
}

.container {
    max-width: 1700px;
    width: 95%;
    margin: 0 auto;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0;

    a {
        text-decoration: none;
        color: #251607;
        /* font-size: 30px */
        font-size: clamp(0.875rem, 0.0625rem + 2.6vw, 2.5rem);
        font-weight: 600;
    }

    div {
        img {
            width: clamp(1.875rem, 1.2388rem + 2.6786vw, 3.75rem);
        }
    }
}


.hero {
    h1 {
        font-size: clamp(6rem, 1.181rem + 21.4179vw, 23.9375rem);
        text-align: center;
        color: #251607;
        line-height: clamp(6.625rem, 0.1772rem + 28.6567vw, 30.625rem);
        text-transform: uppercase;
    }


    p {
        font-size: clamp(1rem, 0.7649rem + 1.0448vw, 1.875rem);
        color: #251607;
        text-align: center;
        line-height: clamp(1rem, 0.7649rem + 1.0448vw, 1.875rem);
    }

    .hero-img {
        max-width: 100%;
        padding-top: 20px;
    }

    .texts-img {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 20px;
    }
}

.collage-wrap {
    padding: 50px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 50px;

    .img1 {
        object-fit: cover;
        width: 100%;
        height: 100%;

    }
}


.collage-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;

    .card {
        border: 4px solid #000;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}


.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;

    a {
        text-decoration: none;
        color: #251607;
        /* font-size: 30px */
        font-size: clamp(0.9375rem, 0.8535rem + 0.3731vw, 1.25rem);
        font-weight: 600;
    }
}

.bottom {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    align-items: center;
    padding: 50px 0;

    .img1 {
        width: 100%;
    }

    .img2 {
        width: 100%;
    }
}

footer {
    h1 {
        text-transform: uppercase;
        font-size: clamp(6.5rem, 1.5558rem + 10.3004vw, 12.5rem);
        text-align: center;
    }
}