@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');
 @import url('https://fonts.googleapis.com/css?family=Dancing+Script');
 
 body {
     width: 100%;
     display: block;
     overflow: hidden;
     height: 100vh;
     background: linear-gradient(#0a171d, #000);
     font-family: 'Poppins', sans-serif;
     color: white;
 }
  
 .animation {
    position: absolute;
    width: 40vw;
    height: 80vh;
    top: 50%;
    left: 50%;
    display: block;
    overflow: hidden;
    border: 2vh solid rgba(0,0,0,.2);
    border-radius: 50%;
    z-index: -1;
    background-color: #1d4456;
    box-shadow: 0 0 10vh 1vh rgb(255 148 0 / 10%);
    transform: translate(-50%, -50%);
 }

 .wood {
     position: absolute;
     z-index: 21;
     left: 50%; 
     bottom: 12%;
     width: 5vw;
     margin-left: -2.5vw;
     height: 3.6vh;
     background-image: url('https://ivang-design.com//svg-load/air/wood.png');
     background-size: 5vw 3.6vh;
 }

 .wood-circle {
     position: absolute;
     z-index: 20;
     left: 50%; 
     bottom: 11%;
     width: 6vw;
     margin-left: -3vw;
     height: 2.6vh;
     border-radius: 100%;
     background-color: #0a171d;
 }

 .circle {
     position: absolute;
     z-index: 6;
     right: -30vw; 
     bottom: -90vh;
     width: 75vw;
     height: 150vh;
     border-radius: 100%;
     background-color: #112630;
 }

 .moon {
     position: absolute;
     top: 10vh;
     left: 12.5vw;
     width: 8vw;
     display: block;
     height: 16vh;
     background-color: #b2b7bc;
     border-radius: 50%;
     transform: translate(-50%, -50%);
     box-shadow: 
         inset -4vh 0.4vh 0 0 #c0c3c9,
         0 0 2vh 1vh rgba(228,228,222,.4);
     z-index: 1;
     animation: brilla-moon 4s alternate infinite;
 }

 .moon div:nth-child(1) {
     position: absolute;
     top: 50%;
     left: 10%;
     width: 12%;
     height: 12%;
     border-radius: 50%;
     border: 0.2vh solid #adaca2;
     border-radius: 50%;
     box-shadow: inset 0.4vh -0.2vh 0 0 #85868b;
     opacity: 0.4;
 }

 .moon div:nth-child(2) {
     position: absolute;
     top: 20%;
     left: 38%;
     width: 16%;
     height: 16%;
     border-radius: 50%;
     border: 0.2vh solid #adaca2;
     border-radius: 50%;
     box-shadow: inset 0.4vh -0.2vh 0 0 #85868b;
     opacity: 0.4;
 }

 .moon div:nth-child(3) {
     position: absolute;
     top: 60%;
     left: 45%;
     width: 20%;
     height: 20%;
     border-radius: 50%;
     border: 0.2vh solid #adaca2;
     border-radius: 50%;
     box-shadow: inset 0.4vh -0.2vh 0 0 #85868b;
     opacity: 0.4;
 }

 .moon {
     -webkit-transition: all 2000ms linear;
     transition: all 2000ms linear; 
 }

 @keyframes brilla-moon {
     0% {
     box-shadow: 
         inset -4vh 0.4vh 0 0 #c0c3c9,
         0 0 2vh 1vh rgba(228,228,222,.4);
     }
     50% {
     box-shadow:
         inset -4vh 0.4vh 0 0 #c0c3c9,
         0 0 3vh 1.6vh rgba(228,228,222,.4);
     }
 }

 .shooting-star {
     z-index: 2;
     width: 0.1vw;
     height: 10vh;
     border-bottom-left-radius: 50%;
     border-bottom-right-radius: 50%;
     position: absolute;
     top: 0;
     left: -7vw;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);
     animation: animShootingStar 6s linear infinite;
     -webkit-transition: all 2000ms linear;
     transition: all 2000ms linear; 
 }

 @keyframes animShootingStar {
     from {
         transform: translateY(0) translateX(0) rotate(-45deg);
         opacity: 1;
         height: 1vh;
     }
     to {
         transform: translateY(256vh) translateX(256vh) rotate(-45deg);
         opacity: 1;
         height: 160vh;
     }
 }

 .shooting-star-2 {
     z-index: 2;
     width: 0.1vw;
     height: 10vh;
     border-bottom-left-radius: 50%;
     border-bottom-right-radius: 50%;
     position: absolute;
     top: 0;
     left: 20vw;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);
     animation: animShootingStar-2 9s linear infinite;
     -webkit-transition: all 2000ms linear;
     transition: all 2000ms linear; 
 }

 @keyframes animShootingStar-2 {
     from {
         transform: translateY(0) translateX(0) rotate(-45deg);
         opacity: 1;
         height: 1vh;
     }
     to {
         transform: translateY(384vh) translateX(384vh) rotate(-45deg);
         opacity: 1;
         height: 160vh;
     }
 }

 .star {
     z-index: 2;
     position: absolute;
     top: 37vh;
     left: 2.5vw;
     background-image: url('https://ivang-design.com//svg-load/air/star.png');
     background-size: 1.5vw 3vh;
     width: 1.5vw;
     height: 3vh;
     opacity: 0.4;
     animation: starShine 3.5s linear infinite;
     -webkit-transition: all 1200ms linear;
     transition: all 1200ms linear; 
 }

 .star.snd {
     top: 20vh;
     left: 31vw;
     animation-delay: 1s;
 }

 .star.trd {
     top: 26vh;
     left: 10vw;
     animation-delay: 1.4s;
 }

 .star.fth {
     top: 4vh;
     left: 20vw;
     animation-delay: 1.8s;
 }

 .star.fith {
     top: 17vh;
     left: 22vw;
     animation-delay: 2.2s;
 }

 @keyframes starShine {
     0% {
         transform: scale(0.3) rotate(0deg);
         opacity: 0.4;
     }
     25% {
         transform: scale(1) rotate(360deg);
         opacity: 1;
     }
     50% {
         transform: scale(0.3) rotate(720deg);
         opacity: 0.4;
     }
     100% {
         transform: scale(0.3) rotate(0deg);
         opacity: 0.4;
     }
 }

 .tree-1 {
     position: relative;
     top: 30vh;
     left: 5vw;
     width: 0;
     height: 0;
     z-index: 8;
     display: block;
     border-bottom: 18vh solid #0a171d;
     border-left: 6vh solid transparent;
     border-right: 6vh solid transparent;
 }

 .tree-1:before {
     position: absolute;
     bottom: -22vh;
     left: 50%;
     margin-left: -0.4vw;
     width: 0.8vw;
     display: block;
     height: 6vh;
     z-index: 7;
     content: '';
     background-color: #000;
 }

 .tree-2 {
     position: relative;
     top: 0;
     left: 25vw;
     width: 0;
     height: 0;
     z-index: 8;
     display: block;
     border-bottom: 18vh solid #0a171d;
     border-left: 6vh solid transparent;
     border-right: 6vh solid transparent;
 }

 .tree-2:before {
     position: absolute;
     bottom: -22vh;
     left: 50%;
     margin-left: -0.4vw;
     width: 0.8vw;
     display: block;
     height: 6vh;
     z-index: 7;
     content: '';
     background-color: #000;
 }

 .fire {
     position: absolute;
     z-index: 39;
     width: 0.2vw;
     margin-left: -0.1vw;	
     left: 50%; 
     bottom: 14vh;
     -webkit-transition: all 1200ms linear;
     transition: all 1200ms linear; 
 }

 .fire span { 
     display: block;
     position: absolute;
     bottom: -3vh; 
     margin-left: -2vw;
     height: 0;
     width: 0;
     border: 6vh solid #febd08;
     border-radius: 50%;
     border-top-left-radius: 0;
     left: -0.9vw; 
     box-shadow: 
         0 0 2vh 0.5vw rgba(244,110,28,0.8),
         0 0 4vh 1vw rgba(244,110,28,0.6),
         0 0 6vh 1.5vw rgba(244,110,28,0.3);
     transform: scale(0.45, 0.75) rotate(45deg);
     animation: brilla-fire 2.5s alternate infinite;
     z-index: 9;
     -webkit-transition: all 1200ms linear;
     transition: all 1200ms linear; 
 }

 .fire span:after { 
     display: block;
     position: absolute;
     bottom: -6vh; 
     content: '';
     margin-left: -0.5vw;
     height: 6vh; 
     width: 1.2vw;
     background-color: rgba(244,110,28,0.7);
     border-radius: 16vh;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     box-shadow: 
         0 0 4vh 1vw rgba(244,110,28,0.7);
     left: -0.9vw; 
     opacity: 0.8;
     transform: rotate(-50deg);
 }

 .fire span:nth-child(2) { 
     left: -2.2vw; 
     transform: scale(0.3, 0.55) rotate(15deg);
     z-index: 8;
     animation: brilla-fire 1.5s alternate infinite;
 }

 .fire span:nth-child(3) { 
     left: 0.4vw; 
     transform: scale(0.3, 0.55) rotate(80deg);
     z-index: 8;
     animation: brilla-fire 2s alternate infinite;
 }

 @keyframes brilla-fire{
     0%, 100% {
     box-shadow: 
         0 0 2vh 1vh rgba(244,110,28,0.8),
         0 0 4vh 2vh rgba(244,110,28,0.6),
         0 0 6vh 3vh rgba(244,110,28,0.3);
     }
     50% {
     box-shadow: 
         0 0 2.8vh 1.4vh rgba(244,110,28,0.8),
         0 0 5.6vh 2.8vh rgba(244,110,28,0.6),
         0 0 8.4vh 4.2vh rgba(244,110,28,0.3);
     }
 }

 .smoke {
     position: absolute;
     z-index: 40;
     width: 0.2vw;
     margin-left: -0.1vw;	
     left: 50%; 
     bottom: 19vh;
     opacity: 0;
     -webkit-transition: all 800ms linear;
     transition: all 800ms linear; 
 }

 .smoke span { 
     display: block;
     position: absolute;
     bottom: -7vh; 
     left: 50%; 
     margin-left: -2vw;
     height: 0;
     width: 0;
     border: 6vh solid rgba(0, 0, 0, .6);
     border-radius: 4.4vh;
     border-bottom-left-radius: 0;
     border-top-right-radius: 0;
     left: -0.9vw; 
     opacity: 0;
     transform: scale(0.2, 0.2) rotate(-45deg);
 }

 @keyframes smokeLeft {
     0%   { transform: scale(0.2, 0.2) translate(0, 0) rotate(-45deg) }
     10%  { opacity: 1; transform: scale(0.2, 0.3) translate(0, -1vh) rotate(-45deg) }
     60%  { opacity: 0.6; transform: scale(0.3, 0.5) translate(-2vh, -16vh) rotate(-45deg) }
     100% { opacity: 0; transform: scale(0.4, 0.8) translate(-4vh, -24vh) rotate(-45deg) }
 }

 @keyframes smokeRight {
     0%   { transform: scale(0.2, 0.2) translate(0, 0) rotate(-45deg) }
     10%  { opacity: 1; transform: scale(0.2, 0.3) translate(0, -1vh) rotate(-45deg) }
     60%  { opacity: 0.6; transform: scale(0.3, 0.5) translate(2vh, -16vh) rotate(-45deg) }
     100% { opacity: 0; transform: scale(0.4, 0.8) translate(4vh, -24vh) rotate(-45deg) }
 }

 .smoke .s-0 { 
     animation: smokeLeft 7s 0s infinite 
 }

 .smoke .s-1 { 
     animation: smokeRight 7s 0.7s infinite 
 }

 .smoke .s-2 { 
     animation: smokeLeft 7s 1.4s infinite 
 }

 .smoke .s-3 { 
     animation: smokeRight 7s 2.1s infinite 
 }

 .smoke .s-4 { 
     animation: smokeLeft 7s 2.8s infinite 
 }

 .smoke .s-5 { 
     animation: smokeRight 7s 3.5s infinite 
 }

 .smoke .s-6 { 
     animation: smokeLeft 7s 4.2s infinite 
 }

 .smoke .s-7 { 
     animation: smokeRight 7s 4.9s infinite 
 }

 .smoke .s-8 { 
     animation: smokeLeft 7s 5.6s infinite 
 }

 .smoke .s-9 { 
     animation: smokeRight 7s 6.3s infinite 
 }
 
 body.fire-off .fire-on {
     opacity: 0;
 }

 .animation {
     -webkit-transition: all 500ms linear;
     transition: all 500ms linear; 
 }

 body.fire-off .animation {
     box-shadow: 0 0 10vh 1vh rgba(200,200,200,.2);
 }

 body.fire-off .smoke {
     opacity: 1;
     transition-delay: 0.8s;
 }

 body.fire-off .fire span { 
     bottom: -7vh;
     left: -0.9vw; 
     transform: scale(0.15, 0.15) rotate(45deg);
 }

 /* Custom */

div#rip {
    position: absolute;
    width: 72vh;
    height: 75vh;
    top: 50%;
    left: 50%;
    margin-left: -36vh;
    margin-top: -37.5vh;
    text-align: center;
    text-shadow: 0.2vh 0.2vh 0.2vh #000000;
    font-size: 1.7vh;
}

div#rip h1 { margin: 2vh; }

div#rip a {
    text-decoration: none;
    color: #aaa;
}

div#rip a:hover {
    color: darkorange;
}

@media screen and (max-width: 1280px) {

    .animation { display: none; }

    div#rip {
        width: 90vw;
        margin-left: -45vw;
        font-size: 1.6vh;
    }
}