cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="background">
    <div class="container">
      <label for="candles-checkbox" class="candles-checkbox"></label>
      <input id="candles-checkbox" type="checkbox">
      <div class="candle-one">
        <div class="fire"></div>
      </div>
      <div class="candle-two">
        <div class="fire"></div>
      </div>
      <div class="candle-three">
        <div class="fire"></div>
      </div>
      <div class="light"></div>
      <div class="shadow"></div>
      <label for="picture-frame-left-checkbox" class="picture-frame-left-label"></label>
      <input id="picture-frame-left-checkbox" type="checkbox">
      <label for="picture-frame-right-checkbox" class="picture-frame-right-label"></label>
      <input id="picture-frame-right-checkbox" type="checkbox">
      <input type="checkbox" id="garland-checkbox">
      <label for="garland-checkbox" class="garland-label">
        <div class="garland-one">
          <div class="diod"></div>
          <div class="diod"></div>
        </div>
        <div class="garland-two">
          <div class="diod"></div>
          <div class="diod"></div>
          <div class="diod"></div>
        </div>
        <div class="garland-three">
          <div class="diod"></div>
          <div class="diod"></div>
          <div class="diod"></div>
          <div class="diod"></div>
        </div>
        <div class="garland-four">
          <div class="diod"></div>
          <div class="diod"></div>
          <div class="diod"></div>
          <div class="diod"></div>
          <div class="diod"></div>
          <div class="diod"></div>
        </div>
        <div class="garland-five">
          <div class="diod"></div>
          <div class="diod"></div>
          <div class="diod"></div>
          <div class="diod"></div>
          <div class="diod"></div>
          <div class="diod"></div>
          <div class="diod"></div>
        </div>
        <div class="garland-six">
          <div class="diod"></div>
          <div class="diod"></div>
        </div>
      </label>
      <div class="wall">
        <div class="picture-frame-left">
          <div class="petals"></div>
          <div class="petals"></div>
        </div>
        <div class="stone-one"></div>
        <div class="stone-two"></div>
        <div class="stone-three"></div>
        <div class="stone-four"></div>
        <div class="shelf-one"></div>
        <div class="bottle-one"></div>
        <div class="bottle-two"></div>
        <div class="shelf-two"></div>
        <div class="plant"></div>
        <div class="hem"></div>
        <div class="pot"></div>
        <div class="picture-frame-right">
          <div class="petals"></div>
          <div class="petals"></div>
          <div class="petals"></div>
          <div class="petals"></div>
        </div>
      </div>
      <div class="background-furniture">
        <div class="chair">
          <div class="back-pillow"></div>
          <div class="armrests"></div>
          <div class="pillow-one">
            <div class="corner-pillow"></div>
            <div class="corner-pillow"></div>
            <div class="corner-pillow"></div>
            <div class="corner-pillow"></div>
          </div>
          <div class="pillow-two">
            <div class="corner-pillow"></div>
            <div class="corner-pillow"></div>
            <div class="corner-pillow"></div>
            <div class="corner-pillow"></div>
          </div>
        </div>
        <div class="chair-legs"></div>
        <div class="table">
          <div class="hem"></div>
          <div class="pot"></div>
          <div class="christmas-tree">
            <div class="branches"></div>
            <div class="branches"></div>
            <div class="branches"></div>
            <div class="branches"></div>
            <div class="branches"></div>
          </div>
          <div class="trunk"></div>
        </div>
        <div class="table-leg"></div>
      </div>
      <label for="belly-checkbox" class="belly-label"></label>
      <input id="belly-checkbox" type="checkbox">
      <div class="rudolph">
        <div class="body">
          <div class="hand-left">
            <div class="forearm"></div>
          </div>
          <div class="hand-right">
            <div class="forearm"></div>
          </div>
          <div class="belly"></div>
          <div class="neck">
            <div class="head">
              <div class="ear"></div>
              <div class="nose"></div>
            </div>
            <div class="horns"></div>
            <div class="horns"></div>
            <div class="horns"></div>
            <div class="horns"></div>
            <div class="horns"></div>
            <div class="horns"></div>
            <div class="horns"></div>
          </div>
        </div>
        <div class="feet-left">
          <div class="foot"></div>
        </div>
        <div class="feet-right">
          <div class="foot"></div>
        </div>
      </div>
      <div class="people">
        <div class="body"></div>
        <div class="head">
          <div class="hair"></div>
          <div class="face"></div>
        </div>
      </div>
      <div class="leg-left"></div>
      <div class="leg-right"></div>
      <div class="massage-table"></div>
      <div class="massage-table-leg-left"></div>
      <div class="massage-table-leg-right"></div>
      <div class="floor"></div>
    </div>
    <div class="info" data-info-text="Candles, christmas tree, picture frames, belly of the deer: interactive. (Clickable)">i</div>
  </div>
            
          
!
            
              body {
  margin: 0;
  padding: 0;
  border: none;
}

.background {
  background: 
    radial-gradient(
      circle at right, 
      rgba(233, 241, 223, 0) 0.33333em, 
      #e9f1df 0.33333em, 
      #e9f1df 0.48889em, 
      rgba(233, 241, 223, 0) 0.48889em, 
      rgba(233, 241, 223, 0) 0.82222em, 
      #e9f1df 0.82222em, 
      #e9f1df 0.97778em, 
      rgba(233, 241, 223, 0) 0.97778em, 
      rgba(233, 241, 223, 0) 1.31111em, 
      #e9f1df 1.31111em, 
      #e9f1df 1.46667em, 
      rgba(233, 241, 223, 0) 1.46667em) 0 0, 
    radial-gradient(
      circle at left, 
      rgba(233, 241, 223, 0) 0.57778em, 
      #e9f1df 0.57778em, 
      #e9f1df 0.73333em, 
      rgba(233, 241, 223, 0) 0.73333em, 
      rgba(233, 241, 223, 0) 1.06667em, 
      #e9f1df 1.06667em, 
      #e9f1df 1.22222em, 
      rgba(233, 241, 223, 0) 1.22222em) 0 3.05146em,
    linear-gradient(
      to right top, 
      #E9F1DF 0.15556em, 
      rgba(233, 241, 223, 0) 0.15556em) 1.22222em 0.15556em, 
    linear-gradient(
      to left top, 
      #E9F1DF 0.15556em, 
      rgba(233, 241, 223, 0) 0.15556em) 1.22222em 0.15556em, 
    linear-gradient(
      to right bottom, 
      #E9F1DF 0.15556em, 
      rgba(233, 241, 223, 0) 0.15556em) 1.22222em 0.15556em, 
    linear-gradient(
      to left bottom, 
      #E9F1DF 0.15556em, 
      rgba(233, 241, 223, 0) 0.15556em) 1.22222em 0.15556em;
  background-size: 2.8em 2.8em;
  background-color: #cee2e8;
  width: 100vw;
  height: 100vh;
}

.container {
  width: 800px;
  height: 600px;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  z-index: 1;
}

.garland-label {
  position: absolute;
  width: 110px;
  height: 145px;
  top: 180px;
  right: 0;
  z-index: 80;
  cursor: pointer;
}

[class^="garland-"] {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

[class^="garland-"] .diod {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.garland-one {
  position: absolute;
  width: 30px;
  height: 7px;
  bottom: 120px;
  right: 37px;
  transform: rotate(-15deg);
}

.garland-two {
  position: absolute;
  width: 45px;
  height: 7px;
  bottom: 105px;
  right: 30px;
  transform: rotate(-15deg);
}

.garland-three {
  position: absolute;
  width: 65px;
  height: 7px;
  bottom: 86px;
  right: 23px;
  transform: rotate(-15deg);
}

.garland-four {
  position: absolute;
  width: 75px;
  height: 7px;
  bottom: 63px;
  right: 18px;
  transform: rotate(-15deg);
}

.garland-five {
  position: absolute;
  width: 95px;
  height: 7px;
  bottom: 36px;
  right: 10px;
  transform: rotate(-15deg);
}

.garland-six {
  position: absolute;
  width: 30px;
  height: 7px;
  bottom: 25px;
  right: -1px;
  transform: rotate(-15deg);
}

[class^="garland-"] .diod:nth-child(odd) {
  background-color: #e53939;
  box-shadow: 0 0 10px .2px #e53939;
  animation: garland-odd-anim-one .7s infinite;
}

@keyframes garland-odd-anim-one {
  50% {
    background-color: #efc71e;
    box-shadow: 0 0 10px .2px #efc71e;
  }
}

[class^="garland-"] .diod:nth-child(even) {
  background-color: #efc71e;
  box-shadow: 0 0 10px .2px #efc71e;
  animation: garland-even-anim-one .7s infinite;
}

@keyframes garland-even-anim-one {
  50% {
    background-color: #e53939;
    box-shadow: 0 0 10px .2px #e53939;
  }
}

input[id="garland-checkbox"]:checked ~ .garland-label > [class^="garland-"] > .diod:nth-child(odd) {
  background-color: #35c6e8;
  box-shadow: 0 0 10px .2px #35c6e8;
  animation: garland-odd-anim-two .9s infinite;
}

@keyframes garland-odd-anim-two {
  50% {
    background-color: transparent;
    box-shadow: 0 0 10px .2px transparent;
  }
}

input[id="garland-checkbox"]:checked ~ .garland-label > [class^="garland-"] > .diod:nth-child(even) {
  background-color: transparent;
  box-shadow: 0 0 10px .2px transparent;
  animation: garland-even-anim-two .9s infinite;
}

@keyframes garland-even-anim-two {
  50% {
    background-color: #51e835;
    box-shadow: 0 0 10px .2px #51e835;
  }
}

.wall {
  position: relative;
  width: 100%;
  height: 385px;
  background-color: #f8efe0;
  background-image: 
    linear-gradient(
      to right,
      transparent 0%,
      transparent 230px,
      #412817 230px,
      #412817 238px,
      transparent 238px,
      transparent 562px,
      #412817 562px,
      #412817 570px,
      transparent 570px,
      transparent 100%
    );
  z-index: 2;
}

[class^="picture-frame-"]:not([class$="-label"]) {
  position: absolute;
  width: 75px;
  height: 95px;
  background-color: #fff;
  border: 8px solid #412817;
  transform-origin: 50% 10%;
  transform: rotate(0deg);
  z-index: 3;
}

.picture-frame-left {
  top: 48px;
  left: -38px;
}

.picture-frame-left-label {
  position: absolute;
  width: 75px;
  height: 95px;
  top: 48px;
  left: -38px;
  border: 8px solid transparent;
  z-index: 40;
  cursor: pointer;
}

input[id="picture-frame-left-checkbox"]:checked ~ .wall > .picture-frame-left {
  animation: picture-frame-left-anim 1s;
}

@keyframes picture-frame-left-anim {
  25% {
    transform: rotate(10deg);
  }
  75% {
    transform: rotate(-5deg);
  }
}

.picture-frame-left::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  border: 1.5px solid #333;
  background-color: #fff;
  border-radius: 50%;
  left: 0;
  right: 0;
  top: 28px;
  margin: auto;
  z-index: 5;
}

.picture-frame-left::after {
  content: "";
  position: absolute;
  width: 30px;
  border: 1.5px dotted #333;
  left: 0;
  right: 0;
  bottom: 15px;
  margin: auto;
  z-index: 5;
}

.picture-frame-left .petals {
  content: "";
  position: absolute;
  width: 1px;
  height: 1px;
  border: 1.5px solid #333;
  border-radius: 50%;
  left: 0;
  right: 0;
  top: 35px;
  margin: auto;
  z-index: 4;
}

.picture-frame-left .petals::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #333;
  border: 1.5px solid #333;
  border-top-left-radius: 90px;
  border-bottom-right-radius: 90px;
  transform: rotate(-45deg);
  top: -27px;
  left: -10px;
  z-index: 4;
}

.picture-frame-left .petals::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #333;
  border: 1.5px solid #333;
  border-top-left-radius: 90px;
  border-bottom-right-radius: 90px;
  transform: rotate(-45deg);
  bottom: -27px;
  left: -10px;
  z-index: 4;
}

.picture-frame-left .petals:nth-child(2) {
  transform: rotate(90deg);
}

[class^="stone-"] {
  position: absolute;
  background: #393939;
  border-radius: 47%;
  z-index: 3;
}

.stone-one {
  width: 50px;
  height: 20px;
  top: 96px;
  left: -4px;
  right: 0;
  margin: auto;
}

.stone-two {
  width: 35px;
  height: 15px;
  top: 84px;
  left: -2px;
  right: 0;
  margin: auto;
}

.stone-three {
  width: 25px;
  height: 12px;
  top: 76px;
  left: 2px;
  right: 0;
  margin: auto;
}

.stone-four {
  width: 20px;
  height: 9px;
  top: 106px;
  left: 76px;
  right: 0;
  margin: auto;
}

[class^="shelf-"] {
  position: absolute;
  width: 135px;
  height: 17px;
  background-color: #936037;
  border-radius: 5px;
  left: 0;
  right: 0;
  margin: auto;
  box-shadow: 0 8px 0 -1px #d6cdc1;
  z-index: 5;
}

[class^="shelf-"]::before {
  content: "";
  position: absolute;
  width: 115px;
  height: 2px;
  border-radius: 10px;
  background-color: #d69d57;
  top: -1px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 6;
}

.shelf-one {
  top: 113px;
}

[class^="bottle-"]::before {
  content: "";
  position: absolute;
  background-color: #393939;
  width: 8px;
  height: 4px;
  border-radius: 1px;
  z-index: 5;
  top: -4px;
  left: 0;
  right: 0;
  margin: auto;
}

[class^="bottle-"] {
  position: absolute;
  width: 18px;
  height: 23px;
  border-radius: 4px;
  right: 0;
  margin: auto;
}

.bottle-one {
  top: 192px;
  left: -53px;
  background-color: #d6e4ef;
  z-index: 4;
}

.bottle-two {
  top: 192px;
  left: -74px;
  background-color: #c4d8e9;
  z-index: 3;
}

.plant {
  position: absolute;
  width: 62px;
  height: 5px;
  background-color: #673b11;
  border-radius: 50px;
  top: 196px;
  left: 40px;
  right: 0;
  margin: auto;
  transform: rotate(55deg);
  z-index: 2;
}

.plant::before {
  content: "";
  position: absolute;
  width: 60px;
  height: 5px;
  background-color: #673b11;
  border-radius: 50px;
  top: -3px;
  left: 8px;
  right: 0;
  margin: auto;
  transform: rotate(65deg);
  z-index: 2;
}

.plant::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 4px;
  background-color: #673b11;
  border-radius: 50px;
  top: -20px;
  left: -15px;
  right: 0;
  margin: auto;
  transform: rotate(8deg);
  z-index: 2;
}

.hem {
  content: "";
  position: absolute;
  width: 49px;
  height: 5px;
  background-color: #393939;
  border-radius: 50px;
  top: 196px;
  left: 46px;
  right: 0;
  margin: auto;
  z-index: 4;
}

.hem::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 2px;
  background-color: #a3a9b0;
  border-radius: 50px;
  top: 3px;
  left: 7px;
  right: 0;
  margin: auto;
  z-index: 5;
}

.pot {
  position: absolute;
  width: 35px;
  height: 35px;
  top: 183px;
  left: 46px;
  right: 0;
  margin: auto;
  background-image: 
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 50%,
      #393939 50%,
      #393939 100%
    );
  transform: rotate(45deg);
  z-index: 3;
}

.shelf-two {
  top: 215px;
}

.picture-frame-right {
  top: 48px;
  right: -38px;
}

.picture-frame-right-label {
  position: absolute;
  width: 75px;
  height: 95px;
  top: 48px;
  right: -38px;
  border: 8px solid transparent;
  z-index: 40;
  cursor: pointer;
}

input[id="picture-frame-right-checkbox"]:checked ~ .wall > .picture-frame-right {
  animation: picture-frame-right-anim 1s;
}

@keyframes picture-frame-right-anim {
  25% {
    transform: rotate(-10deg);
  }
  75% {
    transform: rotate(5deg);
  }
}

.picture-frame-right::before {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  border: 1.5px solid #333;
  background-color: #333;
  border-radius: 50%;
  left: -3px;
  right: 0;
  top: 32px;
  margin: auto;
  z-index: 5;
}

.picture-frame-right::after {
  content: "";
  position: absolute;
  width: 30px;
  border: 1.5px dotted #333;
  left: 0;
  right: 0;
  bottom: 15px;
  margin: auto;
  z-index: 5;
}

.picture-frame-right .petals {
  content: "";
  position: absolute;
  width: 1px;
  height: 1px;
  border: 1.5px solid #333;
  border-radius: 50%;
  left: -3px;
  right: 0;
  top: 37px;
  margin: auto;
  z-index: 4;
}

.picture-frame-right .petals::before {
  content: "";
  position: absolute;
  width: 17px;
  height: 17px;
  border: 1.5px solid #333;
  border-top-left-radius: 90px;
  border-bottom-right-radius: 90px;
  transform: rotate(-45deg);
  top: -25px;
  left: -9px;
  z-index: 4;
}

.picture-frame-right .petals::after {
  content: "";
  position: absolute;
  width: 17px;
  height: 17px;
  border: 1.5px solid #333;
  border-top-left-radius: 90px;
  border-bottom-right-radius: 90px;
  transform: rotate(-45deg);
  bottom: -25px;
  left: -9px;
  z-index: 4;
}

.picture-frame-right .petals:nth-child(2) {
  transform: rotate(90deg);
}

.picture-frame-right .petals:nth-child(3) {
  transform: rotate(45deg);
}

.picture-frame-right .petals:nth-child(4) {
  transform: rotate(135deg);
}

.background-furniture {
  position: absolute;
  width: 100%;
  height: 190px;
  top: 252px;
  z-index: 8;
}

.chair {
  position: absolute;
  width: 175px;
  height: 156px;
  background-color: #673b11;
  border-radius: 50%;
  border: 3px solid #412817;
  left: -2px;
  z-index: 8;
}

.chair-legs {
  position: absolute;
  width: 13px;
  height: 50px;
  background-color: #673b11;
  bottom: 0;
  left: 30px;
  z-index: 7;
}

.chair-legs::before {
  content: "";
  position: absolute;
  width: 13px;
  height: 50px;
  background-color: #673b11;
  bottom: 0;
  left: 99px;
  z-index: 7;
}

.back-pillow {
  position: absolute;
  width: 87px;
  height: 110px;
  background-color: #f1906e;
  top: 20px;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 20px 20px 15px 15px;
  z-index: 9;
}

.armrests {
  position: absolute;
  width: 23px;
  height: 53px;
  background-color: #f7eedf;
  border: 3px solid #412817;
  border-radius: 0 100px 0 100px;
  left: 4px;
  top: 60px;
  z-index: 10;
}

.armrests::before {
  content: "";
  position: absolute;
  width: 23px;
  height: 53px;
  background-color: #f7eedf;
  border: 3px solid #412817;
  border-radius: 100px 0 100px 0;
  left: 132px;
  top: -3px;
  z-index: 10;
}

.pillow-one {
  position: absolute;
  width: 70px;
  height: 47px;
  background-color: #f8c172;
  border-radius: 10px;
  top: 66px;
  left: 20px;
  transform: rotate(-13deg);
  z-index: 12;
}

.corner-pillow {
  position: absolute;
  width: 10px;
  height: 4px;
  border-radius: 50px;
  transform: rotate(45deg);
  z-index: 13;
}

.corner-pillow::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 4px;
  border-radius: 50px;
  transform: rotate(85deg);
  z-index: 13;
}

.pillow-one .corner-pillow,
.pillow-one .corner-pillow::before {
  background-color: #f1906e;
}

.pillow-one .corner-pillow:nth-child(1) {
  top: 8px;
  left: 9px;
}

.pillow-one .corner-pillow:nth-child(2) {
  top: 8px;
  right: 6px;
}

.pillow-one .corner-pillow:nth-child(3) {
  bottom: 8px;
  left: 9px;
}

.pillow-one .corner-pillow:nth-child(4) {
  bottom: 8px;
  right: 6px;
}

.pillow-two {
  position: absolute;
  width: 74px;
  height: 78px;
  background-color: #cb66a3;
  border-radius: 10px;
  top: 37px;
  right: 27px;
  transform: rotate(8deg);
  z-index: 10;
}

.corner-pillow {
  position: absolute;
  width: 10px;
  height: 4px;
  border-radius: 50px;
  transform: rotate(45deg);
  z-index: 11;
}

.corner-pillow::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 4px;
  border-radius: 50px;
  transform: rotate(85deg);
  z-index: 11;
}

.pillow-two .corner-pillow,
.pillow-two .corner-pillow::before{
  background-color: #8d7ea2;
}

.pillow-two .corner-pillow:nth-child(1) {
  top: 10px;
  left: 6px;
}

.pillow-two .corner-pillow:nth-child(2) {
  top: 8px;
  right: 6px;
}

.pillow-two .corner-pillow:nth-child(3) {
  bottom: 10px;
  left: 6px;
}

.pillow-two .corner-pillow:nth-child(4) {
  bottom: 8px;
  right: 6px;
}

.table {
  position: absolute;
  width: 120px;
  height: 42px;
  background-color: #936037;
  border-bottom: 11px solid #673b11;
  top: 45px;
  right: 0;
  z-index: 11;
}

.table::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #f8c172;
  bottom: -1px;
  left: 0;
}

.table::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 2px;
  background-color: #f8c172;
  bottom: -1px;
  left: 60px;
}

.table-leg {
  position: absolute;
  width: 19px;
  height: 100px;
  background-color: #673b11;
  bottom: 0;
  right: 101px;
  z-index: 10;
}

.table .pot {
  top: -5px;
  left: 19px;
  background-image: 
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 50%,
      #393939 50%,
      #393939 80%,
      transparent 80%,
      transparent 100%
    );
}

.table .hem {
  top: 10px;
  left: 19px;
}

.christmas-tree {
  position: absolute;
  width: 100px;
  height: 120px;
  bottom: 20px;
  left: 20px;
}

.christmas-tree .branches {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  background-image: 
    linear-gradient(
      120deg,
      transparent 0%,
      transparent 35%,
      #333 0px,
      #333 13px,
      transparent 37%,
      transparent 100%
    ),
    linear-gradient(
      135deg,
      #27ae61 0%,
      #27ae61 50%,
      transparent 50%,
      transparent 100%
    );
  transform: rotate(45deg);
  box-shadow: -2px -2px 3px 0 #27ae61;
  z-index: 10;
}

.christmas-tree .branches:nth-child(1) {
  width: 85px;
  height: 85px;
  bottom: -25px;
}

.christmas-tree .branches:nth-child(2) {
  width: 70px;
  height: 70px;
  bottom: 12px;
}

.christmas-tree .branches:nth-child(3) {
  width: 55px;
  height: 55px;
  bottom: 45px;
}

.christmas-tree .branches:nth-child(4) {
  width: 40px;
  height: 40px;
  bottom: 75px;
}

.christmas-tree .branches:nth-child(5) {
  width: 30px;
  height: 30px;
  bottom: 97px;
}

.trunk {
  position: absolute;
  width: 20px;
  height: 20px;
  left: 20px;
  right: 0;
  margin: auto;
  background-color: #412817;
}

.rudolph {
  position: absolute;
  width: 150px;
  height: 405px;
  bottom: 80px;
  left: 204px;
  z-index: 15;
}

.rudolph .body {
  position: absolute;
  width: 90px;
  height: 155px;
  background-color: #f7a630;
  border-radius: 40px;
  bottom: 90px;
  transform-origin: 50% 70%;
  transform: rotate(10deg);
  animation: rudolph-body-anim 1.45s infinite;
  z-index: 14;
}

@keyframes rudolph-body-anim {
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(10deg);
  }
  75% {
    transform: rotate(5deg);
  }
}

.rudolph [class^="hand-"],
.rudolph .forearm {
  position: absolute;
  width: 37px;
  height: 90px;
  background-color: #f7a630;
  border-radius: 50px;
  transform-origin: 50% 90%;
  z-index: 17;
}

.rudolph .forearm {
  border-radius: 0 0 50px 50px;
  height: 60px;
  top: -40%;
  z-index: 16;
}

.rudolph .forearm::before {
  content: "";
  position: absolute;
  width: 33px;
  height: 30px;
  background-color: #673b11;
  border-radius: 6px 6px 0 0;
  left: 0;
  right: 0;
  margin: auto;
  top: -28px;
  z-index: 15;
}

.rudolph .forearm::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 8px;
  background-color: #f7a630;
  border-radius: 6px 6px 0 0;
  left: 0;
  right: 0;
  margin: auto;
  top: -28px;
  z-index: 15;
}

.rudolph .hand-left {
  left: -8px;
  bottom: 118px;
  transform: rotate(90deg);
  animation: rudolph-hand-left-anim 2.7s infinite cubic-bezier(.43,0,1,.61);
  animation-delay: .05s;
  z-index: 19;
}

@keyframes rudolph-hand-left-anim  {
  25% {
    transform: rotate(20deg);
  }
  35% {
    transform: rotate(20deg);
  }
  50% {
    transform: rotate(90deg);
  }
  75% {Rudolph
    transform: rotate(20deg);
  }
  85% {
    transform: rotate(20deg);
  }
}

.rudolph .hand-left .forearm {
  transform: rotate(0deg);
  animation: rudolph-hand-left-forearm-anim 1.35s infinite cubic-bezier(.43,0,1,.61);
}

@keyframes rudolph-hand-left-forearm-anim  {
  50% {
    transform: rotate(-60deg);
  }
}

.rudolph .hand-right {
  left: 50px;
  bottom: 126px;
  transform: rotate(90deg);
  animation: rudolph-hand-right-anim 2.7s infinite cubic-bezier(.43,0,1,.61);
  animation-delay: .675s;
  z-index: 15;
}

@keyframes rudolph-hand-right-anim  {
  25% {
    transform: rotate(20deg);
  }
  35% {
    transform: rotate(20deg);
  }
  50% {
    transform: rotate(90deg);
  }
  75% {
    transform: rotate(20deg);
  }
  85% {
    transform: rotate(20deg);
  }
}

.rudolph .hand-right .forearm {
  transform: rotate(0deg);
  animation: rudolph-hand-right-forearm-anim 1.35s infinite cubic-bezier(.43,0,1,.61);
  animation-delay: .675s;
}

@keyframes rudolph-hand-right-forearm-anim  {
  50% {
    transform: rotate(-70deg);
  }
}

.rudolph .neck {
  position: absolute;
  width: 37px;
  height: 90px;
  background-color: #f7a630;
  border-radius: 50px;
  transform-origin: 50% 90%;
  transform: rotate(8deg);
  z-index: 17;
  top: -70px;
  left: 27px;
  animation: neck-anim .8s infinite;
}

@keyframes neck-anim {
  50% {
    transform: rotate(-2deg);
  }
}

.rudolph .head {
  position: absolute;
  width: 100px;
  height: 36px;
  top: -24px;
  left: -18px;
  right: 0;
  margin: auto;
  background-color: #f7a630;
  border-radius: 0 0 50px 20px;
  transform: rotate(-18deg);
  z-index: 18;
}

.rudolph .head::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  top: 2px;
  left: 18px;
  margin: auto;
  border-radius: 50%;
  border: 3px solid;
  border-color: transparent #000 #000 transparent;
  transform: rotate(45deg);
}

.rudolph .head::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 10px;
  bottom: -1px;
  right: 42px;
  margin: auto;
  border-radius: 50%;
  border: 3px solid;
  border-color: transparent  transparent #e76234 transparent;
  transform: rotate(20deg);
}

.rudolph .ear {
  position: absolute;
  width: 25px;
  height: 18px;
  top: 0;
  left: -24px;
  background-color: #f7a630;
  border-radius: 0 0 0 15px;
}

.rudolph .nose {
  position: absolute;
  width: 24px;
  height: 24px;
  top: -12px;
  right: -10px;
  background-color: #e4023b;
  border-radius: 50%;
}

.rudolph .nose::before {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-radius: 50%;
  border: 2px solid;
  border-color: transparent #fff transparent transparent;
  transform: rotate(-45deg);
}

.rudolph .belly {
  position: absolute;
  width: 55px;
  height: 55px;
  background-color: #fff;
  border-radius: 50%;
  bottom: 20px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 20;
}

.belly-label {
  position: absolute;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  bottom: 190px;
  left: 223px;
  cursor: pointer;
  z-index: 85;
}

input[id="belly-checkbox"]:checked ~ .rudolph .body .neck > .head > .nose {
  box-shadow: 0 0 30px 6px rgba(255, 0, 0, .6);
  animation: nose-anim 1.2s infinite;
}

@keyframes nose-anim {
  50% {
    box-shadow: 0 0 30px 20px rgba(255, 0, 0, .6);
  }
}

.rudolph .horns:nth-child(3) {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 10px solid;
  border-color: #673b11 transparent transparent #673b11;
  border-radius: 15px 0 0 0;
  z-index: 17;
  top: -44px;
  left: 12px;
  transform: rotate(-18deg);
}

.rudolph .horns:nth-child(3)::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 10px solid;
  border-color: #673b11 #673b11 transparent transparent;
  border-radius: 0 15px 0 0;
  z-index: 17;
  top: -9px;
  left: -55px;
}

.rudolph .horns:nth-child(4) {
  position: absolute;
  width: 10px;
  height: 20px;
  background-color: #673b11;
  border-radius: 50px;
  z-index: 17;
  top: -58px;
  left: 32px;
  transform: rotate(-18deg);
}

.rudolph .horns:nth-child(4)::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 20px;
  background-color: #673b11;
  border-radius: 50px;
  z-index: 17;
  left: -69px;
}

.rudolph .horns:nth-child(5) {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 10px solid;
  border-color: transparent #673b11 #673b11 transparent;
  border-radius: 0 0 15px 0;
  z-index: 17;
  top: -74px;
  left: 12px;
  transform: rotate(-18deg);
}

.rudolph .horns:nth-child(5)::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 10px solid;
  border-color: transparent transparent #673b11 #673b11;
  border-radius: 0 0 0 15px;
  z-index: 17;
  top: -9px;
  left: -75px;
}

.rudolph .horns:nth-child(6) {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 10px solid;
  border-color: #673b11 transparent transparent #673b11;
  border-radius: 15px 0 0 0;
  z-index: 17;
  top: -83px;
  left: 40px;
  transform: rotate(-18deg);
}

.rudolph .horns:nth-child(6)::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 10px solid;
  border-color: #673b11 #673b11 transparent transparent;
  border-radius: 0 15px 0 0;
  z-index: 17;
  top: -9px;
  left: -133px;
}

.rudolph .horns:nth-child(7) {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 10px solid;
  border-color: transparent #673b11 #673b11 transparent;
  border-radius: 0 0 15px 0;
  z-index: 17;
  top: -110px;
  left: 31px;
  transform: rotate(-18deg);
}

.rudolph .horns:nth-child(7)::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 10px solid;
  border-color: transparent transparent #673b11 #673b11;
  border-radius: 0 0 0 15px;
  z-index: 17;
  top: -9px;
  left: -133px;
}

.rudolph .horns:nth-child(8) {
  position: absolute;
  width: 10px;
  height: 20px;
  background-color: #673b11;
  border-radius: 50px;
  z-index: 17;
  top: -120px;
  left: 55px;
  transform: rotate(-18deg);
}

.rudolph .horns:nth-child(8)::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 20px;
  background-color: #673b11;
  border-radius: 50px;
  z-index: 17;
  left: -153px;
}

.rudolph [class^="feet-"] {
  position: absolute;
  width: 12px;
  height: 60px;
  background-color: #f4a32f;
  bottom: 50px;
  z-index: 16;
}

.rudolph [class^="feet-"]::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 40px;
  background-color: #f4a32f;
  bottom: -38px;
  transform-origin: 50% 10%;
  z-index: 17;
}

.rudolph .feet-left {
  transform: rotate(3deg);
  left: 52px;
}

.rudolph .feet-left::before {
  transform: rotate(15deg);
  left: -1px;
}

.rudolph .feet-right {
  transform: rotate(6deg);
  left: 8px;
}

.rudolph .feet-right::before {
  transform: rotate(10deg);
  left: -1px;
  bottom: -36px;
}

.rudolph .foot {
  position: absolute;
  width: 34px;
  height: 12px;
  background-color: #693d12;
  border-radius: 50px;
  left: -7px;
  bottom: -50px;
  transform: rotate(0deg);
  z-index: 15;
}

.rudolph .foot::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 25px;
  background-color: #693d12;
  border-radius: 50px;
  top: -13px;
  left: 0;
  transform: rotate(10deg);
}

.rudolph .feet-left .foot {
  left: -9px;
}

.people {
  position: absolute;
  width: 230px;
  height: 100px;
  bottom: 210px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 18;
}

.people .body {
  position: absolute;
  width: 140px;
  height: 80px;
  background-color: #eabcac;
  border-radius: 35%;
  top: 32px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 18;
}

.people .body::before {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #eabcac;
  border-radius: 50%;
  top: 10px;
  left: -160px;
  right: 0;
  margin: auto;
  transform: translateY(10px);
  animation: body-anim 1.35s infinite cubic-bezier(0,.74,0,1);
  z-index: 18;
}

.people .body::after {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #eabcac;
  border-radius: 50%;
  top: 10px;
  left: 0;
  right: -160px;
  margin: auto;
  transform: translateY(10px);
  animation: body-anim 1.35s infinite cubic-bezier(0,.74,0,1);
  z-index: 18;
}

@keyframes body-anim {
  10% {
    transform: translateY(-4px);
  }
  20% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(10px);
  }
  60% {
    transform: translateY(-4px);
  }
  70% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(10px);
  }
}

.people .head {
  position: absolute;
  width: 100px;
  height: 100px;
  top: -20px;
  left: 0;
  right: 0;
  margin: auto;
  animation: face-anim 1.35s infinite cubic-bezier(0,.74,0,1);
  transform: translateY(35px) rotate(0deg);
  z-index: 19;
}

@keyframes face-anim {
  10% {
    transform: translateY(35px) rotate(0deg);
  }
  20% {
    transform: translateY(-5px) rotate(-20deg);
  }
  25% {
    transform: translateY(30px) rotate(-20deg);
  }
  30% {
    transform: translateY(35px) rotate(0deg);
  }
  50% {
    transform: translateY(35px) rotate(0deg);
  }
  60% {
    transform: translateY(35px) rotate(0deg);
  }
  70% {
    transform: translateY(-5px) rotate(20deg);
  }
  75% {
    transform: translateY(30px) rotate(20deg);
  }
  80% {
    transform: translateY(35px) rotate(0deg);
  }
  100% {
    transform: translateY(35px) rotate(0deg);
  }
}

.people .hair {
  position: absolute;
  width: 22px;
  height: 59px;
  background-color: #946137;
  border-radius: 50px;
  box-shadow: 
    16px 0 0 0 #946137, 
    33px 0 0 0 #946137,
    50px 0 0 0 #946137;
  top: 14px;
  left: 14px;
  z-index: 19;
}

.people .face {
  position: absolute;
  width: 9px;
  height: 12px;
  background-color: #dc8678;
  border-radius: 50px;
  bottom: 11px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 19;
}

.people .face::before {
  content: "";
  position: absolute;
  width: 7px;
  height: 3px;
  background-color: #000;
  border-radius: 50%;
  top: -1px;
  left: -30px;
  right: 0;
  margin: auto;
  z-index: 19;
}

.people .face::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 3px;
  background-color: #000;
  border-radius: 50%;
  top: -1px;
  left: 0;
  right: -30px;
  margin: auto;
  z-index: 19;
}

.people ~ .leg-left {
  position: absolute;
  width: 25px;
  height: 70px;
  background-color: #eabcac;
  border-radius: 10px;
  top: 300px;
  left: -95px;
  right: 0;
  margin: auto;
  transform: rotate(-10deg) translateY(40px);
  animation: leg-left-anim 1.35s infinite cubic-bezier(0,.74,0,1);
  z-index: 2;
}

@keyframes leg-left-anim {
  10% {
    transform: rotate(-10deg) translateY(40px);
  }
  20% {
    transform: rotate(-10deg) translateY(-20px);
  }
  50% {
    transform: rotate(-10deg) translateY(40px);
  }
  60% {
    transform: rotate(-50deg) translateY(40px);
  }
  70% {
    transform: rotate(-50deg) translateY(-20px);
  }
  100% {
    transform: rotate(-10deg) translateY(40px);
  }
}

.people ~ .leg-left::before {
  content: "";
  position: absolute;
  width: 25px;
  height: 40px;
  background-color: #eabcac;
  border-radius: 10px;
  bottom: 55px;
  left: 0;
  right: 0;
  margin: auto;
  transform-origin: 50% 85%;
  transform: rotate(170deg);
  animation: leg-left-before-anim 1.35s infinite cubic-bezier(0,.74,0,1);
  z-index: 2;
}

@keyframes leg-left-before-anim {
  17% {
    transform: rotate(30deg);
  }
  18% {
    transform: rotate(30deg);
  }
  50% {
    transform: rotate(170deg);
  }
  67% {
    transform: rotate(10deg);
  }
  68% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(170deg);
  }
}

.people ~ .leg-right {
  position: absolute;
  width: 25px;
  height: 70px;
  background-color: #eabcac;
  border-radius: 10px;
  top: 300px;
  left: 0;
  right: -95px;
  margin: auto;
  transform: rotate(10deg) translateY(40px);
  animation: leg-right-anim 1.35s infinite cubic-bezier(0,.74,0,1);
  z-index: 2;
}

@keyframes leg-right-anim {
  10% {
    transform: rotate(10deg) translateY(40px);
  }
  20% {
    transform: rotate(10deg) translateY(-20px);
  }
  50% {
    transform: rotate(10deg) translateY(40px);
  }
  60% {
    transform: rotate(50deg) translateY(40px);
  }
  70% {
    transform: rotate(50deg) translateY(-20px);
  }
  100% {
    transform: rotate(10deg) translateY(40px);
  }
}

.people ~ .leg-right::before {
  content: "";
  position: absolute;
  width: 25px;
  height: 40px;
  background-color: #eabcac;
  border-radius: 10px;
  bottom: 55px;
  left: 0;
  right: 0;
  margin: auto;
  transform-origin: 50% 85%;
  transform: rotate(-170deg);
  animation: leg-right-before-anim 1.35s infinite cubic-bezier(0,.74,0,1);
  z-index: 2;
}

@keyframes leg-right-before-anim {
  17% {
    transform: rotate(-30deg);
  }
  18% {
    transform: rotate(-30deg);
  }
  50% {
    transform: rotate(-170deg);
  }
  67% {
    transform: rotate(-10deg);
  }
  68% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(-170deg);
  }
}

.massage-table {
  position: absolute;
  width: 230px;
  height: 145px;
  background-color: #fff;
  border-radius: 10px 10px 0 0;
  bottom: 86px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 20;
}

.massage-table::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 20px;
  bottom: -10px;
  background: radial-gradient(circle, #fff 70%, rgba(0, 0, 0, 0) 75%) repeat;
  background-size: 15px 20px;
  z-index: 20;
}

.massage-table::after {
  content: "";
  position: absolute;
  width: 80%;
  height: 2px;
  background-color: #f8c172;
  top: -1px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 20;
}

[class^="massage-table-leg-"] {
  position: absolute;
  width: 22px;
  height: 80px;
  background-color: #936037;
  bottom:53px;
  margin: auto;
  z-index: 19;
}

.massage-table-leg-left {
  left: -175px;
  right: 0;
}

.massage-table-leg-left::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: #f8c172;
  width: 2px;
  height: 40px;
}

.massage-table-leg-right {
  left: 0;
  right: -175px;
}

.massage-table-leg-right::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #f8c172;
  width: 2px;
  height: 40px;
}

.floor {
  position: relative;
  width: 100%;
  height: 200px;
  background-color: #412817;
  border-top: 15px solid #96623b;
}

input[type="checkbox"] {
  display: none;
}

.candles-checkbox {
  display: block;
  position: absolute;
  width: 130px;
  height: 65px;
  top: 55px;
  left: 0;
  right: 0;
  margin: auto;
  cursor: pointer;
  z-index: 31;
}

input[id="candles-checkbox"]:checked ~ .candle-one > .fire,
input[id="candles-checkbox"]:checked ~ .candle-two > .fire,
input[id="candles-checkbox"]:checked ~ .candle-three > .fire,
input[id="candles-checkbox"]:checked ~ .light {
  display: none !important;
}

input[id="candles-checkbox"]:checked ~ .wall > .shelf-one,
input[id="candles-checkbox"]:checked ~ .wall > .shelf-two {
  box-shadow: none !important;
}

input[id="candles-checkbox"]:checked ~ .shadow {
  display: block !important;
}

.fire {
  position: absolute;
  background-color: #f1906e;
  left: -1px;
  right: 0;
  margin: auto;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-top-right-radius: 50%;
  animation: fire-anim 1.1s infinite;
  transform: scaleX(.7) rotate(45deg);
}

@keyframes fire-anim {
  25% {
    transform: scaleX(.7) skewX(-15deg) skewY(15deg) rotate(50deg);
  }
  37% {
    background-color: #e3724a;
  }
  50% {
    transform: scaleX(.8) skewX(15deg) skewY(-15deg) rotate(40deg);
  }
  67% {
    background-color: #eaa812;
  }
  75% {
    transform: scaleX(.9) rotate(45deg);
  }
}

[class^="candle-"]::before {
  content: "";
  position: absolute;
  background-color: #000;
  width: 2px;
  height: 5px;
  z-index: 5;
  top: -4px;
  left: 0;
  right: 0;
  margin: auto;
}

.candle-one {
  position: absolute;
  width: 22px;
  height: 35px;
  background-color: #fff;
  top: 77px;
  left: -54px;
  right: 0;
  margin: auto;
  z-index: 4;
}

.candle-one .fire {
  width: 13px;
  height: 13px;
  top: -12px;
}

.candle-two {
  position: absolute;
  width: 22px;
  height: 5px;
  background-color: #fff;
  top: 107px;
  left: -84px;
  right: 0;
  margin: auto;
  z-index: 4;
}

.candle-two .fire {
  width: 11px;
  height: 11px;
  top: -10px;
  animation-delay: .15s
}

.candle-three {
  position: absolute;
  width: 15px;
  height: 5px;
  background-color: #fff;
  top: 107px;
  left: 95px;
  right: 0;
  margin: auto;
  z-index: 4;
}

.candle-three .fire {
  width: 11px;
  height: 11px;
  top: -10px;
  animation-delay: .25s
}

.shadow,
.light {
  -webkit-filter: grayscale(.3) sepia(.5);
     -moz-filter: grayscale(.3) sepia(.5);
      -ms-filter: grayscale(.3) sepia(.5);
       -o-filter: grayscale(.3) sepia(.5);
          filter: grayscale(.3) sepia(.5);
  opacity: .9;
}

.light {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 30;
  background: radial-gradient(
    ellipse at 50% 40%,
    rgba(247, 238, 223, .09) 19%,
    rgba(14, 39, 72, .87) 50%,
    rgba(14, 39, 72, 1) 60%,
    rgba(14, 39, 72, 1) 100%) center;
  background-size: 90% 200%;
  animation: light-anim 1.5s infinite;
}

@keyframes light-anim {
  50% {
    background-size: 88% 198%;
  }
}

.shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 30;
  display: none;
  background-color: rgb(14, 39, 72);
}

.info {
  position: fixed;
  bottom: 30px;
  left: 30px;
  background-color: #26a69a;
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-family: 'Roboto Slab', serif;
  font-weight: 700;
  font-size: 30px;
  color: #eee;
  z-index: 40;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

[data-info-text]::before {
  content: attr(data-info-text);
  position: absolute;
  background-color: #00796b;
  color: #eee;
  white-space: nowrap ;
  padding: 5px 10px;
  border-radius: 3px;
  left: 70px;
  top: 15px;
  font-family: 'Comfortaa', cursive;
  font-weight: 400;
  font-size: 16px;
  font-style: normal;
  line-height: 20px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

[data-info-text]::after {
  content: "";
  position: absolute;
  background-color: #00796b;
  color: #eee;
  white-space: nowrap ;
  padding: 6px;
  border-radius: 3px;
  left: 65px;
  top: 24px;
  transform: rotate(45deg);
}
            
          
!
999px
Loading ..................

Console