:root {
    --color-grass: #87ffca;
    --color-grass-lines: #6ccca2;
    --text-colour: #363636;
    --background-colour: LightSkyBlue;
    --body-padding: 16px;
    --min-width: 12rem;
    --font-serif: "Comic Neue", "DejaVu Sans", sans-serif;

    /* Grid */
    --size-grid-full: minmax(1em, auto);
}

@font-face {
    font-family: "Comic Neue";
    src: url("/assets/ComicNeue-Bold.woff2");
    weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-play-state: paused !important;
        animation-
    }
}

html {
    height: 100%;
}

body {
    margin: 0;
    height: 100%;
    color: var(--text-colour);
    font-family: var(--font-serif);
    text-transform: lowercase;
    background-color: var(--background-colour);
}

main {
    display: grid;
    grid-template-columns:
        [full-start] var(--size-grid-full)
        [page-start] 90vw [page-end] var(--size-grid-full) [full-end];
    align-content: space-between;
    width: 100%;
    height: 100%;
}

img {
    width: 128px;
    /* transform: rotateY(180deg); */
}

h1 {
    grid-column: page;
}

div.garden {
    grid-column: full;
    position: relative;
    width: 100%;
    height: 220px;
}

div.left,
div.right {
    position: absolute;
    bottom: 0;
    background-repeat: no-repeat;
}

div.left {
    left: 0;
    height: 100%;
    background-image: url("/assets/left.svg");
    aspect-ratio: 1/0.26;
}

div.right {
    right: 0;
    height: 62%;
    background-image: url("/assets/right.svg");
    aspect-ratio: 5.95/1;
}

img {
    offset-path: path(
        "M1.17340258,104.094895 C161.076384,55.8647944 505.888288,14.1176057 678.849368,5.20409524 C701.1707,4.05377043 720.629864,3.45028899 736.460045,3.45028899"
    );
    offset-distance: 50%;
    animation: move 15s infinite reverse ease-in-out;
}

@keyframes move {
    48% {
        transform: rotateY(0);
    }
    50% {
        offset-distance: 100%;
        transform: rotateY(180deg);
    }

    98% {
        transform: rotateY(180deg);
    }

    100% {
        transform: rotateY(0);
    }
}