body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

/* Reset */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* Sparkling background */
.sparkle-bg {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle, #1a1a2e, #000);
  overflow: hidden;
  position: relative;
}

/* Image centered */
.front {
  width: 200px; /* adjust size */
  z-index: 2;
}

/* Sparkles */
.sparkle-bg::before,
.sparkle-bg::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background-image: 
    radial-gradient(white 1px, transparent 1px);
  background-size: 50px 50px;
  animation: sparkle 20s linear infinite;
  opacity: 0.3;
}

.sparkle-bg::after {
  animation-duration: 30s;
  opacity: 0.2;
}

/* Animation */
@keyframes sparkle {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(-50px, -50px);
  }
}