<div class="calendar">
  <article>
    <span class="month">25</span>
    <span class="date">
      <span class="date-number">25</span>
      <span class="snowman">&#9731;</span>
      <span class="snow snow--1">&#10052;</span>
      <span class="snow snow--2">&#10053;</span>
      <span class="snow snow--3">&#10054;</span>
      <span class="snow snow--4">&#10054;</span>
      <span class="snow snow--5">&#10052;</span>
      <span class="snow snow--6">&#10053;</span>
    </span>
    <span class="day">Dec</span>
  </article>
</div>

/* 
// My Christmas Color Theme Found Here:
// https://color.adobe.com/My-Christmas-color-theme-8546390/
*/

@import url('https://fonts.googleapis.com/css?family=Roboto:100,400,500');

// Christmas Colors
$green: #468263;
$dark-green: #315b45;
$red: #731509;
$brown: #73583f;
$light-brown: #C0C0B0;
$white: #FAFBF7;

body {
  color: $white;
  background-color: $white;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
}

article {
  margin: 100px auto;
  display: flex;
  flex-direction: column;
  width: 190px;
  height: 200px;
  text-align: center;
}

.month, .date, .day {
  border: 2px solid $brown;
  display: flex;
  justify-content: center;
  flex-direction: column;
  flex: 1 0 0;
}

.month { 
  background-color: $dark-green; 
  border-bottom: none;
  border-radius: 10px 10px 0 0;
}

.day { 
  position: relative;
  background-color: $green; 
  border-top: 0;
  border-radius: 0 0 10px 10px;
  z-index: 4;
  
  
}

.month, .day {
  text-transform: capitalize;
  font-weight: 500;
  font-size: 1.2em;
}

.date {
  position: relative;
  background-color: $white;
  color: $red;
  flex: 2 0 0;
  border-top: 0; border-bottom: 0;
}

.date-number {
  position: absolute;
  align-self: center;
  visibility: hidden;
}

.snowman {
  color: $red;
  font-weight: 100;
  font-size: 6em;
}

.snow {
  position: absolute;
  color: $red;
  font-size: 1.2em;
  
  
  &--1 {
    top: 0; left: 0;
    animation: flake-1 7s infinite;
  }
  
  &--2 {
    top: 0; left: 35%;
    animation: flake-4 5s infinite;
  }
  
  &--3 {
    top: 0; right: 0;
    animation: flake-3 5s infinite;
  }
  
  &--4 {
    top: 0; left: 15%;
    animation: flake-2 3s infinite;
  }
  
  &--5 {
    top: 0; left: 55%;
    animation: flake-2 9s infinite;
  }
  
  &--6 {
    top: 0; right: 25%;
    animation: flake-2 4s infinite;
  }
}


// Keyframes
@keyframes flake-1 {
  0% { 
    top: -10px; 
    opacity: 0;
  }
  25% { 
    left: 5%;
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.5
  }
  100% {
    top: 55%; left: 0;
    opacity: 0;
  }
}

@keyframes flake-2 {
  0% { 
    top: -10px; 
    opacity: 0;
  }
  25% { 
    opacity: 0.5;
  }
  75% {
    opacity: 0.2;
  }
  100% { 
    top: 65%; 
    opacity: 0;
  }
}

@keyframes flake-3 {
  0% {
    top: -10px;
    opacity: 0;
  }
  25% { 
    opacity: 0.3;
    right: 5%;
  }
  50% { 
    opacity: 0.7;
  }
  75% { 
    opacity: 0.4;
  }
  100% { 
    opacity: 0;
    right: 7%;
    top: 35%;
  }
}

@keyframes flake-4 {
  0% {
    top: -10px;
    opacity: 0;
  }
  25% { 
    opacity: 0.3;
  }
  50% { }
  75% { }
  100% { 
    opacity: 0;
    top: 25%;
  }
}