@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.smoke-background {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.smoke-background .white-smoke {
    position: absolute;
    bottom: -60%;
    transform: scale(1.2);
    opacity: 0;
    animation: fadeIn 2s ease-in forwards;
    transition: transform 0.2s ease-out;
}

.smoke-background .white-smoke:nth-child(1) {
    left: -10%;
    z-index: -1;
     animation-delay: 1.5s;
     background: radial-gradient(circle at center center, #fbff8a 1%, #00000000 60%, #00000000 100%);
}

.smoke-background .white-smoke:nth-child(2) {
    left: 25%;
    bottom: -50%;
    z-index: 1;
     animation-delay: .5s;
     background: radial-gradient(circle at center center, #8ad6ff 1%, #00000000 60%, #00000000 100%);
}

.smoke-background .white-smoke:nth-child(3) {
    left: 60%;
     z-index: -1;
     animation-delay: 1s;
     background: radial-gradient(circle at center center, #52ffae 1%, #00000000 60%, #00000000 100%);
}