.text{
    cursor: default;
    font-family: 'Berkshire Swash', cursive;
    font-weight: normal;
    color: turquoise;
    padding-top: 4%;
    text-shadow: 0 0.5em 0.1em #000;
    font-size: 400%;
    position: absolute;
    top: 620px;
    left:-10px;
    transform: rotate3d(1.5, 0, 1, -55deg);
    animation-name: textAnimation;
    animation-duration: 5s;
    animation-iteration-count: infinite;

}

@keyframes textAnimation
{
    0%{
        color: turquoise;
        text-shadow: 0 0.5em 0.1em #000;
    }
    25%{
        color: #0091ff;
        text-shadow: 0 0em 0.1em #000;
    }
    50%{
        color: #0037ff;
        text-shadow: 0 -0.5em 0.1em #000;
    }
    75%{
        color: #5100ff;
        text-shadow: 0 0em 0.1em #000;
    }
    


}

body{
    height: 100vh;
    background-image: linear-gradient(to bottom, #e1fffe, #e4feff, #e7fcff, #eafaff, #eef9ff, #f1f9ff, #f4f9ff, #f6f9ff, #f9faff, #fbfcff, #fdfdff, #ffffff);

}

/*.star {
    position: relative;
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .9em;
    margin-right: .9em;
    margin-bottom: 1.2em;
    border-bottom: .7em solid #FC0;
    border-right: .3em solid transparent;
    border-left: .3em solid transparent;
    font-size: 24px;
    
}

.star:before,
.star:after{
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: .6em;
    left: -1em;
    border-right: 1em;
    border-right: 1em solid transparent;
    border-bottom: .7em solid #FC0;
    border-left: 1em solid transparent;
    transform: rotate(35deg);
}

.star:after{
    transform: rotate(35deg);
}
*/

.christmasTreeTriangle{
    width: 0;
    height: 0;
    border-left: 3.3em solid transparent;
    border-right: 3.3em solid transparent;
    border-bottom: 4em solid #16750c;
    position: absolute;
    top: 600px;
    left: 50px;
}

.christmasTreeTriangle:nth-child(3) {
    margin-top: -2.3em;
    border-left-width: 4em;
    border-right-width: 4em;
    border-bottom-width: 5em;
}

.triangle1  {
    width: 0;
    height: 0;
    border-left: 4em solid transparent;
    border-right: 4em  solid transparent;
    border-bottom: 5em solid #16750c;
    position: absolute;
    top: 575px;
    left: 485px;
  }

  .triangle2{
    width: 0;
    height: 0;
    border-left: 3.3em solid transparent;
    border-right: 3.3em  solid transparent;
    border-bottom: 5em solid #16750c;
    position: absolute;
    top: 510px;
    left: 495px;
  }

  .triangle3{
    width: 0;
    height: 0;
    border-left: 4.7em solid transparent;
    border-right: 4.7em  solid transparent;
    border-bottom: 5.7em solid #16750c;
    position: absolute;
    left: 475px;
    top: 638px;
  }

  .triangleLog{
    width: 26px;
    height: 72.5px;
    background-color: #635000;
    position: absolute;
    left: 535.5px;
    top: 727px;

  }

.christmasStar1{
    width: 0;
    height: 0;
    border-left: 1.5em solid transparent;
    border-right: 1.5em solid transparent;
    border-bottom: 2em solid #ffc400;
    position: absolute;
    top: 475px;
    left: 527px;
    transform: rotate3d(0, 0, 1, 35deg);
    animation-name: christmasStarAnim1;
    animation-duration: 2s;
    animation-iteration-count: infinite;

}

.christmasStar2{
    width: 0;
    height: 0;
    border-left: 1.5em solid transparent;
    border-right: 1.5em solid transparent;
    border-top: 2em solid #ffc400;
    position: absolute;
    top: 485px;
    left: 520px;
    transform: rotate3d(0, 0, 1, 30deg);
    animation-name: christmasStarAnim2;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes christmasStarAnim1{
    0%{
       position: absolute;
       top: 475px;
       left: 527px;
       transform: rotate3d(0, 0, 1, 35deg);

    }

    25%{
        top: 462.5px;
       left: 527px;
       transform: rotate3d(0, 0, 1, 35deg);

     }

    50%{
        position: absolute;
        top: 450px;
        left: 527px;
        transform: rotate3d(0, 0, 1, 35deg);

    }

    75%{
        top: 462.5px;
       left: 527px;
       transform: rotate3d(0, 0, 1, 35deg);

     }

    100%{
        position: absolute;
       top: 475px;
       left: 527px;
       transform: rotate3d(0, 0, 1, 35deg);
    }

}

@keyframes christmasStarAnim2{
    0%{
        position: absolute;
        top: 485px;
        left: 520px;
        transform: rotate3d(0, 0, 1, 30deg);
     }
     
     25%{
        top: 472.5px;
        left: 520px;
        transform: rotate3d(0, 0, 1, 30deg);
     }

     50%{
        position: absolute;
        top: 460px;
        left: 520px;
        transform: rotate3d(0, 0, 1, 30deg);
     }

     75%{
        top: 472.5px;
        left: 520px;
        transform: rotate3d(0, 0, 1, 30deg);
     }
     

     100%{
        position: absolute;
        top: 485px;
        left: 520px;
        transform: rotate3d(0, 0, 1, 30deg);
     }
}


@-webkit-keyframes snowFlakes-fall{
    0%{
        top: -10%;
    }
    100%{
        top: 100%;
    }
}

@-webkit-keyframes snowFlakes-shake {
    0%{
        transform: translate(0px);
    }
    50%{
        transform: translate(80px);
    }
    100%{
        transform: translate(0px);
    }
}

.snowflake {
    position: fixed;
    top: -10%;
    z-index: 10;
    color: #ffffff;
    text-shadow: 0 0 1px #000;
    font-size: 1em;
    user-select: none;
    cursor: default;
    animation-name: snowFlakes-fall, snowFlakes-shake;
    animation-duration: 10s, 3s;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
    animation-play-state: running, running;
}

.snowflake:nth-of-type(0)
{   left:1%;
    -webkit-animation-delay:0s,0s;
    animation-delay:0s,0s}

.snowflake:nth-of-type(10)
{   left:5%;
    -webkit-animation-delay:7s,8s;
    animation-delay:0s,0s}

.snowflake:nth-of-type(1)
{   left:10%;
    -webkit-animation-delay:1s,1s;
    animation-delay:1s,1s}

    .snowflake:nth-of-type(11)
{   left:15%;
    -webkit-animation-delay:3s,3s;
    animation-delay:2s,3s}

.snowflake:nth-of-type(2)
{   left:20%;
    -webkit-animation-delay:6s,.5s;
    animation-delay:6s,.5s}

.snowflake:nth-of-type(12)
{   left:25%;
    -webkit-animation-delay:5s,4s;
    animation-delay:5s,4s}
    
.snowflake:nth-of-type(3)
{   left:30%;
    -webkit-animation-delay:4s,2s;
    animation-delay:4s,2s}

.snowflake:nth-of-type(13)
{   left:35%;
    -webkit-animation-delay:3s,2s;
    animation-delay:3s,2s}
    
.snowflake:nth-of-type(4){
    left:40%;
    -webkit-animation-delay:2s,2s;
    animation-delay:2s,2s}

.snowflake:nth-of-type(14)
{   left:45%;
    -webkit-animation-delay:6s,4s;
    animation-delay:6s,4s}

.snowflake:nth-of-type(5)
{   left:50%;
    -webkit-animation-delay:8s,3s;
    animation-delay:8s,3s}

.snowflake:nth-of-type(15)
{   left:55%;
    -webkit-animation-delay:5s,3s;
    animation-delay:5s,3s}
    
.snowflake:nth-of-type(6)
{   left:60%;
    -webkit-animation-delay:6s,2s;
    animation-delay:6s,2s}

.snowflake:nth-of-type(16)
{   left:65%;
    -webkit-animation-delay:4s,3s;
    animation-delay:4s,3s}
    
.snowflake:nth-of-type(7)
{   left:70%;
    -webkit-animation-delay:2.5s,1s;
    animation-delay:2.5s,1s}

.snowflake:nth-of-type(17)
{   left:75%;
    -webkit-animation-delay:2s,1.5s;
    animation-delay:2s,1.5s}
    
.snowflake:nth-of-type(8)
{   left:80%;
    -webkit-animation-delay:1s,0s;
    animation-delay:1s,0s}

.snowflake:nth-of-type(18)
{   left:85%;
    -webkit-animation-delay:1.5s,1s;
    animation-delay:1.5s,1s}
    
.snowflake:nth-of-type(9)
{   left:90%;
    -webkit-animation-delay:3s,1.5s;
    animation-delay:3s,1.5s}

.snowflake:nth-of-type(19)
{   left:95%;
    -webkit-animation-delay:7s,2s;
    animation-delay:4s,2s}