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

    width: 100%;
    min-height: 100dvh;

    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 50% 0%,
            #242936 0%,
            #191d27 32%,
            #10131a 66%,
            #080a0f 100%
        );

    font-family: "Noto Sans Thai", sans-serif;

    -webkit-user-select: none;
    user-select: none;

    -webkit-touch-callout: none;
}


/* Stop dragging mah shit */
img {
    -webkit-user-drag: none;
    user-drag: none;

    -webkit-user-select: none;
    user-select: none;

    -webkit-touch-callout: none;
}


/* Main */
.content {
    position: relative;
    z-index: 2;

    min-height: 100dvh;

    padding:
        60px
        20px
        80px;

    box-sizing: border-box;
}


/* Soft glow */
.content::before {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 12%,
            rgba(160, 190, 215, 0.06),
            transparent 38%
        );

    z-index: -1;
}


/* Language */
.language-switch {
    position: fixed;

    top: 15px;
    left: 15px;

    z-index: 20;

    display: flex;
    gap: 8px;
}

.language-switch button {
    padding: 8px 14px;

    border:
        1px solid
        rgba(178, 202, 220, 0.46);

    border-radius: 999px;

    background:
        rgba(20, 24, 33, 0.72);

    color: #f2f7fa;

    font-family:
        "Noto Sans Thai",
        sans-serif;

    font-size: 0.9rem;
    font-weight: 600;

    cursor: pointer;

    backdrop-filter: blur(7px);

    box-shadow:
        0 0 10px
        rgba(185, 215, 235, 0.05);

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.language-switch button:hover {
    background:
        rgba(42, 50, 65, 0.9);

    transform:
        translateY(-1px);
}


/* Home */
.home-button {
    position: fixed;

    top: 15px;
    right: 15px;

    z-index: 20;

    padding: 8px 14px;

    text-decoration: none;

    color: #f2f7fa;

    background:
        rgba(20, 24, 33, 0.72);

    border:
        1px solid
        rgba(178, 202, 220, 0.46);

    border-radius: 999px;

    font-family:
        "Noto Sans Thai",
        sans-serif;

    font-size: 0.9rem;
    font-weight: 600;

    backdrop-filter: blur(7px);

    box-shadow:
        0 0 10px
        rgba(185, 215, 235, 0.05);

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.home-button:hover {
    background:
        rgba(42, 50, 65, 0.9);

    transform:
        translateY(-1px);
}


/* Header */
h1 {
    position: relative;
    z-index: 2;

    margin:
        1vh
        20px
        8px;

    text-align: center;

    color: #f5fafc;

    font-family:
        "Mali",
        cursive;

    font-size:
        clamp(
            1.9rem,
            6vw,
            2.8rem
        );

    font-weight: 700;

    text-shadow:
        0 2px 6px
        rgba(0, 0, 0, 0.9),

        0 0 8px
        rgba(210, 230, 240, 0.12);
}


/* Camera */
.ascii-wrapper {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: center;

    width: 100%;

    margin:
        12px
        auto
        18px;

    overflow: hidden;
}

.photos-ascii {
    margin: 0;

    color: #9fc8d6;

    font-family: monospace;

    font-size:
        clamp(
            0.3rem,
            0.9vw,
            0.65rem
        );

    line-height: 1;

    white-space: pre;

    text-align: center;

    text-shadow:
        0 1px 2px
        rgba(0, 0, 0, 0.8),

        0 0 5px
        rgba(130, 205, 225, 0.22),

        0 0 10px
        rgba(100, 185, 210, 0.10);
}


/* Photo Count */
h2 {
    position: relative;
    z-index: 2;

    width: 92%;
    max-width: 900px;

    margin:
        8px
        auto
        25px;

    text-align: center;

    color: #dce7ec;

    font-family:
        "Mali",
        cursive;

    font-size:
        clamp(
            1.05rem,
            2.5vw,
            1.35rem
        );

    font-weight: 500;

    text-shadow:
        0 2px 5px
        rgba(0, 0, 0, 0.8),

        0 0 6px
        rgba(190, 215, 225, 0.08);
}


/* The Gallery */
.photo-gallery {
    position: relative;
    z-index: 2;

    width: 94%;
    max-width: 1250px;

    margin:
        0
        auto;

    columns: 4;
    column-gap: 16px;
}


/* Each Photo */
.photo-gallery img {
    width:
        calc(100% - 12px);

    display: block;

    margin:
        0
        0
        16px;

    padding: 6px;

    box-sizing: border-box;

    background:
        rgba(190, 220, 230, 0.06);

    border:
        1px solid
        rgba(150, 205, 220, 0.36);

    border-radius: 14px;

    break-inside: avoid;

    cursor: pointer;

    box-shadow:
        0 8px 18px
        rgba(0, 0, 0, 0.45),

        0 0 10px
        rgba(130, 205, 220, 0.06);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border 0.2s ease;
}

.photo-gallery img:hover {
    transform:
        translateY(-3px)
        scale(1.015);

    border-color:
        rgba(175, 225, 235, 0.65);

    box-shadow:
        0 12px 25px
        rgba(0, 0, 0, 0.5),

        0 0 16px
        rgba(145, 215, 225, 0.12);
}


/* Full Screen Photo */
.photo-modal {
    position: fixed;
    inset: 0;

    z-index: 100;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    box-sizing: border-box;

    background:
        rgba(4, 6, 10, 0.94);

    backdrop-filter: blur(10px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}

.photo-modal.show {
    opacity: 1;
    visibility: visible;
}

.photo-modal img {
    max-width: 92vw;
    max-height: 90dvh;

    object-fit: contain;

    border-radius: 14px;

    border:
        1px solid
        rgba(170, 220, 230, 0.55);

    box-shadow:
        0 0 22px
        rgba(150, 215, 225, 0.14),

        0 15px 50px
        rgba(0, 0, 0, 0.75);
}


/* Big Butt-close button */
.close-photo {
    position: fixed;

    top: 20px;
    right: 25px;

    z-index: 110;

    width: 45px;
    height: 45px;

    border-radius: 50%;

    border:
        1px solid
        rgba(180, 220, 230, 0.5);

    background:
        rgba(25, 30, 40, 0.9);

    color: #efffff;

    font-size: 1.8rem;
    line-height: 1;

    cursor: pointer;
}


/* Stop page scrolling when enlarged */
body.modal-open {
    overflow: hidden;
}


/* Tablet */
@media (max-width: 1000px) {

    .photo-gallery {
        columns: 3;
    }
}


/* Phone Debug */
@media (max-width: 650px) {

    .content {
        padding:
            55px
            8px
            60px;
    }

    .language-switch {
        top: 10px;
        left: 10px;

        gap: 5px;
    }

    .language-switch button {
        padding:
            6px
            10px;

        font-size: 0.8rem;
    }

    .home-button {
        top: 10px;
        right: 10px;

        padding:
            6px
            10px;

        font-size: 0.8rem;
    }

    h1 {
        margin-top: 6px;

        font-size:
            clamp(
                1.7rem,
                8vw,
                2.3rem
            );
    }

    .ascii-wrapper {
        margin:
            10px
            auto
            14px;
    }

    .photos-ascii {
        font-size:
            clamp(
                0.17rem,
                1.4vw,
                0.32rem
            );
    }

    h2 {
        width: 94%;

        margin-bottom: 18px;
    }

    .photo-gallery {
        width: 97%;

        columns: 2;

        column-gap: 9px;
    }

    .photo-gallery img {
        width:
            calc(100% - 6px);

        margin-bottom: 9px;

        padding: 4px;

        border-radius: 10px;
    }

    .photo-modal {
        padding: 12px;
    }

    .close-photo {
        top: 12px;
        right: 12px;

        width: 40px;
        height: 40px;
    }
}


/* For Phone */
@media (max-width: 380px) {

    .photo-gallery {
        columns: 1;
    }
}