augustkline.com/site/style.css

@font-face {
    src: url("./assets/fonts/LatinModernMonoRegular.otf");
    font-family: "LatinModernMono";
    font-style: normal;
    font-weight: normal;
}

@font-face {
    src: url("./assets/fonts/LatinModernMonoBold.otf");
    font-family: "LatinModernMono";
    font-weight: bold;
    font-style: normal;
}

@font-face {
    src: url("./assets/fonts/LatinModernMonoBoldOblique.otf");
    font-family: "LatinModernMono";
    font-weight: bold;
    font-style: oblique;
}

@font-face {
    src: url("./assets/fonts/LatinModernMonoItalic.otf");
    font-family: "LatinModernMono";
    font-weight: normal;
    font-style: oblique;
}

@font-face {
    src: url("./assets/fonts/Bienchena.ttf");
    font-family: "Bienchen";
}

:root {
    --text-color: color-mix(in srgb, black 40%, darkslategrey 60%);
    --text-bg-color: snow;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--text-color);
}

body,
html {
    block-size: 100%;
    inline-size: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    background-color: linen;
}

::selection {
    background: color-mix(in srgb, mistyrose 80%, transparent 20%);
    /* background: lightpink; */
}


a {
    &[href^="http"] {
        --color: darkgreen;
        text-decoration-style: dashed;
    }

    text-decoration-thickness: 1px;

    --color: firebrick;
    color: var(--color);
    text-decoration-style: wavy;

    @media not (prefers-reduced-motion) {
        transition: 0.3s outline ease,
            0.2s text-shadow ease;
    }

    outline: 2px transparent solid;

    @media (hover:hover) {
        &:hover {
            text-shadow: 0px 0px 1px var(--color);
        }
    }

    &:focus-visible {
        outline: 2px var(--color) solid;
    }
}

main {
    user-select: none;
    /* top: 50%; */
    /* left: 50%; */
    /* position: absolute; */
    container-type: size;
    background: var(--text-bg-color);
    transform: rotate(-1deg);
    aspect-ratio: 5.5 / 8.75;
    font-family: "Bienchen";
    box-shadow: 5px 5px 20px rgba(152, 97, 42, 0.1);
    word-wrap: pretty;
    margin: auto;

    --scale: 0.9;

    --block: calc(var(--scale) * 100svb);
    --inline: calc(var(--scale) * 100svi * (8.75 / 5.5));

    block-size: min(var(--inline), var(--block));

    transition: 0.3s transform ease, 0.3s box-shadow ease;

    &>div {
        padding: 2% 5%;
        font-size: 8cqb;
    }

    .content {
        transform: rotate(-0.5deg);
    }

    h1 {
        img {
            max-inline-size: 70cqi;
        }

        font-size: 1em;
        margin-block: 0.5em;
        color: darkblue;
        user-select: text;
    }

    p,
    li {
        font-family: "LatinModernMono";
        line-height: 1.1em;
        user-select: text;
    }

    .content {
        font-size: 0.4em;
    }

    @media not (prefers-reduced-motion) {
        @media (hover:hover) {
            &:hover {
                transform: scale(1.025) rotate(0deg);
                box-shadow: 0px 0px 30px rgba(152, 97, 42, 0.05);
            }
        }
    }

    .signature {
        appearance: none;
        color: unset;
        text-decoration: none;
        position: absolute;
        right: 10%;
        font-family: "Bienchen";
        font-size: 0.65em;
        line-height: 0.8em;
        transform: rotate(-4deg);
        text-align: end;

        transition: outline 0.3s ease, transform 0.2s ease;

        @media not (prefers-reduced-motion) {
            * {
                transition: text-shadow 0.2s ease;
                text-shadow: -1px 2px 4px rgba(152, 97, 42, 0);
            }


            @media (hover:hover) {

                &:hover,
                &:focus-visible {
                    transform: translateY(-2px) rotate(-2deg) scale(1.025);

                    * {
                        text-shadow: 0px 2px 4px rgba(152, 97, 42, 0.1);
                    }
                }
            }
        }

        outline: 2px transparent solid;

        &:focus-visible {
            outline: 2px crimson solid;
        }

    }

    .valediction {
        color: crimson;
        letter-spacing: -0.03em;
    }

}

.clipped {
    position: absolute;
    display: block;
    container-type: inline-size;
    z-index: 100;
    top: 0;
    right: 0;
    inline-size: 20cqi;

    :first-child {
        inline-size: 100cqi;
        position: relative;
    }

    .clipped-items {
        appearance: none;
        display: block;
        transform: rotate(17deg);
        color: unset;
        text-shadow: unset;

        img {
            position: relative;
            box-shadow: 0px 4px 8px rgba(152, 97, 42, 0.2);
            outline: 2px transparent solid;
            transition: outline 0.3s ease;
        }

        .slip {
            appearance: unset;
            margin: 0;

            * {
                margin: 0;
            }

            position: absolute;
            background: antiquewhite;
            color: var(--text-color);
            font-size: 0.35em;
            padding-inline: 0.5ch;
            display: block;
            z-index: -1;
            --mask: conic-gradient(from 60deg at left, #0000, #000 1deg 59deg, #0000 60deg) left/51% 0.2em repeat-y,
            conic-gradient(from -120deg at right, #0000, #000 1deg 59deg, #0000 60deg) right/51% 0.2em repeat-y;
            -webkit-mask: var(--mask);
            mask: var(--mask);
        }

        .slip-george {
            bottom: 20%;
            left: 40%;
            transform: translateX(-50%) rotate(-5deg);
        }

        .slip-label {
            z-index: 1;
            bottom: 65%;
            left: 70%;
            transform: translateX(-50%) rotate(25deg);
        }

        &:focus-visible {
            outline: none;

            img {
                outline: 2px crimson solid;
            }
        }
    }

    .paperclip {
        position: absolute;
        right: 0;
        top: -20%;
        inline-size: 50cqi;
        filter: brightness(0.85);
    }

    @media (prefers-reduced-motion),
    (hover: none) {
        .clipped-items {
            transform: rotate(9deg) translateX(-5cqi, 0);

            .slip-george {
                bottom: 1cqb;
                left: 40cqi;
                transform: translateX(-50%) rotate(-15deg);
            }
        }

        .paperclip {
            transform: rotate(4deg);
            top: -3cqb;
        }
    }


    @media not (prefers-reduced-motion) {
        @media (hover:hover) {
            * {
                transition: transform 0.4s ease, top 0.3s ease, bottom 0.3s ease, left 0.3s ease;
            }

            &:has(.clipped-items:focus) {
                .clipped-items {
                    transform: rotate(9deg) translate(-5%, 10%);
                }

                .paperclip {
                    transform: rotate(4deg);
                    top: -25%;
                }
            }


            &:hover,
            &:focus-visible {
                .clipped-items {
                    transform: rotate(9deg) translate(-5%, 10%);

                    .slip-george {
                        bottom: 5%;
                        left: 50%;
                        transform: translateX(-50%) rotate(-18deg);
                    }

                    .slip-sitemap {
                        bottom: 70%;
                        left: -30%;
                        transform: translateX(-50%) rotate(7deg);
                    }
                }

                .paperclip {
                    transform: rotate(4deg);
                    top: -25%;
                }
            }
        }
    }
}

.authority {
    img {
        block-size: 8cqb;
        opacity: 0.9;
    }
}

.stamp {
    display: block;

    img {
        position: absolute;
        transition: 0.3s transform ease;
        block-size: 15cqb;
    }

    @media (hover:hover) {
        &:hover {
            img {
                transform: rotate(0deg) scale(1.05) !important;
            }
        }
    }
}

.taped {

    img {
        max-block-size: 35cqb;
        max-inline-size: 60cqi;
        /* box-shadow: 0px 0px 8px rgba(152, 97, 42, 0.3); */
    }

    &::before,
    &::after {
        content: "";
        display: block;
        position: absolute;
        block-size: 4.5cqb;
        aspect-ratio: 8 / 3;
        transform: rotate(-45deg);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0.95;
    }

    &::before {
        top: 0cqb;
        left: -6cqi;
        background-image: var(--washi-url-0);
    }

    &::after {
        bottom: 1cqb;
        right: -6cqi;
        background-image: var(--washi-url-1);
    }
}

.taped,
.gallery-3 {
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    margin-inline-start: 50%;
    transform: translateX(-50%) rotate(1deg);
}

.gallery-3 {
    img {
        max-block-size: 25cqb;
        max-inline-size: 40cqi;
    }

    div {

        /* position: absolute; */
        &::before,
        &::after {
            content: "";
            display: block;
            position: absolute;
            block-size: 3cqb;
            aspect-ratio: 8 / 3;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 0.95;
        }

        --washi-url-0: url("/assets/images/washi/0.png");
        --washi-url-1: url("/assets/images/washi/0.png");

        &::before {
            top: -2cqb;
            left: 50%;
            transform: translateX(-50%);
            background-image: var(--washi-url-0);
        }
    }

    &>* {
        position: relative;
    }

    &>:nth-child(1) {
        transform: translate(40%, 10%) rotate(-8deg);
    }

    &>:nth-child(2) {
        z-index: 100;
    }

    &>:nth-child(3) {
        transform: translate(-40%, 10%) rotate(8deg);
    }
}

.pos-anchor {
    position: relative;
}