/** Christmas tree
https://atuin.ru/blog/novogodnie-elki-na-css/
*/

.merry-xmas {
    margin: 0 auto 1vh auto;
    width: 40vh;
    height: 40vh;
    position: absolute;
    overflow: hidden;
    left: 6%;
    bottom: 15%;
    transform: scale(1.5);
}

[class^="tree"] {
    position: relative;
    width: 0;
    height: 0;
    border-style: solid;
    border-radius: 100%;
}

.tree1 {
    margin-left: 10vh;
    border-width: 0 10vh 7.5vh 10vh;
    border-color: transparent transparent #99c671 transparent;
    z-index: 5;
}

.tree2 {
    top: -4vh;
    margin-left: 7.5vh;
    border-width: 0 12.5vh 8.5vh 12.5vh;
    border-color: transparent transparent #68bb47 transparent;
    z-index: 4;
}

.tree3 {
    top: -8.5vh;
    margin-left: 5vh;
    border-width: 0 15vh 10vh 15vh;
    border-color: transparent transparent #42aa47 transparent;
    z-index: 3;
}

.tree4 {
    top: -14vh;
    margin-left: 2.5vh;
    border-width: 0 17.5vh 11.5vh 17.5vh;
    border-color: transparent transparent #2e9343 transparent;
    z-index: 2;
}

.tree5 {
    top: -21.5vh;
    border-width: 0 20vh 13.5vh 20vh;
    border-color: transparent transparent #247e37 transparent;
    z-index: 1;
}

.trunk {
    position: absolute;
    width: 3vh;
    height: 5vh;
    margin-left: 18.5vh;
    top: 34vh;
    background-color: #996633;
}

@keyframes roty {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

.star-container {
    position: relative;
    height: 5vh;
    width: 5vh;
    margin-left: 19.5vh;
    top: 0vh;
    z-index: 6;
    transform: rotate(35deg);
}

.star {
    margin: 5vh 0;
    position: absolute;
    width: 0vh;
    height: 0vh;
    border-style: solid;
    border-width: 0 2.5vh 1.7vh 2.5vh;
    border-color: transparent transparent #ffd105 transparent;
    animation: 1s roty infinite linear;
}

.star:before {
    position: absolute;
    height: 0;
    width: 0;
    top: 0vh;
    left: -2.5vh;
    content: '';
    border-style: solid;
    border-width: 0 2.5vh 1.7vh 2.5vh;
    border-color: transparent transparent #ffd105 transparent;
    transform: rotate(-70deg);
}

.star:after {
    position: absolute;
    height: 0;
    width: 0;
    top: -1.2vh;
    left: -1.6vh;
    content: '';
    border-style: solid;
    border-width: 0 1vh 2vh 1vh;
    border-color: transparent transparent #ffd105 transparent;
    transform: rotate(-35deg);
}

.ornament {
    position: relative;
    background: radial-gradient(#ffffff, #ffff99, #ffcc33);
    width: 3.2vh;
    height: 3.2vh;
    border-radius: 100%;
    z-index: 1;
    overflow: hidden;
}

.ornament:before {
    position: absolute;
    content: '';
    width: 2vh;
    height: 2vh;
    top: 0vh;
    left: 0vh;
    background: #fff;
    border-radius: 100%;
}

.ornament:after {
    position: absolute;
    content: '';
    width: 4.2vh;
    height: 4.2vh;
    top: -2vh;
    left: -1vh;
    border: solid 0.5vh #ffcc33;
    border-radius: 100%;
}

[class^="ornament-container"] {
    position: absolute;
    z-index: 7;
}

.ornament-container1 {
    top: 15.5vh;
    left: 12vh;
}

.ornament-container2 {
    top: 21vh;
    left: 27vh;
}

.ornament-container3 {
    top: 30vh;
    left: 10vh;
}

.ornament-container4 {
    top: 11vh;
    left: 25vh;
}

.ornament-container5 {
    top: 32vh;
    left: 31vh;
}

.ornament-container6 {
    top: 25vh;
    left: 19vh;
}

[class^="light"] {
    position: absolute;
    width: 0.5vh;
    height: 0.5vh;
    border-radius: 100%;
    transition-property: background;
    transition-duration: 1s;
    transition-timing-function: linear;
    animation: light 5s infinite;
    z-index: 6;
}

@keyframes light {
    0% {
        background: transparent;
    }

    50% {
        background: #ffffff;
    }

    100% {
        background: transparent;
    }
}

.xmas-lights {
    position: absolute;
    top: -5vh;
    left: -1.5vh;
    z-index: 6;
}

.light1 {
    top: 15vh;
    left: 18vh;
}

.light2 {
    top: 13vh;
    left: 21vh;
    animation-delay: 3s;
}

.light3 {
    top: 20vh;
    left: 15vh;
    animation-delay: 2s;
}

.light4 {
    top: 21vh;
    left: 22vh;
    animation-delay: 1s;
}

.light5 {
    top: 26vh;
    left: 18vh;
    animation-delay: 3s;
}

.light6 {
    top: 24vh;
    left: 15vh;
    animation-delay: 2s;
}

.light7 {
    top: 25vh;
    left: 27vh;
    animation-delay: 1s;
}

.light8 {
    top: 30vh;
    left: 28vh;
    animation-delay: 3s;
}

.light9 {
    top: 30vh;
    left: 20vh;
    animation-delay: 2s;
}

.light10 {
    top: 16vh;
    left: 24vh;
    animation-delay: 1s;
}

.light11 {
    top: 35vh;
    left: 18vh;
    animation-delay: 2s;
}

.light12 {
    top: 315vh;
    left: 21vh;
    animation-delay: 3s;
}

.light13 {
    top: 37vh;
    left: 12vh;
    animation-delay: 2s;
}

.light14 {
    top: 29vh;
    left: 22vh;
    animation-delay: 1s;
}

.light15 {
    top: 32vh;
    left: 15vh;
    animation-delay: 3s;
}

.light16 {
    top: 37vh;
    left: 20vh;
    animation-delay: 2s;
}

.light17 {
    top: 29vh;
    left: 22vh;
    animation-delay: 1s;
}

.light18 {
    top: 32vh;
    left: 26vh;
    animation-delay: 3s;
}

.light19 {
    top: 37vh;
    left: 30vh;
    animation-delay: 3s;
}

.light20 {
    top: 35vh;
    left: 25vh;
    animation-delay: 3s;
}

/** Forest
https://codepen.io/orangegrove1955/pen/qBOxxLN 
*/
.forest {
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    transform: translate(20%);
    position: absolute;
    right: 5%;
    bottom: -10vh;
    z-index: 10;
}

.ftree {
    height: 60vh;
    width: 19vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ftree:nth-child(1) {
    transform: translate(29vh, 8vh);
    z-index: 10;
}

.ftree:nth-child(2) {
    transform: translate(0vh, 2vh);
}

.triangle {
    width: 100%;
    height: 30%;
    background: linear-gradient(to right, green, green 50%, darkgreen 50%, darkgreen);
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

.triangle:nth-child(2) {
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    transform: translateY(-50%);
}

.triangle:nth-child(3) {
    transform: translateY(-100%);
}

.ftrunk {
    height: 25%;
    transform: translateY(-120%);
    width: 20%;
    background: linear-gradient(to right, brown, brown 50%, #654321 50%, #654321);
    ;
}

.ftreeshadow {
    background: lightgrey;
    background: radial-gradient(lightgrey, transparent);
    width: 100%;
    height: 20%;
    transform: translate(0, -17vh);
    border-radius: 50%;
}