@import url(https://fonts.googleapis.com/css?family=Lato);

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: black;
}

.card {
  $snow-size: 3em;
  width: $snow-size * 10;
  height: $snow-size * 10;
  padding: 10em;
  display: flex;
  flex-wrap: wrap;
  background: black;
  filter: blur(15px) contrast(30);

  .snow {
    position: relative;
    width: $snow-size;
    height: $snow-size;
    border-radius: 100%;

    &::after {
      position: absolute;
      content: "";
      left: 0;
      width: inherit;
      height: inherit;
      background: white;
      transition: 30s cubic-bezier(0.19, 1, 0.22, 1);
    }

    &:hover::after {
      transform: scale(0);
      transition-duration: 0.3s;
    }
  }
}

p {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 9999;
  color: white;
  font-family: Lato, sans-serif;
  font-size: 4em;
  line-height: 1em;
  letter-spacing: 0.1em;
  transform: translate(-47%, -160%);
  pointer-events: none;
  filter: blur(1px) contrast(20);
}
