@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Luckiest+Guy&display=swap');

halloween {
    left: 0;
    right: 0;
    text-align: center;
    -webkit-animation: heart-beat 1s 2s infinite alternate cubic-bezier(0.18, 0.89, 0.4, 1.67);
    animation: heart-beat 1s 2s infinite alternate cubic-bezier(0.18, 0.89, 0.4, 1.67);
}

halloween span {
    font-family: "Creepster", cursive !important;
    color: rgba(255, 255, 255, 0.4);
    background: linear-gradient(3deg, orange 50%, #c11 51%, #822 70%);
    background-size: 450%;
    -webkit-animation: text-gradient 5s 1s infinite alternate ease-in-out;
    animation: text-gradient 5s 1s infinite alternate ease-in-out;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.bat {
    top: 15%;
    left: 75%;
    transform: translate(-50%);
    width: 1em;
    height: 1.2em;
    -webkit-animation: 4s infinite alternate ease-in-out;
    animation: 4s infinite alternate ease-in-out;
}

.bat,
.bat *,
.bat :before,
.bat :after {
    position: absolute;
}

.bat__head {
    background: #333;
    width: 100%;
    height: 100%;
    border-radius: 2em;
}

.bat__eye {
    background: radial-gradient(#fc0 15%, #c80 40%);
    width: 0.2em;
    height: 0.2em;
    border-radius: 1em;
    left: 18%;
    bottom: 50%;
}

.bat__eye+.bat__eye {
    left: auto;
    right: 18%;
}

.bat__wing {
    width: 4em;
    height: 1.6em;
    right: 50%;
    bottom: 20%;
    background: #333;
    -webkit-clip-path: polygon(65% 59%, 39% 53%, 33% 33%, 10% 22%, 0 0, 70% 0, 100% 65%, 100% 100%);
    clip-path: polygon(65% 59%, 39% 53%, 33% 33%, 10% 22%, 0 0, 70% 0, 100% 65%, 100% 100%);
    z-index: -1;
    transform-origin: 100%;
    -webkit-animation: wing 0.1s infinite alternate ease-in-out;
    animation: wing 0.1s infinite alternate ease-in-out;
}

.bat__wing+.bat__wing {
    left: 50%;
    right: auto;
    -webkit-clip-path: polygon(0% 100%, 0 65%, 30% 0, 100% 0%, 91% 22%, 66% 33%, 61% 53%, 35% 59%);
    clip-path: polygon(0% 100%, 0 65%, 30% 0, 100% 0%, 91% 22%, 66% 33%, 61% 53%, 35% 59%);
    -webkit-animation: wing 0.1s 0.1s infinite alternate ease-in-out;
    animation: wing 0.1s 0.1s infinite alternate ease-in-out;
    transform-origin: 0;
}

@-webkit-keyframes wing {
    0% {
        transform: rotate(20deg);
    }

    100% {
        transform: rotate(-30deg);
    }
}

@keyframes wing {
    0% {
        transform: rotate(20deg);
    }

    100% {
        transform: rotate(-30deg);
    }
}

.bat:nth-child(1) {
    -webkit-animation-name: fly-1;
    animation-name: fly-1;
    -webkit-animation-duration: 9s;
    animation-duration: 9s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

@-webkit-keyframes fly-1 {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(0, 0);
    }

    20% {
        transform: translate(7vw, 6vh);
    }

    40% {
        transform: translate(2vw, -3vh);
    }

    60% {
        transform: translate(-7vw, 4vh);
    }

    80% {
        transform: translate(7vw, -8vh);
    }

    100% {
        transform: translate(5vw, 0);
        top: 25vh;
    }
}

@keyframes fly-1 {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(0, 0);
    }

    20% {
        transform: translate(7vw, 6vh);
    }

    40% {
        transform: translate(2vw, -3vh);
    }

    60% {
        transform: translate(-7vw, 4vh);
    }

    80% {
        transform: translate(7vw, -8vh);
    }

    100% {
        transform: translate(5vw, 0);
        top: 25vh;
    }
}

.bat:nth-child(2) {
    -webkit-animation-name: fly-2;
    animation-name: fly-2;
    -webkit-animation-duration: 9s;
    animation-duration: 9s;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

@-webkit-keyframes fly-2 {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(0, 0);
    }

    20% {
        transform: translate(-4vw, 0vh);
    }

    40% {
        transform: translate(7vw, 0vh);
    }

    60% {
        transform: translate(4vw, -2vh);
    }

    80% {
        transform: translate(0vw, 0vh);
    }

    100% {
        transform: translate(2vw, 0);
        top: 41vh;
    }
}

@keyframes fly-2 {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(0, 0);
    }

    20% {
        transform: translate(-4vw, 0vh);
    }

    40% {
        transform: translate(7vw, 0vh);
    }

    60% {
        transform: translate(4vw, -2vh);
    }

    80% {
        transform: translate(0vw, 0vh);
    }

    100% {
        transform: translate(2vw, 0);
        top: 41vh;
    }
}

.bat:nth-child(3) {
    -webkit-animation-name: fly-3;
    animation-name: fly-3;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

@-webkit-keyframes fly-3 {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(0, 0);
    }

    20% {
        transform: translate(-3vw, 1vh);
    }

    40% {
        transform: translate(2vw, -1vh);
    }

    60% {
        transform: translate(1vw, 0vh);
    }

    80% {
        transform: translate(10vw, 10vh);
    }

    100% {
        transform: translate(9vw, 0);
        top: 65vh;
    }
}

@keyframes fly-3 {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(0, 0);
    }

    20% {
        transform: translate(-3vw, 1vh);
    }

    40% {
        transform: translate(2vw, -1vh);
    }

    60% {
        transform: translate(1vw, 0vh);
    }

    80% {
        transform: translate(10vw, 10vh);
    }

    100% {
        transform: translate(9vw, 0);
        top: 65vh;
    }
}

.bat:nth-child(4) {
    -webkit-animation-name: fly-4;
    animation-name: fly-4;
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}

@-webkit-keyframes fly-4 {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(0, 0);
    }

    20% {
        transform: translate(-7vw, 8vh);
    }

    40% {
        transform: translate(-5vw, -9vh);
    }

    60% {
        transform: translate(4vw, 5vh);
    }

    80% {
        transform: translate(8vw, 9vh);
    }

    100% {
        transform: translate(-7vw, 0);
        top: 69vh;
    }
}

@keyframes fly-4 {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(0, 0);
    }

    20% {
        transform: translate(-7vw, 8vh);
    }

    40% {
        transform: translate(-5vw, -9vh);
    }

    60% {
        transform: translate(4vw, 5vh);
    }

    80% {
        transform: translate(8vw, 9vh);
    }

    100% {
        transform: translate(-7vw, 0);
        top: 69vh;
    }
}

.bat:nth-child(5) {
    -webkit-animation-name: fly-5;
    animation-name: fly-5;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

@-webkit-keyframes fly-5 {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(0, 0);
    }

    20% {
        transform: translate(-7vw, 10vh);
    }

    40% {
        transform: translate(8vw, 10vh);
    }

    60% {
        transform: translate(0vw, -3vh);
    }

    80% {
        transform: translate(-4vw, -8vh);
    }

    100% {
        transform: translate(10vw, 0);
        top: 70vh;
    }
}

@keyframes fly-5 {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(0, 0);
    }

    20% {
        transform: translate(-7vw, 10vh);
    }

    40% {
        transform: translate(8vw, 10vh);
    }

    60% {
        transform: translate(0vw, -3vh);
    }

    80% {
        transform: translate(-4vw, -8vh);
    }

    100% {
        transform: translate(10vw, 0);
        top: 70vh;
    }
}

.bat:nth-child(6) {
    -webkit-animation-name: fly-6;
    animation-name: fly-6;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}

@-webkit-keyframes fly-6 {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(0, 0);
    }

    20% {
        transform: translate(0vw, 5vh);
    }

    40% {
        transform: translate(10vw, -4vh);
    }

    60% {
        transform: translate(10vw, -4vh);
    }

    80% {
        transform: translate(5vw, -6vh);
    }

    100% {
        transform: translate(-3vw, 0);
        top: 52vh;
    }
}

@keyframes fly-6 {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(0, 0);
    }

    20% {
        transform: translate(0vw, 5vh);
    }

    40% {
        transform: translate(10vw, -4vh);
    }

    60% {
        transform: translate(10vw, -4vh);
    }

    80% {
        transform: translate(5vw, -6vh);
    }

    100% {
        transform: translate(-3vw, 0);
        top: 52vh;
    }
}

.bat:nth-child(7) {
    -webkit-animation-name: fly-7;
    animation-name: fly-7;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

@-webkit-keyframes fly-7 {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(0, 0);
    }

    20% {
        transform: translate(4vw, 8vh);
    }

    40% {
        transform: translate(1vw, 4vh);
    }

    60% {
        transform: translate(-7vw, -9vh);
    }

    80% {
        transform: translate(5vw, -4vh);
    }

    100% {
        transform: translate(5vw, 0);
        top: 70vh;
    }
}

@keyframes fly-7 {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(0, 0);
    }

    20% {
        transform: translate(4vw, 8vh);
    }

    40% {
        transform: translate(1vw, 4vh);
    }

    60% {
        transform: translate(-7vw, -9vh);
    }

    80% {
        transform: translate(5vw, -4vh);
    }

    100% {
        transform: translate(5vw, 0);
        top: 70vh;
    }
}

.bat:nth-child(8) {
    -webkit-animation-name: fly-8;
    animation-name: fly-8;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    -webkit-animation-delay: 3.5s;
    animation-delay: 3.5s;
}

@-webkit-keyframes fly-8 {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(0, 0);
    }

    20% {
        transform: translate(-5vw, 4vh);
    }

    40% {
        transform: translate(5vw, 4vh);
    }

    60% {
        transform: translate(7vw, -1vh);
    }

    80% {
        transform: translate(-7vw, -9vh);
    }

    100% {
        transform: translate(1vw, 0);
        top: 16vh;
    }
}

@keyframes fly-8 {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(0, 0);
    }

    20% {
        transform: translate(-5vw, 4vh);
    }

    40% {
        transform: translate(5vw, 4vh);
    }

    60% {
        transform: translate(7vw, -1vh);
    }

    80% {
        transform: translate(-7vw, -9vh);
    }

    100% {
        transform: translate(1vw, 0);
        top: 16vh;
    }
}

.bat:nth-child(9) {
    -webkit-animation-name: fly-9;
    animation-name: fly-9;
    -webkit-animation-duration: 8s;
    animation-duration: 8s;
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}

@-webkit-keyframes fly-9 {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(0, 0);
    }

    20% {
        transform: translate(-7vw, -5vh);
    }

    40% {
        transform: translate(2vw, 2vh);
    }

    60% {
        transform: translate(9vw, 6vh);
    }

    80% {
        transform: translate(7vw, -6vh);
    }

    100% {
        transform: translate(4vw, 0);
        top: 29vh;
    }
}

@keyframes fly-9 {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(0, 0);
    }

    20% {
        transform: translate(-7vw, -5vh);
    }

    40% {
        transform: translate(2vw, 2vh);
    }

    60% {
        transform: translate(9vw, 6vh);
    }

    80% {
        transform: translate(7vw, -6vh);
    }

    100% {
        transform: translate(4vw, 0);
        top: 29vh;
    }
}

.bat:nth-child(10) {
    -webkit-animation-name: fly-10;
    animation-name: fly-10;
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-animation-delay: 4.5s;
    animation-delay: 4.5s;
}

@-webkit-keyframes fly-10 {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(0, 0);
    }

    20% {
        transform: translate(6vw, -7vh);
    }

    40% {
        transform: translate(7vw, 8vh);
    }

    60% {
        transform: translate(-4vw, 10vh);
    }

    80% {
        transform: translate(-4vw, 0vh);
    }

    100% {
        transform: translate(8vw, 0);
        top: 66vh;
    }
}

@keyframes fly-10 {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(0, 0);
    }

    20% {
        transform: translate(6vw, -7vh);
    }

    40% {
        transform: translate(7vw, 8vh);
    }

    60% {
        transform: translate(-4vw, 10vh);
    }

    80% {
        transform: translate(-4vw, 0vh);
    }

    100% {
        transform: translate(8vw, 0);
        top: 66vh;
    }
}

@-webkit-keyframes heart-beat {
    0% {
        transform: scale(1);
    }

    20% {
        transform: scale(1.05);
    }

    40% {
        transform: scale(1);
    }
}

@keyframes heart-beat {
    0% {
        transform: scale(1);
    }

    20% {
        transform: scale(1.05);
    }

    40% {
        transform: scale(1);
    }
}

@-webkit-keyframes text-gradient {
    0% {
        background-position: 0% 0%;
    }

    70% {
        background-position: 100% 0%;
    }

    100% {
        background-position: 100% 0%;
    }
}