Рождественский гобелен для сайта

Захватывающий фон с меняющимися цветами и гипнотизирующей анимацией захватит дух! Кто знает, законно ли это;) Рождественский гобелен с хипстерской графикой превратит ваш ресурс в самый крутой веб-сайт на свете.

Pug

.xmas
  each i in new Array(5)
    .xmas-row
      each i in new Array(10)
        .xmas-tree
          each i in new Array(2)
            .xmas-tree_branch
    .xmas-row
      each i in new Array(10)
        .xmas-pine
          each i in new Array(2)
            .xmas-pine_branch
h1.h1 Merry Little Christmas

SCSS

body {
  background-color: LightSalmon;
  margin: 0;
  overflow: hidden;
}

.h1 {
  color: PapayaWhip;
  font-family: 'Raleway', sans-serif;
  font-size: 1.3em;
  font-weight: normal;
  letter-spacing: 4px;
  text-align: center;
}

.xmas {
  box-sizing: border-box;
  box-shadow: 0 10px 25px 0 rgba(0,0,0,0.25);
  background-color: PapayaWhip;
  width: 715px;
  max-height: 480px;
  height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  padding: 30px;
  
  &-row {
    float: left;
    margin-top: -230px;

    &:not(:first-child) {
      margin-left: 30px;
    }

    &:nth-child(odd) {
      animation: snow 8s linear infinite;
    }
  }

  &-tree {
    margin-bottom: 20px;

    &_branch {
      animation: color 5s linear infinite;
      width: 25px;
      height: 25px;
      border-right: 2px solid LightSalmon;
      border-bottom: 2px solid MediumSeaGreen;
      margin: 5px;
      transform: rotate(-135deg);

      &:nth-child(even) {
        margin-top: -10px;
      }
    }
  }

  &-pine {
    margin-bottom: 30px;

    &_branch {
      animation: color 5s linear infinite;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 20px 25px 20px;
      border-color: transparent transparent MediumSeaGreen transparent;

      &:first-child {
        border-bottom-color: LightSalmon;
        position: relative;
        z-index: 10;
      }
      
      &:not(:first-child) {
        margin-top: -10px;
      }
    }
  }
}

@keyframes snow {
  100% {
    margin-top: -23px;
  }
}

@keyframes color {
  40%, 50% {
    border-bottom-color: MediumTurquoise;
  }
}