canvas {
    width: 100%;
    height: 100%;
}

.thunder {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 0;
    animation: thunder-bg 15s infinite;
}

canvas {
    display: block;
    position: relative;
    top: 0;
    left: 0;
}

#canvas2 {
    z-index: 10;
}

#canvas1 {
    z-index: 100;
}

@-webkit-keyframes thunder-bg {
    0% {
        filter: brightness(1) blur(6px);
    }
    9% {
        filter: brightness(1) blur(6px);
    }
    10% {
        filter: brightness(1.4) blur(6px);
    }
    12.5% {
        filter: brightness(1) blur(6px);
    }
    80% {
        filter: brightness(1) blur(6px);
    }
    82% {
        filter: brightness(1.4) blur(6px);
    }
    83% {
        filter: brightness(1) blur(6px);
    }
    83.5% {
        filter: brightness(1.4) blur(6px);
    }
    87% {
        filter: brightness(1) blur(6px);
    }
    100% {
        filter: brightness(1) blur(6px);
    }
}