Простая Рождественская ёлочка для сайта на CSS

Предлагаю вашему вниманию красивую рождественскую анимированную елочку на CSS для вашего веб-сайта.  Ёлочку можно использовать для оформления отдельного блока, страницы, вывода поздравлений. Всё на ваше усмотрение. Данный сниппет был найден на просторах буржу-нета. Кстати возможен конфликт стилей с Bootstrap, просто задаем всем классам свои уникальные значения. Всех с Наступающими зимними праздниками!

HTML

<div class="container">
  <div class="tree">
  </div>
  <div class="ornament large orange or1">
    <div class="shine"></div>
  </div>
  <div class="ornament medium blue or2">
    <div class="shine"></div>
  </div>
  <div class="ornament small green or3">
    <div class="shine"></div>
  </div>
  <div class="ornament small pink or4">
    <div class="shine"></div>
  </div>
  <div class="ornament large purple or5">
    <div class="shine">
    </div>
  </div>
  <div class="ornament medium purple or6">
    <div class="shine"></div>
  </div>
  <div class="ornament medium blue or7">
    <div class="shine"></div>
  </div>
  <div class="ornament large pink or8">
    <div class="shine"></div>
  </div>
  <div class="ornament medium orange or9">
    <div class="shine"></div>
  </div>
  <div class="ornament medium green or10">
    <div class="shine"></div>
  </div>
  <div class="ornament large pink or11">
    <div class="shine"></div>
  </div>
  <div class="ornament blue large or12">
    <div class="shine"></div>
  </div>
  <div class="star-light"></div>
  <div class="star"></div>
  <div class="star-highlight"></div>
  <div class="trunk"></div>
  <div class="floor"></div>
</div>

CSS

body {
  background: #051342;
}

.container {
  position: relative;
/*   background: #1c1c1c; */
  width: 460px;
  height: 460px;
  margin: auto;
/*   border: 1px solid; */
/*   border-radius: 100px; */
  margin-top: 15vh;
}

.tree {
  position: absolute;
  background: #2e7055;
  width: 65%;
  height: 70%;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  bottom: 13%;
  left: 18%;
  z-index: 2;
}

.floor {
  position: absolute;
  width: 35%;
  height: 15%;
  border-radius: 50%;
  background: #69122a;
  bottom: -8%;
  left: 32%;
}

.star {
  position: absolute;
  width: 20%;
  height: 20%;
  background: #ffdc5e;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  left: 40.5%;
  top: 5%;
  z-index: 3;
}

.star-highlight {
  position: absolute;
  width: 20%;
  height: 20%;
  background: #ffedad;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 50% 70%, 50% 60%, 50% 46%, 50% 36%);
  left: 40.5%;
  top: 5%;
  z-index: 3;
}

.star-light {
  position: absolute;
  width: 20%;
  height: 20%;
  background: #ffefb5;
  filter: opacity(.7);
  border-radius: 50%;
  left: 40.5%;
  top: 5%;
  z-index: 2;
  animation: star 3s ease-in-out infinite;
}



.trunk {
  position: absolute;
  height: 15%;
  width: 10%;
  background: #2e2713;
  bottom: 0;
  left: 45%;
  z-index:1;
}

.ornament {
  position: absolute;
  border-radius: 50%;
  z-index: 3;
}

.large {
  height: 10%;
  width: 10%;
  animation: lights 1.5s linear infinite;
}

.medium {
  height: 7%;
  width: 7%;
  animation: lights 1.4s linear infinite;
}

.small {
  width: 5%;
  height: 5%;
  animation: lights 1.2s linear infinite;
}

.orange {
   background: #FDC590;
}

.pink {
  background: #f799d2;
}

.green {
  background: #9af5c6;
}

.blue {
  background: #7dd4ff;
}

.purple {
  background: #afa6ff;
}

.or1 {
  left: 33%;
  top: 42%;
}

.or2 {
  top: 26%;
  left: 52%;
}

.or3 {
  top: 38%;
  left: 48%;
}

.or4 {
  top: 29%;
  left: 41.5%;
}

.or5 {
  top: 59%;
  left: 35%;
}

.or6 {
  top: 41%;
  left: 59%;
}

.or7 {
  top: 51%;
  right: 42%;
}

.or8 {
  top: 55%;
  right: 26%;
}

.or9 {
  top: 67%;
  left: 55%;
}

.or10 {
  top: 75%;
  left: 42%;
}

.or11 {
  top: 70%;
  left: 21%;
}

.or12 {
  top: 73%;
  right: 22.5%;
}

.shine {
  position: absolute;
  width: 60%;
  height: 60%;
  background: white;
  border-radius: 50%;
  filter: opacity(48%);
  top: 6%;
  right: 10%;
}



@keyframes lights {
  100% {
    filter: brightness(.7);
  }
  50% {
      filter: brightness(1.2);
  }
  0% {
      filter: brightness(.7);
  }
}

@keyframes star {
  100% {
    transform: scale(.5);
  }
  50% {
    transform: scale(1.1);
  }
  0% {
      transform: scale(.5);
  }
}