<!-- 參考網站： https://www.pinterest.com/pin/284571270185445854/feedback/?invite_code=ea42b13e563241adbe9dbdc44dd9d493&sender_id=451274962569798633 -->
<div id="app">
    <div class="container">
        <div class="fire left"></div>
        <div class="fire right"></div>
        <div class="fire fly1"></div>
        <div class="fire fly2"></div>
        <div class="fire fly1"></div>
        <div class="fire fly2"></div>
        <div class="fire f1"></div>
        <div class="fire f2"></div>
        <div class="wood"></div>
        <div class="wood"></div>
    </div>
</div>

$color: (
    wood: #6d3c2f,
    bg: #0e1116,
    darkFire: #f16402,
    fire: #f68800
);

@keyframes flyRight {
    20% {
        bottom: 20px;
        opacity: 0.9;
        left: 60%;
        transform: rotate(-45deg) scale(1);
    }
    25% {
        transform: rotate(-50deg) scale(1);
    }
    100% {
        transform: rotate(-45deg) scale(0.2);
        left: 50%;
        bottom: 170px;
        opacity: 0;
    }
}

@keyframes flyLeft {
    20% {
        bottom: 20px;
        opacity: 0.9;
        left: 40%;
        transform: rotate(-45deg) scale(1);
    }
    25% {
        transform: rotate(-40deg) scale(1);
    }
    100% {
        transform: rotate(-45deg) scale(0.2);
        left: 50%;
        bottom: 170px;
        opacity: 0;
    }
}

@keyframes showRight {
    40% {
        opacity: 0.9;
        transform: rotate(-45deg) scale(1);
    }
    50% {
        opacity: 0;
    }
}
@keyframes showLeft {
    40% {
        opacity: 0.9;
        transform: rotate(-45deg) scale(1);
    }
    50% {
        opacity: 0;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
    color: inherit;
    list-style: none;
}
html,
body {
    margin: 0;
    padding: 0;
}
img {
    width: 100%;
    vertical-align: middle;
}
a {
    text-decoration: none;
}

#app {
    width: 100%;
    height: 100vh;
    background-color: map-get($color, bg);
    display: flex;
    justify-content: center;
    align-items: center;
}
.container {
    position: relative;
    width: 150px;
    height: 150px;
    .wood {
        width: 100%;
        height: 20px;
        border-radius: 4px;
        background-color: map-get($color, wood);
        position: absolute;
        bottom: 20px;
        left: 0;
        z-index: 3;
        transform: rotate(15deg);
        box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5);
        & + .wood {
            transform: rotate(-15deg);
        }
    }
    .fire {
        width: 70px;
        height: 70px;
        border-radius: 4px;
        background-color: map-get($color, darkFire);
        box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
        opacity: 0;
        transform-origin: left bottom;
        position: absolute;
        bottom: 20px;
        transform: rotate(-45deg) scale(1);
        z-index: 2;
        &.left {
            opacity: 0.5;
            left: 60%;
        }
        &.right {
            opacity: 0.5;
            left: 40%;
        }
        &.f1 {
            left: 60%;
            opacity: 0.8;
            transform-origin: left bottom;
            transform: rotate(-45deg) scale(0);
            background-color: map-get($color, fire);
            animation: showRight linear 1s 0s infinite;
        }
        &.f2 {
            left: 40%;
            opacity: 0.8;
            transform: rotate(-45deg) scale(0);
            background-color: map-get($color, fire);
            animation: showLeft linear 1s 0.5s infinite;
        }
        &.fly1 {
            left: 60%;
            animation: flyRight ease-in-out 1s 0s infinite;
        }
        &.fly2 {
            left: 40%;
            animation: flyLeft ease-in-out 1s 0.5s infinite;
        }
    }
}