#horses {
    --flowers: 70%;
    /* background: url('assets/horse-jp-transparent.png'), linear-gradient(to right, #004abe var(--flowers), #87b700 var(--flowers)); */
    background: linear-gradient(to right, #004abe var(--flowers), #87b700 var(--flowers));
    width: 100%;
    height: 100vh;
    z-index: -2;
    position: relative;

    #sub-bg {
        width: var(--flowers);
        height: 100vh;

        background-image: url('/welcome/assets/horse-jp-transparent.png');
        background-color: transparent;
        background-size: 50px;
        background-position-x: 0px;

        z-index: -2;
        position: absolute;
        left: 0%;

        /* transform: rotateY(70deg); */

        animation-name: rotateY;
        animation-duration: 1000ms;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    h1 {
        --hover-range: 10px;
        font-size: 7em;
        text-transform: lowercase;
        position: absolute;
        z-index: 2;
        background: linear-gradient(to right, transparent, rgb(184, 247, 255) 80%) #ffffff29;
        display: inline;
        padding: 0 10px;
        margin: 0;
        top: 10%;
        left: 15%;
        /* box-shadow: 0px 511px 20px -20px black; */
        animation: hover 1000ms linear infinite alternate;


        span:nth-child(1) {
            /* font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */
        }

        span:nth-child(2) {
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        }

        span:nth-child(3) {
            /* font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */
        }

        span:nth-child(4) {
            /* font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */
        }

        span:nth-child(5) {
            /* font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */
        }

        span:nth-child(6) {
            /* font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */
            font-style: italic;
        }
    }

    h2 {
        color: yellow;
        font-style: italic;
        font-size: 49px;
        margin: 0;
    }

    .shadow {
        --hover-range: 10px;
        position: absolute;
        background: black;
        background-color: black;
        display: inline-block;
        background-color: black;
        width: 435px;
        height: 100px;
        top: calc(10% + 511px + 20px);
        left: calc(20% + 20px);
        box-shadow: 0px 0px 20px 20px black;
        z-index: 0;
        animation: hover 1000ms linear infinite alternate;
    }

    #fence {
        background-image: url(/welcome/assets/fence3.png);
        background-repeat: repeat-x;
        height: 100px;
        width: 100%;
        position: absolute;
        bottom: 5%;
        z-index: 1;
    }

    #horse-zone {
        /* box-shadow: inset 0px 0px 20px 20px white; */
        position: absolute;
        /* background-color: #000000d4; */
        left: 20%;
        top: calc(10% + 511px);
        width: 475px;
        max-width: 100%;
        height: 150px;
        border: 1px solid red;
        z-index: 1;
    }

    .horse {
        position: absolute;
        width: 50px;
        height: 50px;
        z-index: 2;

        animation-name: horse-levitate;
        animation-duration: 2000ms;
        animation-timing-function: linear;
        animation-fill-mode: forwards;

        transform-origin: center;

        img {
            width: 100%;

            animation-name: horse-rotate;
            animation-duration: 2000ms;
            animation-timing-function: linear;
            animation-fill-mode: forwards;
        }
    }

    .mirror {
        transform: rotateY(180deg);
    }

    #sunflower {
        height: 100vh;
        width: calc(100% - var(--flowers));

        position: absolute;
        right: 0;
        top: 0;
        z-index: -1;

        background-image: url('/welcome/assets/sunflowers-clipart.png'),
            url('/welcome/assets/sunflowers-clipart.png'),
            url('/welcome/assets/sunflowers-clipart.png'),
            url('/welcome/assets/sunflowers-clipart.png');
        background-size: cover;
        background-repeat: repeat-y;
        background-position-x: left, center, center;
        /* background-blend-mode: hue, color-burn, luminosity; */
        background-blend-mode: color-burn;
        /* background-position-x: 0, -199px, -170px, -130px; */
        background-position-y: 0, 0, -380px, -57px;
    }

}