/*.tree {width: 20em; height: 25em; background-color:oldlace;}
        .tree:before {
            content: "\1F343";
            display: block;
            position: absolute;
            color: greenyellow;
        }*/

/*
.tree:before {
    content: ""; display: block;
    position: absolute;
    width: 10em;
    height: 10em;
    color: greenyellow;
}*/

/* --------- A --------- 
.tree.autumn:before {
            content: "\1F342";
        }*/
.tree.autumn .branch:nth-child(6), .tree.spring .branch:nth-child(6) { display: none;}
/* --------- B --------- */

.branch {
    width: 5em;
    height: 5em;
    display: block;
    position: absolute;
    top: 0%;
    left: calc(50% - 5%);
    opacity: .95;
}

.branch:before {
    content: "\1F343";
    font-size: 1.5em;
    top: 25%;
    left: 25%;
    opacity: .75;
}

.branch:nth-child(3),
.branch:nth-child(5) {
    top: 7%;
    left: calc(70% - 5%);
}

.branch:nth-child(4) {
    top: 21%;
    left: calc(90% - 5%);
}

.branch:nth-child(5) {
    top: 35%;
}

.branch:nth-child(6) {
    /* center*/
    top: 42%;
}

.branch:nth-child(7) {
    top: 38%;
    left: calc(30% - 5%);
}

.branch:nth-child(8) {
    top: 33%;
    left: calc(5% - 5%);
}

.branch:nth-child(9) {
    top: 15%;
    left: calc(15% - 5%);
}

.branch:nth-child(10) {
    top: 4%;
    left: calc(30% - 5%);
}

.branch:nth-child(11) {
    /*center dot*/
    top: 12%;
    left: calc(53% - 5%);
}

.branch:nth-child(12) {
    /*center dot*/
    top: 20%;
    left: calc(70% - 5%);
}

.branch:nth-child(13) {
    /*center dot*/
    left: calc(45% - 5%);
    top: 30%;
}

.branch:nth-child(14) {
    /*center dot*/
    top: 20%;
    left: calc(25% - 5%);
}

/* --------- L --------- */

/*y = x2 and y = -0.5(X-5)^2 +10*/

.leaves,
.branch:before {
    position: absolute
}

.leaves:nth-child(1) {
    top: 0;
    left: 50%;
}

.leaves:nth-child(2) {
    top: 25%;
    left: calc(100% - 33%);
}

.leaves:nth-child(3) {
    top: 50%;
    right: 0%;
}

.leaves:nth-child(4) {
    bottom: 0%;
    left: calc(100% - 33% - 10%);
}

.leaves:nth-child(5) {
    bottom: -5%;
    left: calc(100% - 33% - 33% - 15%);
}

.leaves:nth-child(6) {
    top: 50%;
    left: 0;
}

.leaves:nth-child(7) {
    top: 10%;
    left: calc(100% - 33% - 33% - 15%);
}



/* --------- T --------- */

.tree {
    position: relative;
    width: 20em;
    height: 25em;
}


.tree > span {
    display: none;
}

.tree.autumn > [class*="branch"],
.tree.snow > [class*="snow"],
.tree.spring > [class*="branch"],
.tree.summer > [class*="branch"] {
    display: block;
}

/* --------- S --------- */

.snow {
    background-color: rgba(248, 248, 255, .25);
}

.snow:after {
    display: block;
    content: " ";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    height: calc(20em / 5);
    border-radius: 100% 50% 0 0;
    background-color: snow;
}

.snow:after,
.snowman,
.snow-fall,
.snow-fall i {
    position: absolute;
}

.snow .snowman {
    z-index: 1;
    bottom: 5%;
    right: 5%;
    font-size: calc(20em / 4);
    color: gray;
}

.snow .snow-fall {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    color: snow;
    text-shadow: 1px 1px gray;
}

.snow .snow-fall i {
    font-style: normal;
    animation-name: sky-falling;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 5s;
    left: 0;
}

.snow .snow-fall i:nth-child(2n+0),
.snow .snow-fall i:nth-child(4n+0) {
    left: calc(100% / 2);
    margin-top: 2em;
    animation-duration: 2s;
}

.snow .snow-fall i:nth-child(3n+0),
.snow .snow-fall i:nth-child(5n+0) {
    left: calc(100% / 3);
    animation-duration: 3s;

}

.snow.snow-fall i:nth-child(4n+0) {
    left: calc(100% / 4);
    margin-top: 4em;
}

.snow .snow-fall i:nth-child(5n+0) {
    left: calc(100% / 5);
    animation-duration: 5s;
}

.snow .snow-fall i:nth-child(6) {
    left: 75%
}

.snow .snow-fall i:nth-child(7) {
    left: 90%
}

:root {
    --ambrosia: #FCDBBA;
    --apricot: #FF8652;
    --aubergine: #6A2352;
    --auburn: #A12F2F;
    --asparagus: #A0C259;
    --beetroot: #7F0421;
    --blue-tack: #82BFE0;
    --bloom: #363A57;
    --blush: #D67B71;
    --bronze: #C27940;
    --bud: #94C15C;
    --burnt-orange: #FF5F00;
    --butter: #F2C94C;
    --strawberry-yogurt: #E4BCAD;
    --carmine: #9A133E;
    --chocolate: #8F5D38;
    --chestnut: #81291F;
    --clay: #7D6050;
    --conker: #6F3131;
    --coral: #EB4444;
    --dusty-purple: #7D6391;
    --dusty-pink: #E4ADAD;
    --emerald: #55B95F;
    --fern: #4F8D08;
    --forest: #2E644A;
    --fudge: #C28742;
    --grassy: #A8D363;
    --green: #62B90A;
    --hazelnut: #D08E5A;
    --ink: #292C31;
    --ivory: #F2EFE3;
    --lapis: #2B4D8D;
    --leafy: #318553;
    --lemon: #EAFC7E;
    --lime: #73D645;
    --limestone: #C9C5B5;
    --magenta: #BC2767;
    --meadow: #7A9A3E;
    --melon: #F2994A;
    --midnight: #1B3955;
    --mink: #E8C9A1;
    --mint: #C4EA70;
    --moss: #7DB21C;
    --mushroom: #EDE8D5;
    --navy: #363A57;
    --orange: #FD8A04;
    --pale-lemon: #F4FFDC;
    --spring: #FFB190;
    --pond-bottom: #264A46;
    --powder-blue: #B5D0E0;
    --powder-pink: #FBD1D1;
    --primrose: #E1F7B0;
    --purple: #A95AF3;
    --purple-slate: #545375;
    --rainforest: #25422E;
    --raspberry-jam: #3C0D2B;
    --robins-egg: #B8DEE0;
    --rouge: #CC3737;
    --royal: #4169E1;
    --ruby: #D1314B;
    --sage: #87A376;
    --sakura: #FFE4E4;
    --sea-glass: #7FD1AE;
    --sea-foam: #5D998B;
    --sea-fog: #758C92;
    --slate: #7184A5;
    --spearmint: #94E0CF;
    --spring: #5ACB65;
    --succulent: #83A944;
    --twilight: #203763;
    --vavavoom: #BF0D0D;
    --white: #FFFFFF;
    --yellow: #FFE03D;

    --trans: transparent;
    --trans05: rgba(255, 255, 255, 0.05);
    --trans1: rgba(255, 255, 255, 0.1);
    --trans2: rgba(255, 255, 255, 0.2);
    --trans4: rgba(255, 255, 255, 0.4);
}

.spring .branch, .summer .branch  {
    border-radius: 50%;

    /*background-color: var(--forest);*/
    background-image: repeating-radial-gradient( circle at 1.4em 0.49em, var(--spring), var(--spring) 0.54em, var(--trans) 0.555em, var(--trans) 2em), repeating-radial-gradient( circle at -0.4em 0.49em, var(--lime), var(--lime) 0.54em, var(--trans) 0.555em, var(--trans) 2em);
    background-size: 1em 1.25em;
    /*background-position: 0.5em 0.15em;*/
    /*https://codepen.io/lunamatic/pen/MBaXwB*/
}

.spring .branch:before,
.spring .branch:after, .summer .branch:after, .summer .branch:before {
    border-radius: 0.12em;
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
}

.spring .branch:nth-child(even){
    transform: rotate(-45deg);
}

.spring .branch:nth-child(odd) {
    transform: rotate(0deg);
}

.spring .branch:nth-child(3n+1) {
    transform: rotate(40deg);
}

/* watermellon pattern
.summer .branch {
    background: var(--forest);
    background-image: repeating-linear-gradient( 45deg, var(--spring), var(--spring) 0.2em, var(--trans) 0.2em, var(--trans) 0.4em);
    background-size: 0.2em 20em;
}
.summer .branch:before, .summer .branch:after {
    border-radius: 0.12em;
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;

}*/

.summer .branch {
    background-color: rgba(34, 139, 34, .25);
    border-radius: 50%;
}

.summer .branch:nth-child(3n+1) {
    background-color: rgba(89, 158, 35, .25);
}

@keyframes sky-falling {
    from {
        top: 0;
        opacity: 15%;
    }

    25% {
        opacity: 100%;
    }

    75% {
        opacity: 100%;
    }

    to {
        top: 75%;
        opacity: 15%;
        text-shadow: none;
    }
}