*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --page-background: #FDF2ED;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: var(--page-background);
}

.scene {
  --b: .5;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: calc(var(--b) * 1vmin) solid #000;
}

.tree, .cat {
  --s: 48;
  position: relative;
  width: calc(var(--s) * 1vmin);
  height: calc(var(--s) * 1vmin);
  display: flex;
  justify-content: center;
  align-items: center;
}

.triangle {
  --s: 10;
  width: 0;
  height: 0;
  border-bottom: calc(var(--s) * 1vmin) solid #096B34;
  border-left: calc(var(--s) * 1vmin) solid transparent;
  border-right: calc(var(--s) * 1vmin) solid transparent;
}

.tree .layer-one {
  --s: 10;
  --t: 0;
  position: absolute;
  border-width: calc(var(--s) * 1vmin);
  top: calc(var(--t) * 1vmin);
}

.tree .layer-two {
  --s: 13;
  --t: 3;
  position: absolute;
  border-width: calc(var(--s) * 1vmin);
  top: calc(var(--t) * 1vmin);
}

.tree .layer-three {
  --s: 15;
  --t: 7;
  position: absolute;
  border-width: calc(var(--s) * 1vmin);
  top: calc(var(--t) * 1vmin);
}

.tree .layer-four {
  --s: 18;
  --t: 12;
  position: absolute;
  border-width: calc(var(--s) * 1vmin);
  top: calc(var(--t) * 1vmin);
}

.tree .layer-five {
  --s: 21;
  --t: 17.5;
  position: absolute;
  border-width: calc(var(--s) * 1vmin);
  top: calc(var(--t) * 1vmin);
}

.tree-stem {
  --h: 9.5;
  --w: 4;
  position: absolute;
  bottom: 0;
  height: calc(var(--h) * 1vmin);
  width: calc(var(--w) * 1vmin);
  background: #000;
}

.tree-light {
  position: relative;
  --r: 3;
  width: calc(var(--r) * 1vmin);
  height: calc(var(--r) * 1vmin);
}

.light {
  background: red;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #333 35%, #eee 35%, #333 35%, #f06 35%);
  background: red;
  border: .5px solid #000;
}

.light-connector {
  --w: .5;
  --h: 1;
  background: #000;
  width: 4px;
  width: calc(var(--w) * 1vmin);
  height: calc(var(--h) * 1vmin);
  margin: 0 auto;
  background: linear-gradient(to bottom, #000 80%, gold 80%)
}

.chroma-light-color {
  background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
  linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
  linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}

.light-two .light {
  background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3a);
}

.light-three .light {
  background: radial-gradient(circle at 100%, #333, #333 40% 40%, #eee 65%, #333 75%);
}

.light-four .light {
  --r: 3;
  width: calc(var(--r) * 1vmin);
  height: calc(var(--r) * 1vmin);
  position: fixed;
  background-image: radial-gradient(#fff 25%, red 25%);
  background-position: 0 0;
  background-size: 20% 25%;
}

.light-five .light {
  background: radial-gradient(#e66465, #8198e8);
}

.light-six .light {
  background: radial-gradient(red, blue);
}

.light-seven .light {
  background: radial-gradient(purple, blue);
  background: repeating-linear-gradient(#f06 40%, blue 60%)
}

.light-eight .light {
  background: radial-gradient(purple, blue);
  background: linear-gradient(45deg, red 30%, white 30% 35%, red 35% 60%, white 60% 65%, red 65%);
}

.light-nine .light {
  background: radial-gradient(yellow, blue);
}

.light-one {
  --l: 10.5;
  --t: -6.75;
  position: relative;
  left: calc(var(--l) * 1vmin);
  top: calc(var(--t) * 1vmin);
}

.light-two {
  --l: 0;
  --t: -1.5;
  position: relative;
  left: calc(var(--l) * 1vmin);
  top: calc(var(--t) * 1vmin);
}

.light-three {
  --l: -2;
  --t: 5;
  position: relative;
  left: calc(var(--l) * 1vmin);
  top: calc(var(--t) * 1vmin);
}

.light-four {
  --l: -3;
  --t: -12.4;
  position: relative;
  left: calc(var(--l) * 1vmin);
  top: calc(var(--t) * 1vmin);
}

.light-five {
  --l: 9.7;
  --t: 10;
  position: relative;
  left: calc(var(--l) * 1vmin);
  top: calc(var(--t) * 1vmin);
}

.light-six {
  --l: 1;
  --t: 4.5;
  position: relative;
  left: calc(var(--l) * 1vmin);
  top: calc(var(--t) * 1vmin);
}

.light-seven {
  --l: -20.5;
  --t: 11;
  position: relative;
  left: calc(var(--l) * 1vmin);
  top: calc(var(--t) * 1vmin);
}

.light-eight {
  --l: -4;
  --t: -2;
  position: relative;
  left: calc(var(--l) * 1vmin);
  top: calc(var(--t) * 1vmin);
}

.light-nine {
  --l: -7.5;
  --t: -13.1;
  position: relative;
  left: calc(var(--l) * 1vmin);
  top: calc(var(--t) * 1vmin);
}

.present {
  --w: 7;
  --l: 5;
  --b: .2;
  position: absolute;
  width: calc(var(--w) * 1vmin);
  height: calc(var(--w) * 1vmin);
  background: #eee;
  left: calc(var(--l) * 1vmin);
  border: calc(var(--b) * 1vmin) solid #000;
  bottom: 0;
}

.box-one {
  left: calc(var(--l) / 1.25 * 1vmin);
  border: calc(var(--b) * 1vmin) solid #000;
  bottom: 0;
  background-image: radial-gradient(#000 25%, var(--page-background) 25%);
  background-position: 0 0;
  background-size: 10% 10%;
/*   background: red; */
}

.box-two {
  --l: 12.75;
  --w: 5;
  width: calc(var(--w) * 1vmin);
  left: calc(var(--l) * 1vmin);
  background: linear-gradient(to right, #f06 30%, #333 30% 43%, #f06 43%);
}

.box-three {
  --l: 29;
  --w: 4;
  width: calc(var(--w) * 1vmin);
  left: calc(var(--l) * 1vmin);
  background: radial-gradient(red, purple);
}

.box-four {
  --l: 34.2;
  --w: 5.5;
  width: calc(var(--w) * 1vmin);
  left: calc(var(--l) * 1vmin);
  background: red;
  background: repeating-linear-gradient(45deg, #000 40%, #f06 50%);
}

.box-five {
  --l: 41;
  --w: 6;
  width: calc(var(--w) * 1vmin);
  left: calc(var(--l) * 1vmin);
  background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);
  background: linear-gradient(to right, #4B9AA1  60%, #f06 60% 75%, #4B9AA1 75%);
}

.box {
  --w: 20;
  --b: .2;
  --b: -14;
  --border: .2;
  --l: 10;
  width: calc(var(--w) * 1vmin);
  height: calc(var(--w) * 1vmin);
  border: calc(var(--border) * 1vmin) solid #000;
  border: 1px solid 
  background: linear-gradient(to right, transparent 30%, transparent 30% 35%, red 35% 40%, transparent 40% 45%, transparent 45%);
  position: relative;
  bottom: calc(var(--b) * 1vmin);
  left: calc(var(--l) * 1vmin);
    background: linear-gradient(45deg, black 20% 25%, transparent 25% 40%, black 40% 44%, transparent 44% 85%, black 85%);
}

.cat {
  --w: 10;
  --b: .2;
  --b: -14;
  width: calc(var(--w) * 1vmin);
  height: calc(var(--w) * 1vmin);
  border: calc(var(--b) * 1vmin);
  background: transparent;
  border-radius: 50%;
}

.cat-head {
  
}

.star {
  --w: 3;
  --h: 3;
  --b: .4;
  border-radius: 50%;
  border: calc(var(--b) * 1vmin) solid #222;
  background: #000;
  position: absolute;
  width: calc(var(--w) * 1vmin);
  height: calc(var(--h) * 1vmin);
  clip-path: polygon(50% 0%, 61% 35%, 97% 47%, 68% 57%, 59% 64%, 50% 98%, 39% 64%, 32% 57%, 4% 47%, 39% 35%);
}

.s-one {
  --t: -20;
  --l: -30;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
}

.s-two {
  --t: -15;
  --l: -15;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
}

.s-three {
  --t: -15;
  --l: 35;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
}

/* tree topper */
.s-four {
  --t: -28.5;
  --l: 7.1;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  background: #FCF62B;
  background: #FCE92B;
  background: gold;
  border-color: gold;
  z-index: 999;
  width: calc(var(--w) * 2 * 1vmin);
  height: calc(var(--h) * 2 * 1vmin);
}

.lid {
  --w: 8.5;
  --h: 1.3;
  --l: -1;
  --b: .2;
  --t: -1;
  width: calc(var(--w) * 1vmin);
  height: calc(var(--h) * 1vmin);
  background: black;
  position: absolute;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  border: calc(var(--b) * 1vmin) solid #000;
  background-image: radial-gradient(#000 25%, var(--page-background) 25%);
  background-position: 0 0;
  background-size: 8% 70%;
  z-index: 99;
}

.lid-two {
  --w: 6;
  --h: 1.25;
  --l: -.55;
  --b: .2;
  --t: -1;
  width: calc(var(--w) * 1vmin);
  height: calc(var(--h) * 1vmin);
  background: black;
  position: absolute;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  background: linear-gradient(to right, #f06 30%, #333 30% 43%, #f06 43%);
  border: calc(var(--b) * 1vmin) solid #000;
}

.lid-three {
  --w: 5;
  --h: 1.25;
  --l: -.7;
  --b: .2;
  --t: -1;
  width: calc(var(--w) * 1vmin);
  height: calc(var(--h) * 1vmin);
  position: absolute;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  border: calc(var(--b) * 1vmin) solid #000;
  background: radial-gradient(red, purple);
}

.lid-four {
  --w: 6.5;
  --h: 1.25;
  --l: -.75;
  --b: .2;
  --t: -1;
  width: calc(var(--w) * 1vmin);
  height: calc(var(--h) * 1vmin);
  position: absolute;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  border: calc(var(--b) * 1vmin) solid #000;
  background: repeating-linear-gradient(45deg, #000 40%, #f06 50%);
}

.lid-five {
  --w: 7.1;
  --h: 1.3;
  --l: -.7;
  --b: .2;
  --t: -1;
  width: calc(var(--w) * 1vmin);
  height: calc(var(--h) * 1vmin);
  position: absolute;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  border: calc(var(--b) * 1vmin) solid #000;
  background: #000;
  background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);
   background: linear-gradient(to right, #333 50%, #f06);
  background: linear-gradient(to right, #4B9AA1  58%, #f06 58% 71%, #4B9AA1 71%);
}

/* cat */
.cat-one-lh {
  --w: .3;
  --h: 8.25;
  --t: 1;
  --l: -66.15;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  background: #000;
  position: absolute;
  width: calc(var(--w) * 1vmin);
  height: calc(var(--h) * 1vmin);
  z-index: 999;
  transform: rotate(15deg);
}

.cat-one-rh {
  --w: .3;
  --h: 8.25;
  --t: 1;
  --l: -56;
  position: absolute;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  width: calc(var(--w) * 1vmin);
  background: #000;
  height: calc(var(--h) * 1vmin);
  z-index: 999;
  transform: rotate(-15deg);
}

.cat-one-le {
  --w: 1;
  --h: 2.4;
  --t: -1.75;
  --l: -65.2;
  position: absolute;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  width: 0;
  height: 0;
  border-left: calc(var(--w) * 1vmin) solid transparent;
  border-right: calc(var(--w) * 1vmin) solid transparent;
  border-bottom: calc(var(--h)*1vmin) solid #000;
  z-index: 999;
  transform: rotate(-25deg);
}

.cat-one-lec {
  --w: .3;
  --h: 3.9;
  --t: -2.5;
  --l: -65.2;
  position: absolute;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  border-radius: 500px;
  width: calc(var(--w) *1vmin);
  height: calc(var(--h)*1vmin);
  z-index: 999;
  background: #000;
  transform: rotate(-2deg);
}

.cat-one-lecc {
  --w: .3;
  --h: 3.8;
  --t: -3.1;
  --l: -63.9;
  position: absolute;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  border-radius: 500px;
  width: calc(var(--w) *1vmin);
  height: calc(var(--h)*1vmin);
  z-index: 999;
  background: #000;
  transform: rotate(-45deg);
}

.cat-one-re {
  --w: 1;
  --h: 2.4;
  --t: -1.75;
  --l: -58.75;
  position: absolute;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  width: 0;
  height: 0;
  border-left: calc(var(--w) * 1vmin) solid transparent;
  border-right: calc(var(--w) * 1vmin) solid transparent;
  border-bottom: calc(var(--h)*1vmin) solid #000;
  z-index: 999;
  transform: rotate(20deg);
}

.cat-one-rec {
  --w: .3;
  --h: 4;
  --t: -2.5;
  --l: -57.05;
  position: absolute;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  border-radius: 500px;
  width: calc(var(--w) *1vmin);
  height: calc(var(--h)*1vmin);
  z-index: 999;
  background: #000;
  transform: rotate(-2deg);
}

.cat-one-recc {
  --w: .3;
  --h: 3.85;
  --t: -3.1;
  --l: -58.4;
  position: absolute;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  border-radius: 500px;
  width: calc(var(--w) *1vmin);
  height: calc(var(--h)*1vmin);
  z-index: 999;
  background: #000;
  transform: rotate(45deg);
}

.cat-one-center {
  --w: 3.1;
  --h: .3;
  --t: -.1;
  --l: -62.5;
  position: absolute;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  border-radius: 500px;
  width: calc(var(--w) *1vmin);
  height: calc(var(--h)*1vmin);
  z-index: 999;
  background: #000;
  transform: rotate(0deg);
}

.cat-one-eye {
  --w: 1;
  --h: 1;
  --t: 1.5;
  --l: -63.25;
  position: absolute;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  border-radius: 50%;
  background: #000;
  width: calc(var(--w) *1vmin);
  height: calc(var(--h)*1vmin);
}

.cat-one-eye-two {
  --w: 1;
  --h: 1;
  --t: 1.5;
  --l: -59.2;
  position: absolute;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  border-radius: 50%;
  background: #000;
  width: calc(var(--w) *1vmin);
  height: calc(var(--h)*1vmin);
}

.cat-one-nose {
  --w: 1.1;
  --h: 1;
  --t: 2.75;
  --l: -61.25;
  position: absolute;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  border-radius: 50%;
  background: #f06;
  background: #FF507D;
  width: calc(var(--w) *1vmin);
  height: calc(var(--h)*1vmin);
  z-index: 999;
}

.cat-one-whisker {
  --w: 2;
  --h: 1.2;
  --b: .4;
  --t: 2.75;
  --l: -62.5;
  position: absolute;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  border-radius: 50%;
  width: calc(var(--w) *1vmin);
  height: calc(var(--h)*1vmin);
  border: calc(var(--b)*1vmin) solid #222;
  border-color: #000 transparent transparent transparent;
  border-radius: 50%/calc(var(--h) *1vmin) calc(var(--h) *1vmin) 0 0;
  transform: rotate(180deg);
  z-index: 5;
}

.cat-one-whisker-two {
  --w: 2;
  --h: 1.2;
  --b: .4;
  --t: 2.75;
  --l: -61;
  position: absolute;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  border-radius: 50%;
  width: calc(var(--w) *1vmin);
  height: calc(var(--h)*1vmin);
  border: calc(var(--b)*1vmin) solid #222;
  border-color: #000 transparent transparent transparent;
  border-radius: 50%/calc(var(--h) *1vmin) calc(var(--h) *1vmin) 0 0;
  transform: rotate(180deg);
  z-index: 5;
}

.cat-one-paw {
  --w: 2.9;
  --h: 2.4;
  --b: .4;
  --t: 8;
  --l: -66;
  position: absolute;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  border-radius: 50%;
  border: calc(var(--b)*1vmin) solid #222;
  background: var(--page-background);
  width: calc(var(--w) *1vmin);
  height: calc(var(--h)*1vmin);
  z-index: 999;
}

.cat-one-paw-two {
  --w: 2.8;
  --h: 2.4;
  --b: .4;
  --t: 8;
  --l: -58;
  position: absolute;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  border-radius: 50%;
  background: var(--page-background);
  border: calc(var(--b)*1vmin) solid #222;
  width: calc(var(--w) *1vmin);
  height: calc(var(--h)*1vmin);
  z-index: 99999;
}

.cat-paw-detail-r {
  --w: 1.5;
  --h: 2;
  --b: .4;
  --t: 8.5;
  --l: -64.2;
  position: absolute;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  border-radius: 50%;
  width: calc(var(--w) *1vmin);
  height: calc(var(--h)*1vmin);
  border: calc(var(--b)*1vmin) solid #222;
  border-color: #000 transparent transparent transparent;
  transform: rotate(260deg);
  z-index: 99999;
}

.cat-paw-detail-r-two {
  --w: 1.5;
  --h: 2;
  --b: .4;
  --t: 8.5;
  --l: -58;
  position: absolute;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  border-radius: 50%;
  width: calc(var(--w) *1vmin);
  height: calc(var(--h)*1vmin);
  border: calc(var(--b)*1vmin) solid #222;
  border-color: #000 transparent transparent transparent;
  transform: rotate(110deg);
  z-index: 99999;
}

.cat-paw-detail-l {
  --w: 1.5;
  --h: 2;
  --b: .4;
  --t: 8.3;
  --l: -64.9;
  position: absolute;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  border-radius: 50%;
  width: calc(var(--w) *1vmin);
  height: calc(var(--h)*1vmin);
  border: calc(var(--b)*1vmin) solid #222;
  border-color: #000 transparent transparent transparent;
  transform: rotate(240deg);
  z-index: 99999;
}

.cat-paw-detail-l-two {
  --w: 1.5;
  --h: 2;
  --b: .4;
  --t: 8.5;
  --l: -58.5;
  position: absolute;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  border-radius: 50%;
  width: calc(var(--w) *1vmin);
  height: calc(var(--h)*1vmin);
  border: calc(var(--b)*1vmin) solid #222;
  border-color: #000 transparent transparent transparent;
  transform: rotate(100deg);
  z-index: 99999;
}

.misc {
  position: absolute;
}

.string-light, .row-light {
  --h: 10;
  --w: 31;
  --t: 17.25;
  --l: 7;
  position: absolute;
  left: calc(var(--l) * 1vmin);
    height: calc(var(--h) * 1vmin);
    width: calc(var(--w) * 1vmin);
  top: calc(var(--t) * 1vmin);
    border: solid 1px #000;
    border-color: #000 transparent transparent transparent;
    z-index: 80;
    border-radius: 60% / calc(var(--h) * 1vmin) calc(var(--h) / 7 * 1vmin) 0 0;
    transform: rotate(175deg);
}

.sl-two {
  --t: 11;
  --w: 27;
  --l: 12;
  top: calc(var(--t) * 1vmin);
    transform: rotate(190deg);
  width: calc(var(--w) * 1vmin);
  left: calc(var(--l) * 1vmin);
}

.row-lights {
  position: absolute;
}

.row-light {
  --h: 10;
  --l: 11.75;
  --t: -13.5;
  position: relative;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  border-radius: 60% / calc(var(--h) * 1vmin) calc(var(--h) * 1vmin) 0 0;
}

.rl-one {
  --w: 14;
  --t: 3;
  --l: 20.4;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  width: calc(var(--w) * 1vmin);
}

.rl-two {
  --w: 22;
  --t: -3;
  --l: 16;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  width: calc(var(--w) * 1vmin);
}

.rl-three {
  --w: 26;
  --t: -8;
  --l: 14;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  width: calc(var(--w) * 1vmin);
}

.rl-four {
  --w: 26;
  --t: -12;
  --l: 11.7;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  width: calc(var(--w) * 1.16 * 1vmin);
}

.rl-five {
  --w: 36;
  --t: -8.6;
  --l: 8.7;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  width: calc(var(--w) * 1vmin);
}

.rl-six {
  --w: 32;
  --t: -26;
  --l: 11;
  top: calc(var(--t) * 1vmin);
  left: calc(var(--l) * 1vmin);
  width: calc(var(--w) / 1.01 * 1vmin);
}