.explosion {
    position: absolute;
    width: 600px;
    height: 600px;
    pointer-events: none;
}
.particle {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 40%;
    animation: pop 1s reverse forwards;
}

@keyframes pop {
    from {
        opacity: 0;
    }
    to {
        top: 50%;
        left: 50%;
        opacity: 1;
    }
}

html, body {
    background: #FFFFFF;
}
h1 {
    color: #CCC;
    font-family: "Helvetica", "Arial", sans-serif;
    user-select: none;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -moz-user-select: none;      /* Firefox */
    cursor: default;
}