body {
  background-image: url(/assets/images/spruce_darker.png);
  background-repeat: repeat;
}

/* title graphic */
.title {  
  display: flex;
  align-items: center;
  justify-content: center; 
}

.title img {
  width: 90%;
  height: auto;
}

/* mobile first grid layout */
.grid-1 {
  display: grid;
  width: 96%;
  max-width: 900px;
  margin: 2% auto;
  
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-gap: 25px;
  
  grid-template-areas:    "t        t       t"
                          "d1       d2     d3"
                          "d4       d5     d6"
                          "d7       d8     d9"
                          "d10      d11    d12";
}

/* media query */
@media only screen and (min-width: 500px) {
  
  .grid-1 {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas: "t     t     t     t       t       t"
                         "t     t     t     t       t       t"
                         "t     t     t     t       t       t"
                         "e     e     e     e       e       e"
                         "d1    d2    d3    d4      d5      d6"
                         "d7    d8    d9    d10     d11     d12";
  }
  
}


/* individual items */
  .title {
    grid-area: t;
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
  }
  .empty {
    grid-area: e;
  }
  .day-1 {
    grid-area: d1;
  }
  .day-1 .back {
    background-image: url(/assets/images/authors/jared.png);
  }
  .day-2 {
    grid-area: d2;
  }
  .day-2 .back {
    background-image: url(/assets/images/authors/darkhax.png);
  }
  .day-3 {
    grid-area: d3;
  }
  .day-3 .back {
    background-image: url(/assets/images/authors/serilum.png);
  }
  .day-4 {
    grid-area: d4;
  }
  .day-4 .back {
    background-image: url(/assets/images/authors/jared.png);
  }
  .day-5 {
    grid-area: d5;
  }
  .day-5 .back {
    background-image: url(/assets/images/authors/darkhax.png);
  }
  .day-6 {
    grid-area: d6;
  }
  .day-6 .back {
    background-image: url(/assets/images/authors/serilum.png);
  }
  .day-7 {
    grid-area: d7;
  }
  .day-7 .back {
    background-image: url(/assets/images/authors/jared.png);
  }
  .day-8 {
    grid-area: d8;
  }
  .day-8 .back {
    background-image: url(/assets/images/authors/darkhax.png);
  }
  .day-9 {
    grid-area: d9;
  }
  .day-9 .back {
    background-image: url(/assets/images/authors/serilum.png);
  }
  .day-10 {
    grid-area: d10;
  }
  .day-10 .back {
    background-image: url(/assets/images/authors/jared.png);
  }
  .day-11 {
    grid-area: d11;
  }
  .day-11 .back {
    background-image: url(/assets/images/authors/darkhax.png);
  }
  .day-12 {
    grid-area: d12;
  }
  .day-12 .back {
    background-image: url(/assets/images/authors/serilum.png);
  }

/* door styles */

.grid-1 input {
  display: none;
}

label {
  perspective: 1000px;
  transform-style: preserve-3d;
  cursor: pointer;

  display: flex;
  min-height: 100%;
  width: 100%;
  height: 120px;
}

.door {
  width: 100%;
  transform-style: preserve-3d;
  transition: all 300ms;
  border: 2px dashed transparent;
  border-radius: 10px;
}

  .door div {
    position: absolute;
    height: 100%;
    width: 100%;
    backface-visibility: hidden;

    background-color: white;
    
    border-radius: 6px;

    display: flex;
    align-items: center;
    justify-content: center;
    
    /* typography */
    font-family: 'Kalam', cursive;
    color: #385052;
    font-size: 2em;
    font-weight: bold;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2);
  }

  .door .back {
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      background-color: #2e313d;
      transform: rotateY(180deg);
  }

  label:hover .door {
    border-color: #385052;
  }

  :checked + .door {
    transform: rotateY(180deg);
  }

/* Snow Wrapper */
.snowwrapper {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;

  width: 100vw;
  height: 100vh;

  pointer-events: none
}