/* Smartphone */
@media only screen and (min-width: 320px) and (max-width: 450px) { body {background-image: url('../assets/images/cielfond-450.jpg');} .container {top: 5rem!important;width: 35rem!important;} }
/* Ipad Mini */
@media only screen and (min-width: 451px) and (max-width: 768px) { body {background-image: url('../assets/images/cielfond-768.jpg');}}
/* Ipad Air / Pro / other models  */
@media only screen and (min-width: 769px) and (max-width: 850px) { body {background-image: url('../assets/images/cielfond-850.jpg');}}
/* Ipad Pro 12inch  */
@media only screen and (min-width: 851px) and (max-width: 1024px) { body {background-image: url('../assets/images/cielfond-1024.jpg');}}
/* PC  */
/* PC 1366x768  */
@media only screen and (min-width: 1025px) and (max-width: 1366px) { body {background-image: url('../assets/images/cielfond-1366.jpg');}}
/* PC 1536x864  */
@media only screen and (min-width: 1367px) and (max-width: 1536px) { body {background-image: url('../assets/images/cielfond-1536.jpg');}}
/* PC 1920x10804  */
@media only screen and (min-width: 1536px) and (max-width: 1920px) { body {background-image: url('../assets/images/cielfond-1920.jpg');}}
/* PC 2560x1440  */
@media only screen and (min-width: 1921px) and (max-width: 2560px) { body {background-image: url('../assets/images/cielfond-2560.jpg');}}




@import url("https://fonts.googleapis.com/css?family=Amatic+SC");
@import url("https://fonts.cdnfonts.com/css/star-jedi");
.footer {
  bottom: -4rem;
  color: white;
  font-size: 2rem;
  display: flex;
  position: absolute;
  flex-direction: column;
  align-items: center;
}
.footer .title {
  font-family: "Amatic SC";
  font-size: 2.3rem;
  display: flex;
  justify-content: space-between;
}
.footer .title .heart {
  color: red;
}
.footer .credits {
  width: 18.3rem;
}
.footer .sub {
  display: flex;
  justify-content: space-around;
  font-size: 1.4rem;
  font-family: "Amatic SC";
}
.footer .sub a {
  color: grey;
  text-decoration: none;
}
.footer .sub a:hover {
  color: white;
}

body {
  width: 99%;
  height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  #background-color: black;
  #background-image: url('../assets/images/cielfond-450.jpg');
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  top: -5rem;
  bottom: 0;
  width: 40rem;
  border-radius: 62rem;
  overflow: hidden;
  height: 40rem;
  background-color: #171a21;
  position: absolute;
}

.tree {
  position: absolute;
  height: 22rem;
  width: 0rem;
  transform: scale(1.4);
  right: 16rem;
  z-index: 99;
}
.tree__branch-1 {
  width: 0;
  height: 0;
  border-left: 4.5rem solid transparent;
  border-right: 4.5rem solid transparent;
  border-bottom: 6.6rem solid #5b393c;
  position: absolute;
  z-index: 10;
  border-radius: 3.2rem;
}
.tree__branch-1:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 4rem solid transparent;
  border-right: 4rem solid transparent;
  border-bottom: 6rem solid #b5ce58;
  position: absolute;
  left: -64px;
  top: 5px;
  border-radius: 3.2rem;
}
.tree__branch-2 {
  width: 0;
  height: 0;
  border-left: 5.5rem solid transparent;
  border-right: 5.5rem solid transparent;
  border-bottom: 7.6rem solid #5b393c;
  position: absolute;
  top: 2rem;
  left: -1rem;
  border-radius: 3.2rem;
  z-index: 8;
}
.tree__branch-2:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5rem solid transparent;
  border-right: 5rem solid transparent;
  border-bottom: 7rem solid #94a94b;
  position: absolute;
  left: -78.8px;
  top: 5px;
  border-radius: 3.2rem;
}
.tree__branch-3 {
  width: 0;
  height: 0;
  border-left: 7.5rem solid transparent;
  border-right: 7.5rem solid transparent;
  border-bottom: 9.6rem solid #5b393c;
  position: absolute;
  top: 3.4rem;
  left: -3rem;
  border-radius: 3.2rem;
  z-index: 6;
}
.tree__branch-3:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 7rem solid transparent;
  border-right: 7rem solid transparent;
  border-bottom: 9rem solid #778641;
  position: absolute;
  left: -7rem;
  top: 5px;
  border-radius: 3.2rem;
}
.tree__branch-4 {
  width: 0;
  height: 0;
  border-left: 9.5rem solid transparent;
  border-right: 9.5rem solid transparent;
  border-bottom: 11.6rem solid #5b393c;
  position: absolute;
  top: 6rem;
  left: -5rem;
  border-radius: 3.2rem;
  z-index: 5;
}
.tree__branch-4:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 9rem solid transparent;
  border-right: 9rem solid transparent;
  border-bottom: 11rem solid #92aa4c;
  position: absolute;
  left: -9rem;
  top: 5px;
  border-radius: 3.2rem;
}
.tree__base {
  width: 5rem;
  height: 5rem;
  background-color: #916363;
  position: absolute;
  z-index: 1;
  top: 16rem;
  left: 2rem;
  border-radius: 2rem;
  box-shadow: inset -17px 30px 0px #7a4e4d;
}
.tree__shadow {
  z-index: 1;
  width: 4rem;
  height: 4.5rem;
  position: absolute;
  z-index: 2;
  top: 17rem;
  left: 2rem;
  border-radius: 14rem;
  box-shadow: 3px 102px 4px 4px #0000004d;
  transform: rotateX(75deg);
}
.tree .balls {
  position: absolute;
}
.tree .balls-1 {
  width: 1.5rem;
  height: 1.5rem;
  background-color: #e8604b;
  position: absolute;
  z-index: 60;
  border-radius: 50%;
  box-shadow: inset 2px -1px #e3e3e3;
  border: 3px solid #5b3a3c;
  left: 2rem;
  top: 2rem;
  animation: red-light 1s 0.3s infinite;
}
.tree .balls-1:before {
  content: "";
  width: 2.1rem;
  height: 0.2rem;
  background: #5b393c;
  position: absolute;
  left: 1.4rem;
  top: 1.4rem;
  transform: rotate(26deg);
}
.tree .balls-2 {
  width: 1.5rem;
  height: 1.5rem;
  background-color: #fdb934;
  position: absolute;
  z-index: 60;
  border-radius: 50%;
  box-shadow: inset 2px -1px #e3e3e3;
  border: 3px solid #5b3a3c;
  left: 5.4rem;
  top: 3.3rem;
  animation: yellow-light 1s 0.1s infinite;
}
.tree .balls-3 {
  width: 1.5rem;
  height: 1.5rem;
  background-color: #efefef;
  position: absolute;
  z-index: 60;
  border-radius: 50%;
  box-shadow: inset 2px -1px #e3e3e3;
  border: 3px solid #5b3a3c;
  left: 3.2rem;
  top: 6.7rem;
  animation: white-light 1s infinite;
}
.tree .balls-3:before {
  content: "";
  width: 3.1rem;
  height: 0.2rem;
  background: #5b393c;
  position: absolute;
  left: 1.5rem;
  top: 0.3rem;
  transform: rotate(-16deg);
}
.tree .balls-3:after {
  content: "";
  width: 2.7rem;
  height: 0.2rem;
  background: #5b393c;
  position: absolute;
  left: -2.6rem;
  top: 1.4rem;
  transform: rotate(-16deg);
}
.tree .balls-4 {
  width: 1.5rem;
  height: 1.5rem;
  background-color: #fdb934;
  position: absolute;
  z-index: 60;
  border-radius: 50%;
  box-shadow: inset 2px -1px #e3e3e3;
  border: 3px solid #5b3a3c;
  left: -1.2rem;
  top: 9.4rem;
  animation: yellow-light 1s 0.5s infinite;
}
.tree .balls-4:before {
  content: "";
  width: 6.1rem;
  height: 0.2rem;
  background: #5b393c;
  position: absolute;
  left: 4.5rem;
  top: 2.2rem;
  transform: rotate(-8deg);
}
.tree .balls-5 {
  width: 1.5rem;
  height: 1.5rem;
  background-color: #e8604b;
  position: absolute;
  z-index: 60;
  border-radius: 50%;
  box-shadow: inset 2px -1px #e3e3e3;
  border: 3px solid #5b3a3c;
  left: 1.8rem;
  top: 11.4rem;
  animation: red-light 1s 0.2s infinite;
}
.tree .balls-5:before {
  content: "";
  width: 2.1rem;
  height: 0.2rem;
  background: #5b393c;
  position: absolute;
  left: -1.9rem;
  top: -0.2rem;
  transform: rotate(35deg);
}
.tree .balls-6 {
  width: 1.5rem;
  height: 1.5rem;
  background-color: #5768a5;
  position: absolute;
  z-index: 60;
  border-radius: 50%;
  box-shadow: inset 2px -1px #e3e3e3;
  border: 3px solid #5b3a3c;
  left: 8.8rem;
  top: 10.4rem;
  animation: blue-light 1s 0.2s infinite;
}
.tree .balls-6:before {
  content: "";
  width: 3.9rem;
  height: 0.2rem;
  background: #5b393c;
  position: absolute;
  left: -1.9rem;
  top: 3.8rem;
  transform: rotate(-18deg);
}
.tree .balls-7 {
  width: 1.5rem;
  height: 1.5rem;
  background-color: #efefef;
  position: absolute;
  z-index: 60;
  border-radius: 50%;
  box-shadow: inset 2px -1px #e3e3e3;
  border: 3px solid #5b3a3c;
  left: 5.8rem;
  top: 14.4rem;
  animation: white-light 1s 0.3s infinite;
}
.tree .balls-7:before {
  content: "";
  width: 6.9rem;
  height: 0.2rem;
  background: #5b393c;
  position: absolute;
  left: -6.9rem;
  top: 1.2rem;
  transform: rotate(-7deg);
}
.tree .balls-8 {
  width: 1.5rem;
  height: 1.5rem;
  background-color: #5768a5;
  position: absolute;
  z-index: 60;
  border-radius: 50%;
  box-shadow: inset 2px -1px #e3e3e3;
  border: 3px solid #5b3a3c;
  left: -2.2rem;
  top: 15.4rem;
  animation: blue-light 1s infinite;
}
.tree .balls-8:before {
  content: "";
  width: 1.9rem;
  height: 0.2rem;
  background: #5b393c;
  position: absolute;
  left: -1.9rem;
  top: 0.8rem;
  transform: rotate(-7deg);
}
.tree .star {
  --star-color:orange;
  margin: 1em auto;
  font-size: 1rem;
  position: absolute;
  display: block;
  width: 0px;
  height: 0px;
  border-right: 1em solid transparent;
  border-bottom: 0.7em solid var(--star-color);
  border-left: 1em solid transparent;
  top: -2.4rem;
  left: 3.6rem;
  transform: rotate(36deg);
  z-index: 80;
}
.tree .star:before {
  border-bottom: 0.8em solid var(--star-color);
  border-left: 0.3em solid transparent;
  border-right: 0.3em solid transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: -0.45em;
  left: -0.65em;
  display: block;
  content: "";
  transform: rotate(-35deg);
}
.tree .star:after {
  position: absolute;
  display: block;
  top: 0.03em;
  left: -1.05em;
  width: 0;
  height: 0;
  border-right: 1em solid transparent;
  border-bottom: 0.7em solid var(--star-color);
  border-left: 1em solid transparent;
  transform: rotate(-70deg);
  content: "";
}
.tree .star-shadow {
  --star-color: #5b3a3c;
  margin: 1em auto;
  font-size: 1.2rem;
  position: absolute;
  display: block;
  width: 0px;
  height: 0px;
  border-right: 1em solid transparent;
  border-bottom: 0.7em solid var(--star-color);
  border-left: 1em solid transparent;
  top: -2.67rem;
  left: 3.46rem;
  transform: rotate(36deg);
}
.tree .star-shadow:before {
  border-bottom: 0.8em solid var(--star-color);
  border-left: 0.3em solid transparent;
  border-right: 0.3em solid transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: -0.45em;
  left: -0.65em;
  display: block;
  content: "";
  transform: rotate(-35deg);
}
.tree .star-shadow:after {
  position: absolute;
  display: block;
  top: 0.03em;
  left: -1.05em;
  width: 0;
  height: 0;
  border-right: 1em solid transparent;
  border-bottom: 0.7em solid var(--star-color);
  border-left: 1em solid transparent;
  transform: rotate(-70deg);
  content: "";
}

.santa {
  position: absolute;
  top: -14rem;
  left: 0rem;
  animation: santaMove 15s 0s infinite;
  z-index: 99999;
}
.santa__head {
  position: absolute;
  top: 0rem;
  left: 0rem;
  z-index: 178;
  animation: headMove 2s infinite;
}
.santa__head--face {
  width: 9rem;
  height: 4rem;
  background-color: #ffddbe;
  position: absolute;
  border-radius: 5rem 4rem 4rem 4rem;
  left: 50.4rem;
  top: 26.4rem;
  transform: skew(-19deg, 10deg);
}
.santa__head--eye-r {
  width: 2rem;
  height: 1rem;
  position: absolute;
  top: 27.9rem;
  left: 51.1rem;
  box-shadow: inset -1px 4px black;
  border-radius: 50%;
}
.santa__head--eye-l {
  width: 2rem;
  height: 1rem;
  position: absolute;
  top: 28.5rem;
  left: 55.5rem;
  box-shadow: inset -1px 4px black;
  border-radius: 50%;
  transform: rotate(12deg);
}
.santa__head--nose {
  width: 2rem;
  height: 1.7rem;
  position: absolute;
  top: 29rem;
  left: 52.7rem;
  background-color: #e79f9f;
  border-radius: 50%;
}
.santa__head--beard {
  width: 9.8rem;
  height: 7.6rem;
  position: absolute;
  top: 28.1rem;
  background-color: #ffffff;
  border-radius: 9rem 0rem 18rem 11rem;
  left: 49.4rem;
  transform: rotate(6deg);
}
.santa__head--backofhead {
  width: 10rem;
  height: 10rem;
  background-color: #d1d3c7;
  position: absolute;
  border-radius: 5rem 4rem 5rem 4rem;
  left: 50rem;
  top: 25.8rem;
  transform: skew(-19deg, 10deg);
}
.santa__hat {
  position: absolute;
  left: 0rem;
  top: 0rem;
  z-index: 200;
}
.santa__hat--fluffy {
  width: 8.2rem;
  height: 2.7rem;
  background-color: #fff;
  position: absolute;
  top: 24rem;
  left: 50.5rem;
  border-radius: 3rem 4rem 0rem 1rem;
}
.santa__hat--fluffy:after {
  content: "";
  width: 8.2rem;
  height: 2.7rem;
  background-color: #fff;
  position: absolute;
  top: 0.4rem;
  left: 1.6rem;
  border-radius: 3rem 9rem 0rem 0rem;
  transform: skewY(10deg);
}
.santa__hat--fluffy:before {
  content: "";
  width: 3.5rem;
  height: 2.7rem;
  background-color: #fff;
  position: absolute;
  top: 1rem;
  left: 7.6rem;
  border-radius: 50rem;
  transform: skewY(27deg);
}
.santa__hat--base {
  width: 6.6rem;
  height: 4rem;
  background: #bd4443;
  position: absolute;
  top: 21.9rem;
  left: 52.3rem;
  border-radius: 9rem 3rem 6rem 4rem;
  transform: skew(-33deg, 10deg);
}
.santa__hat--fluffy-aux {
  width: 2rem;
  height: 2rem;
  background: white;
  position: absolute;
  top: 23.4rem;
  left: 62.4rem;
  border-radius: 50%;
}
.santa__hat--base-aux {
  width: 6.6rem;
  height: 2rem;
  background: #bd4443;
  position: absolute;
  top: 22.7rem;
  left: 55.3rem;
  border-radius: 9rem 3rem 6rem 4rem;
  transform: skew(-56deg, 25deg);
  animation: hatMove 2s infinite;
}
.santa__body {
  position: absolute;
  top: 0rem;
  animation: bodyMove 3s infinite;
}
.santa__body__chest {
  z-index: 50;
  position: absolute;
  top: 0rem;
  left: 0rem;
}
.santa__body__chest--base {
  width: 12.5rem;
  height: 10rem;
  background-color: #bd4443;
  position: absolute;
  top: 33rem;
  left: 49.5rem;
  border-radius: 7rem 5rem 2rem 3rem;
  transform: rotate(-4deg);
}
.santa__body__chest--belt {
  width: 13.2rem;
  height: 2.5rem;
  background-color: #0c0d32;
  position: absolute;
  top: 38.3rem;
  left: 49.3rem;
  border-radius: 3rem 4rem 2rem 2rem;
  transform: rotate(2deg);
}
.santa__body__chest--belt:after {
  content: "";
  width: 2.3rem;
  height: 2rem;
  border-radius: 1rem;
  border: 1rem solid #f2cc54;
  position: absolute;
  left: 1.7rem;
  top: -0.6rem;
}
.santa__body__chest--aux {
  width: 13rem;
  height: 4rem;
  position: absolute;
  top: 38.6rem;
  left: 49.4rem;
  border-radius: 50%;
  transform: rotate(1deg);
  box-shadow: 1px 16px white;
}
.santa__body__arm--r {
  width: 4rem;
  height: 6rem;
  position: absolute;
  top: 33.8rem;
  background-color: #953b3a;
  left: 48.3rem;
  border-radius: 50%;
  transform: rotate(45deg);
  animation: rightArmMove 2s 0s infinite;
}
.santa__body__arm--r:before {
  content: "";
  width: 2rem;
  height: 3rem;
  position: absolute;
  top: 3rem;
  background-color: #953b3a;
  left: 0rem;
  transform: rotate(1deg);
}
.santa__body__arm--r:after {
  content: "";
  width: 3.3rem;
  height: 3.3rem;
  position: absolute;
  top: 2.7rem;
  background-color: #ffffff;
  left: -2rem;
  transform: rotate(-1deg);
  border-radius: 50%;
}
.santa__body__arm--l {
  width: 4.4rem;
  height: 6rem;
  position: absolute;
  top: 33.8rem;
  background-color: #bd4443;
  left: 58.3rem;
  border-radius: 50%;
  transform: rotate(12deg);
  z-index: 160;
}
.santa__body__arm--l:before {
  content: "";
  width: 2rem;
  height: 3rem;
  position: absolute;
  top: 3rem;
  background-color: #bd4443;
  left: 0rem;
  transform: rotate(1deg);
}
.santa__body__arm--l:after {
  content: "";
  width: 3.3rem;
  height: 3.3rem;
  position: absolute;
  top: 2.7rem;
  background-color: #ffffff;
  left: -2rem;
  transform: rotate(-1deg);
  border-radius: 50%;
}
.santa__body__hand--r {
  width: 3rem;
  height: 3.5rem;
  background-color: #101130;
  position: absolute;
  top: 33.1rem;
  left: 44.8rem;
  border-radius: 50%;
  animation: rightHandMove 2s 0s infinite;
}
.santa__body__hand--r:before {
  content: "";
  width: 2rem;
  height: 2rem;
  background-color: #101130;
  position: absolute;
  top: 0.5rem;
  left: 1.5rem;
  border-radius: 50%;
}
.santa__body__hand--l {
  width: 3rem;
  height: 3.5rem;
  background-color: #101130;
  position: absolute;
  top: 35.1rem;
  left: 55.8rem;
  border-radius: 50%;
  z-index: 180;
}
.santa__body__hand--l:before {
  content: "";
  width: 2rem;
  height: 2rem;
  background-color: #101130;
  position: absolute;
  top: 0.8rem;
  left: -0.3rem;
  border-radius: 50%;
}
.santa__body__leg {
  position: absolute;
  top: 0rem;
  left: 0rem;
  z-index: 10;
}
.santa__body__leg--r {
  width: 4.4rem;
  height: 4rem;
  background-color: #953b3a;
  position: absolute;
  top: 42.2rem;
  left: 51.1rem;
  border-radius: 1rem 1rem 2rem 2rem;
  transform: rotate(26deg);
  animation: rightLegMove 2s 0s infinite;
}
.santa__body__leg--l {
  width: 4.4rem;
  height: 4.5rem;
  background-color: #bd4443;
  position: absolute;
  top: 41.7rem;
  left: 56.1rem;
  border-radius: 1rem 1rem 2rem 4rem;
  transform: rotate(-37deg);
  animation: leftLegMove 2s 0s infinite;
}
.santa__body__foot {
  position: absolute;
  top: 0rem;
  left: 0rem;
  z-index: 5;
}
.santa__body__foot--r {
  width: 2.8rem;
  height: 3rem;
  background-color: #10112f;
  position: absolute;
  top: 45.2rem;
  left: 50.7rem;
  border-radius: 0rem 0rem 1rem 0rem;
  transform: rotate(26deg);
  animation: rightFootMove 2s 0s infinite;
}
.santa__body__foot--r:after {
  content: "";
  width: 2rem;
  height: 2rem;
  background-color: #10112f;
  position: absolute;
  top: 1rem;
  left: -1.4rem;
  border-radius: 1rem 0rem 0rem 1rem;
  transform: rotate(0deg);
}
.santa__body__foot--l {
  width: 2.5rem;
  height: 3rem;
  background-color: #10112f;
  position: absolute;
  top: 42.8rem;
  left: 60.3rem;
  border-radius: 0rem 0rem 1rem 0rem;
  transform: rotate(-89deg);
  animation: leftFootMove 2s 0s infinite;
}
.santa__body__foot--l:after {
  content: "";
  width: 2rem;
  height: 2rem;
  background-color: #10112f;
  position: absolute;
  top: 1rem;
  left: -1.4rem;
  border-radius: 1rem 0rem 0rem 1rem;
  transform: rotate(0deg);
}
.santa__bag {
  width: 9rem;
  height: 8rem;
  background-color: #bf2423;
  position: absolute;
  top: 29.5rem;
  left: 60.5rem;
  border-radius: 0rem 5rem 8rem 5rem;
  transform: rotate(-70deg) scaleY(1.5);
  box-shadow: inset 3px -12px 0px #a5201f;
  z-index: 177;
  animation: bagMove 1.3s infinite;
}
.santa__bag--aux {
  width: 2rem;
  height: 8rem;
  background-color: #bf2423;
  position: absolute;
  top: 32.5rem;
  left: 57.7rem;
  border-radius: 0rem 5rem 8rem 1rem;
  transform: rotate(67deg);
  z-index: 177;
}

.shelf {
  width: 15rem;
  height: 1rem;
  background-color: #715334;
  position: relative;
  top: 0rem;
  border-top-right-radius: 0.3rem;
  border-top-left-radius: 0.3rem;
  border-bottom-right-radius: 0.1rem;
  border-bottom-left-radius: 0.1rem;
  left: -8rem;
}
.shelf:after {
  width: 15rem;
  height: 0.2rem;
  content: "";
  position: absolute;
  bottom: -0.2rem;
  background-color: rgba(82, 57, 30, 0.4);
}
.shelf__pe {
  background-color: #715334;
  position: absolute;
  width: 1rem;
  height: 0.9rem;
  border-bottom-right-radius: 0.7rem;
  border-bottom-left-radius: 0.7rem;
  top: 20.7rem;
  left: 6rem;
}
.shelf__pe:before {
  width: 0.4rem;
  content: "";
  height: 0.9rem;
  background-color: #52391e;
  position: absolute;
  right: 0;
  bottom: 0;
  border-bottom-right-radius: 0.8rem;
}
.shelf__re {
  background-color: #715334;
  position: absolute;
  width: 1rem;
  height: 0.9rem;
  border-bottom-right-radius: 0.7rem;
  border-bottom-left-radius: 0.7rem;
  top: 20.7rem;
  left: 17rem;
}
.shelf__re:before {
  width: 0.4rem;
  content: "";
  height: 0.9rem;
  background-color: #52391e;
  position: absolute;
  right: 0;
  bottom: 0;
  border-bottom-right-radius: 0.8rem;
}

.window {
  width: 14.2rem;
  height: 11rem;
  background-color: #161c3f;
  border: 5px solid #715334;
  position: absolute;
  left: 4.6rem;
  top: 6rem;
  overflow: hidden;
}
.window:before {
  content: "";
  background: #715334;
  width: 0.4rem;
  height: 11.1rem;
  position: absolute;
  left: 6.6rem;
  z-index: 8;
}
.window:after {
  content: "";
  background: #715334;
  width: 14.2rem;
  height: 0.4rem;
  position: absolute;
  left: 0rem;
  top: 5.6rem;
}
.window .snow,
.window .snow:before,
.window .snow:after {
  position: absolute;
  top: -600px;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: radial-gradient(3px 3px at 502px 555px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 524px 373px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 536px 233px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 208px 420px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 486px 199px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 170px 66px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 426px 486px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 527px 47px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 29px 433px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 314px 57px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 351px 409px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 397px 552px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 249px 325px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 275px 159px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 559px 570px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 513px 529px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 255px 76px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 499px 257px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 132px 138px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 91px 301px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 182px 141px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 342px 492px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 31px 413px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 247px 204px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 405px 554px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 41px 460px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 277px 31px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 396px 176px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 524px 328px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 568px 222px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 258px 424px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 241px 384px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 29px 437px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 340px 223px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 206px 49px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 59px 186px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 516px 242px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 112px 313px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 265px 534px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 564px 131px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 249px 52px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 564px 307px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 254px 242px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 373px 350px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 523px 528px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 70px 84px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 324px 331px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 65px 429px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 568px 490px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 213px 412px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 510px 529px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 140px 446px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 314px 101px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 141px 535px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 309px 322px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 37px 64px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 291px 251px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 350px 350px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 193px 482px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 128px 390px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 517px 257px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 538px 548px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 257px 580px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 423px 245px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 218px 244px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 438px 517px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 33px 371px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 476px 96px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 239px 171px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 413px 261px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0));
  background-size: 600px 600px;
  animation: snow 3s linear infinite;
  content: "";
}
.window .snow {
  z-index: 4;
}
.window .snow:after {
  margin-left: -200px;
  opacity: 0.4;
  animation-duration: 6s;
  animation-direction: reverse;
  filter: blur(3px);
}
.window .snow:before {
  animation-duration: 9s;
  animation-direction: reverse;
  margin-left: -300px;
  opacity: 0.65;
  filter: blur(1.5px);
}
.window .montain {
  width: 18rem;
  height: 9rem;
  background: #091035;
  position: absolute;
  bottom: -6rem;
  border-radius: 50%;
  left: -2rem;
  z-index: 1;
  box-shadow: inset -20px 4px #ffffff4d;
}
.window .montain:before {
  content: "";
  width: 19rem;
  height: 18rem;
  position: absolute;
  background: #101637;
  left: -5rem;
  top: -1rem;
  border-radius: 50%;
  box-shadow: inset 18px 20px #ffffff24;
}

.gift {
  width: 6rem;
  height: 6rem;
  background-color: #5a994e;
  position: absolute;
  top: 28rem;
  left: 20rem;
  z-index: 9999;
}
.gift .base {
  width: 1rem;
  height: 0.8rem;
  position: absolute;
  background-color: #932626;
  left: 2.4rem;
  z-index: 99;
  border: 3px solid #cbcb79;
  border-bottom: 0px;
}
.gift .lace {
  width: 1.5rem;
  height: 1rem;
  border-radius: 50%;
  background: #812525;
  position: absolute;
  left: 1.6rem;
  top: -1rem;
  border: 3px solid #cbcb79;
  transform: rotate(45deg);
}
.gift .lace2 {
  width: 1.5rem;
  height: 1rem;
  border-radius: 50%;
  background: #812525;
  position: absolute;
  left: 2.5rem;
  top: -1rem;
  border: 3px solid #cbcb79;
  transform: rotate(111deg);
}
.gift:before {
  content: "";
  width: 1rem;
  height: 5.6rem;
  background: #812525;
  position: absolute;
  left: 40%;
  border: 3px solid #cbcb79;
}
.gift:after {
  content: "";
  width: 6rem;
  height: 1rem;
  position: absolute;
  top: 0rem;
  background: #5a994e;
  box-shadow: 0px 4px 3px #00000047;
}
.gift-aux {
  width: 7rem;
  height: 4rem;
  background-color: #0000002e;
  position: absolute;
  top: 32rem;
  left: 19.6rem;
  z-index: 9999;
  border-radius: 50%;
  transform: rotateX(79deg);
}

.gift2 {
  width: 9rem;
  height: 8rem;
  background-color: #bf613d;
  position: absolute;
  top: 25rem;
  left: 17rem;
  z-index: 10;
}
.gift2:before {
  content: "";
  width: 1rem;
  height: 8rem;
  background: #4131cd;
  position: absolute;
  left: 47%;
}
.gift2:after {
  content: "";
  width: 9rem;
  height: 1rem;
  position: absolute;
  top: 0rem;
  background: #bf613d;
  box-shadow: 0px 4px 3px #00000047;
}
.gift2-aux2 {
  width: 7rem;
  height: 4rem;
  background-color: #0000002e;
  position: absolute;
  top: 31rem;
  left: 16.9rem;
  border-radius: 50%;
  transform: rotateX(79deg);
}

.gift3 {
  width: 9rem;
  height: 8rem;
  background-color: #307f7b;
  position: absolute;
  top: 24.2rem;
  left: 23.1rem;
  z-index: 10;
}
.gift3-aux3 {
  width: 7rem;
  height: 4rem;
  background-color: #0000002e;
  position: absolute;
  top: 30.2rem;
  left: 22.9rem;
  border-radius: 50%;
  transform: rotateX(79deg);
}

@keyframes red-light {
  0% {
    background-color: #e54d35;
  }
  50% {
    background-color: #d33820;
  }
  100% {
    background-color: #e54d35;
  }
}
@keyframes yellow-light {
  0% {
    background-color: #fdb934;
  }
  50% {
    background-color: #e99b03;
  }
  100% {
    background-color: #fdb934;
  }
}
@keyframes blue-light {
  0% {
    background-color: #5768a5;
  }
  50% {
    background-color: #354b9b;
  }
  100% {
    background-color: #5768a5;
  }
}
@keyframes white-light {
  0% {
    background-color: #efefef;
  }
  50% {
    background-color: #ffffff;
  }
  100% {
    background-color: #efefef;
  }
}
@keyframes rightLegMove {
  0% {
    left: 51.1rem;
    transform: rotate(26deg);
    background-color: #953b3a;
  }
  50% {
    left: 56rem;
    transform: rotate(-10deg);
    background-color: #bd4443;
  }
  100% {
    left: 51.1rem;
    transform: rotate(26deg);
    background-color: #953b3a;
  }
}
@keyframes leftFootMove {
  0% {
    top: 42.8rem;
    left: 60.3rem;
    transform: rotate(-89deg);
  }
  50% {
    top: 45.8rem;
    left: 50.8rem;
    transform: rotate(10deg);
  }
  100% {
    top: 42.8rem;
    left: 60.3rem;
    transform: rotate(-89deg);
  }
}
@keyframes leftLegMove {
  0% {
    left: 56.1rem;
    transform: rotate(-37deg);
    background-color: #bd4443;
  }
  50% {
    left: 50.1rem;
    transform: rotate(32deg);
    background-color: #953b3a;
  }
  100% {
    left: 56.1rem;
    transform: rotate(-37deg);
    background-color: #bd4443;
  }
}
@keyframes rightFootMove {
  0% {
    top: 45.2rem;
    left: 50.7rem;
    transform: rotate(26deg);
  }
  50% {
    top: 43.2rem;
    left: 59.7rem;
    transform: rotate(-81deg);
  }
  100% {
    top: 45.2rem;
    left: 50.7rem;
    transform: rotate(26deg);
  }
}
@keyframes bagMove {
  0% {
    transform: rotate(-70deg) scaleY(1.5);
    top: 29.5rem;
  }
  50% {
    transform: rotate(-72deg) scaleY(1.5);
    top: 29.4rem;
  }
  100% {
    transform: rotate(-70deg) scaleY(1.5);
    top: 29.5rem;
  }
}
@keyframes headMove {
  0% {
    top: 0rem;
  }
  50% {
    top: 0.1rem;
  }
  100% {
    top: 0rem;
  }
}
@keyframes hatMove {
  0% {
    transform: skew(-56deg, 25deg);
  }
  50% {
    transform: skew(-60deg, 25deg);
  }
  100% {
    transform: skew(-56deg, 25deg);
  }
}
@keyframes bodyMove {
  0% {
    top: 0rem;
  }
  50% {
    top: 0.2rem;
  }
  100% {
    top: 0rem;
  }
}
@keyframes rightHandMove {
  0% {
    top: 33.1rem;
  }
  50% {
    top: 35.1rem;
  }
  100% {
    top: 33.1rem;
  }
}
@keyframes rightArmMove {
  0% {
    left: 48.3rem;
    transform: rotate(45deg);
    top: 33.8rem;
  }
  50% {
    left: 48.3rem;
    transform: rotate(30deg);
    top: 35rem;
  }
  100% {
    left: 48.3rem;
    transform: rotate(45deg);
    top: 33.8rem;
  }
}
@keyframes santaMove {
  0% {
    left: -4rem;
    transform: scale(1, 1);
  }
  49% {
    left: -72rem;
    transform: scale(1, 1);
  }
  50% {
    left: 42rem;
    transform: scale(-1, 1);
  }
  99% {
    left: 113rem;
    transform: scale(-1, 1);
  }
  100% {
    left: -4rem;
    transform: scale(1, 1);
  }
}
@keyframes snow {
  to {
    transform: translateY(600px);
  }
}