@media (prefers-color-scheme: dark) {
    body {
        margin: 0;
    }

    *,
    :after,
    :before {
        box-sizing: border-box
    }

    .pull-left {
        float: left
    }

    .pull-right {
        float: right
    }

    .clearfix:after,
    .clearfix:before {
        content: '';
        display: table
    }

    .clearfix:after {
        clear: both;
        display: block
    }

    .halloween .head .skull:before,
    .halloween .head .skull:after,
    .halloween .eyes .eye:before,
    .halloween .body:before,
    .halloween .body:after,
    .halloween .legs:before {
        content: '';
        position: absolute;
    }

    .halloween {
        bottom: 3%;
        left: 2%;
        width: 30px;
        height: 44px;
        position: fixed;
        margin-top: -22px;
        margin-left: -15px;
        animation: move 3s infinite;
    }

    .halloween .head {
        z-index: 1;
        width: 25px;
        height: 25px;
        background: #444;
        border-radius: 50%;
        position: relative;
    }

    .halloween .head .skull {
        left: 2px;
        bottom: 2px;
        width: 16px;
        height: 16px;
        color: #f9f9f9;
        border-radius: 50%;
        background: #f9f9f9;
        position: absolute;
        animation: skull 3s infinite;
    }

    .halloween .head .skull:before {
        top: 9px;
        width: 0;
        left: 50%;
        height: 0;
        z-index: 1;
        margin-left: -2px;
        border: 2px solid transparent;
        border-bottom: 2px solid #444;
    }

    .halloween .head .skull:after {
        top: 14px;
        left: 50%;
        width: 1px;
        height: 4px;
        margin-left: -1px;
        background: #f9f9f9;
        box-shadow: 2px 0, -2px 0, 4px 0, -4px 0,
            -3px -2px, -1px -2px, 1px -2px, 3px -2px
    }

    .halloween .eyes {
        width: inherit;
        height: inherit;
        overflow: hidden;
        border-radius: 50%;
        position: relative;
    }

    .halloween .eyes .eye {
        top: 5px;
        width: 5px;
        height: 5px;
        position: absolute;
        border-radius: 50%;
        background: #f8cd22;
        border: 1px solid #444;
        border-right: 2px solid #444;
    }

    .halloween .eyes .eye:before {
        top: -1px;
        left: -1px;
        width: 5px;
        height: 3px;
        background: #f9f9f9;
        border-radius: 5px 5px 0 0;
        animation: eyes 3s infinite;
    }

    .halloween .eyes .eye.eye-left {
        left: 1px;
    }

    .halloween .eyes .eye.eye-right {
        right: 1px;
    }

    .halloween .body {
        top: -3px;
        width: 24px;
        height: 17px;
        background: #444;
        position: relative;
        border-radius: 10px 10px 2px 2px;
    }

    .halloween .body:before,
    .halloween .body:after {
        top: 3px;
        width: 4px;
        height: 12px;
        background: #444;
    }

    .halloween .body:before {
        left: -1px;
        border-radius: 100% 0 0 2px;
        transform: rotate(10deg);
        animation: hand-left 3s infinite;
    }

    .halloween .body:after {
        right: -1px;
        border-radius: 0 100% 2px 0;
        transform: rotate(-10deg);
        animation: hand-right 3s infinite;
    }

    .halloween .legs {
        top: -3px;
        left: 50%;
        width: 21px;
        height: 10px;
        overflow: hidden;
        margin-left: -13px;
        position: relative;
        /* border-bottom: 1px solid rgba(0, 0, 0, .2); // This is the shadow at the bottom */
    }

    .halloween .legs:before {
        top: 0;
        left: -7px;
        width: 60px;
        height: 10px;
        background-image: linear-gradient(-495deg, #444 4px, transparent 0), linear-gradient(-45deg, transparent 4px, #444 0);
        background-size: 4px 8px;
        background-repeat: repeat-x;
        animation: legs 3s infinite;
    }

    @keyframes move {
        0% {
            transform: translateX(0)
        }

        50% {
            transform: translateX(15px)
        }

        100% {
            transform: translateX(0)
        }
    }

    @keyframes skull {
        0% {
            transform: translate(0, 0)
        }

        25% {
            transform: translate(2px, 1px)
        }

        75% {
            transform: translate(3px, -1px)
        }

        100% {
            transform: translate(0, 0)
        }
    }

    @keyframes eyes {
        0% {
            top: -5px;
            border-radius: 50%;
        }

        50% {
            top: -1px;
            border-radius: 5px 5px 0 0;
        }

        100% {
            top: -5px;
            border-radius: 50%;
        }
    }

    @keyframes legs {
        0% {
            left: -7px;
        }

        50% {
            left: -25px;
        }

        100% {
            left: -7px;
        }
    }

    @keyframes hand-left {
        0% {
            left: 1px;
        }

        50% {
            left: -2px;
        }

        100% {
            left: 1px;
        }
    }

    @keyframes hand-right {
        0% {
            right: 1px;
        }

        50% {
            right: -2px;
        }

        100% {
            right: 1px;
        }
    }
}