html * {
    overflow: hidden;
    overflow: clip;
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    text-decoration: inherit;
    text-align: inherit;
    scroll-behavior: smooth;
    box-sizing: border-box;
}

b {
    font-weight: bold;
}

:root {
    --col0: #fff;
    --col1: #444;
    --col2: #222;
    --accent: #088;
}

body {
    cursor: default;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: var(--col1);
    background-color: var(--col0);
    overflow-y: auto;

    --navheight: 80px;

    @media (min-height: 400px) {
        --navheight: 105px;
    }

    &>nav {
        --distance: 48px;

        display: flex;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        background-color: var(--col0);
        top: 0;
        left: 0;
        width: 100%;
        height: var(--navheight);
        padding: 0 var(--distance);
        z-index: 10;

        &>left {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            font-size: 36px;
            color: var(--col1);
            gap: var(--distance);

            &>svg {
                width: 1em;
                height: 1em;
            }

            &>txt {
                font-weight: bold;
            }
        }
    }

    &>intro {
        display: block;
        width: 100%;
        height: calc(100vh - var(--navheight));
        color: var(--col1);

        &>message {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            flex-direction: column;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: calc(100vh - var(--navheight));
            padding: 0 20% 0 10%;
            gap: 32px;

            @media (max-height: 340px) {
                gap: 12px;
            }

            @media (min-height: 450px) {
                gap: 64px;
            }

            &>txt {
                display: block;
                line-height: 1.3em;
                width: 100%;
                word-wrap: break-word;
                /* text-wrap: balance; */

                font-size: 32px;

                @media(min-width: 480px) and (min-height: 520px) {
                    font-size: 48px;
                }

                @media (min-width: 720px) and (min-height: 750px) {
                    font-size: 64px;
                }

                @media (min-width: 1450px) and (min-height: 750px) {
                    font-size: 94px;
                }

                &>b {
                    color: var(--accent);
                }
            }

            &>a {
                display: inline-block;
                padding: 18px 38px;
                background-color: var(--accent);
                color: var(--col0);
                cursor: pointer;
                user-select: none;
                font-size: 18px;
            }
        }
    }

    &>main {
        display: block;
        z-index: 1;
        position: relative;
        background-color: var(--col2);
        color: var(--col0);

        &>sample {
            display: flex;
            align-items: center;
            align-content: center;
            justify-content: right;
            flex-wrap: wrap;
            width: 100%;
            min-height: calc(100vh - var(--navheight));
            gap: 48px;

            &>txt {
                display: flex;
                justify-content: center;
                align-items: center;
                max-width: 100%;
                flex-shrink: 0;
                flex-grow: 1;
                padding: 0 32px;

                &>inner {
                    display: block;
                    max-width: 400px;
                    font-size: 34px;
                    text-align: center;
                    line-height: 1.3em;
                }
            }

            &>images {
                display: flex;
                gap: 64px;
                max-width: 100%;
                flex-shrink: 0;
                flex-grow: 0;

                &>img {
                    border: 8px solid;
                    border-radius: 32px;
                    flex-shrink: 1;
                }
            }

            &#first {
                background-color: var(--col2);
                padding: 48px 0;

                &>txt {
                    color: var(--col0);
                }

                &>images {
                    align-items: center;
                    height: min(calc(56.4vw - 36px), calc(100vh - var(--navheight) - 64px));
                    gap: calc(min(calc(56.4vw - 36px), calc(100vh - var(--navheight) - 64px)) / 11);

                    &>img {
                        border-color: var(--col0);
                        height: 100%;

                        &:last-child {
                            border-top-right-radius: 0;
                            border-bottom-right-radius: 0;
                            border-right: none;
                        }
                    }

                }
            }

            &#second {
                background-color: var(--col0);
                flex-direction: row-reverse;

                &>txt {
                    color: var(--col2);
                    padding: 32px;
                }

                &>images {
                    height: calc(100vh - var(--navheight));
                    align-items: flex-end;

                    &>img {
                        border-color: var(--col2);
                        background-color: var(--col2);
                        margin-left: 92px;
                        height: 87%;
                        border-bottom: none;
                        border-bottom-left-radius: 0;
                        border-bottom-right-radius: 0;
                    }
                }
            }
        }

        &>placeholder {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 800px;
        }
    }

    &>footer {
        --gap: 16px;

        display: flex;
        justify-content: flex-start;
        align-items: center;
        background-color: var(--col2);
        width: 100%;
        height: 48px;
        padding: 0 var(--gap);
        position: relative;
        z-index: 1;
        font-size: 16px;

        &>a {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            color: var(--col0);
            cursor: pointer;
            padding: 0 var(--gap);
        }
    }
}