/*
-- CREDITS
-- CHRISTMAS TREE DESIGN - Based on https://www.freevector.com/free-christmas-tree-vectors-19224
-- BG GRADIENT - Manuel Pinto https://codepen.io/P1N2O/pen/pyBNzX
-- PRESENT PATTERN - Yoksel https://codepen.io/yoksel/pen/jufvg
*/

/*
-- Colors
*/

$bg-gradient-color1: #EE7752;
$bg-gradient-color2: #E73C7E;
$bg-gradient-color3: #23A6D5;
$bg-gradient-color4: #23D5AB;

$text-color: #000;

$card-container-bg-color: rgba(255, 255, 255, 0.6);
$card-container-border-color: #fff;

$snow-color: #fff;

$xmas-ball-color1-light: #fbc02d;
$xmas-ball-color1-dark: #f9a825;
$xmas-ball-color2-light: #f48fb1;
$xmas-ball-color2-dark: #f06292;
$xmas-ball-color3-light: #b39ddb;
$xmas-ball-color3-dark: #9575cd;
$xmas-ball-color4-light: #90caf9;
$xmas-ball-color4-dark: #64b5f6;
$xmas-ball-color5-light: #ffab91;
$xmas-ball-color5-dark: #ff8a65;
$xmas-ball-color6-light: #66bb6a;
$xmas-ball-color6-dark: #4caf50;

$tree-bg-color: #2e7d32;
$tree-border-color: #1b5e20;
$tree-shadow-color: rgba(27, 94, 32, .2);

$wood-bg-color: #a98274;
$wood-border-color: #795548;
$wood-shadow-color: rgba(121, 85, 72, 0.2);

$present1-color1: #4caf50;
$present1-color2: #66bb6a;
$present1-color3: #fff;
$present1-color4: #f44336;
$present2-color1: #fff;
$present2-color2: #f44336;
$present2-color3: #66bb6a;
$present-shadow-color: rgba(0, 0, 0, 0.1);

/*
-- Extends
*/

%animated-bg-gradient {
    background: linear-gradient(-45deg, $bg-gradient-color1, $bg-gradient-color2, $bg-gradient-color3, $bg-gradient-color4);
	background-size: 400% 400%;
	-webkit-animation: Gradient 15s ease infinite;
	-moz-animation: Gradient 15s ease infinite;
	animation: Gradient 15s ease infinite;
}

/*
-- Mixin Xmas-ball
*/

@mixin mix-xmas-ball($height, $width, $background-color, $border-color) {
    height: $height;
    width: $width;
    background-color: $background-color;
    border: 4px solid $border-color;
}

@mixin mix-snow-flakes($h, $v) {
    box-shadow: 
    random($h) + px random($v) + px 6px random(8) + px $snow-color,
    random($h) + px random($v) + px 6px random(8) + px $snow-color,
    random($h) + px random($v) + px 6px random(8) + px $snow-color,
    random($h) + px random($v) + px 6px random(8) + px $snow-color,
    random($h) + px random($v) + px 6px random(8) + px $snow-color,
    random($h) + px random($v) + px 6px random(8) + px $snow-color,
    random($h) + px random($v) + px 6px random(8) + px $snow-color,
    random($h) + px random($v) + px 6px random(8) + px $snow-color,
    random($h) + px random($v) + px 6px random(8) + px $snow-color,
    random($h) + px random($v) + px 6px random(8) + px $snow-color,
    random($h) + px random($v) + px 6px random(8) + px $snow-color,
    random($h) + px random($v) + px 6px random(8) + px $snow-color,
    random($h) + px random($v) + px 6px random(8) + px $snow-color,
    random($h) + px random($v) + px 6px random(8) + px $snow-color,
    random($h) + px random($v) + px 6px random(8) + px $snow-color,
    random($h) + px random($v) + px 6px random(8) + px $snow-color,
    random($h) + px random($v) + px 6px random(8) + px $snow-color,
    random($h) + px random($v) + px 6px random(8) + px $snow-color,
    random($h) + px random($v) + px 6px random(8) + px $snow-color,
    random($h) + px random($v) + px 6px random(8) + px $snow-color,
    random($h) + px random($v) + px 6px random(8) + px $snow-color,
    random($h) + px random($v) + px 6px random(8) + px $snow-color,
    random($h) + px random($v) + px 6px random(8) + px $snow-color,
    random($h) + px random($v) + px 6px random(8) + px $snow-color,
    random($h) + px random($v) + px 6px random(8) + px $snow-color,
    random($h) + px random($v) + px 6px random(8) + px $snow-color,
    random($h) + px random($v) + px 6px random(8) + px $snow-color,
    random($h) + px random($v) + px 6px random(8) + px $snow-color,
    random($h) + px random($v) + px 6px random(8) + px $snow-color,
    random($h) + px random($v) + px 6px random(8) + px $snow-color,
    ;
}

* {
    padding: 0;
    margin: 0;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: $text-color;
    @extend %animated-bg-gradient;
}

ul { list-style-type: none; }
ul li { display: inline-block; }

/*
-- Text
*/

h1 {
    font-family: 'Mountains of Christmas', cursive;
    font-size: 42px;
    line-height: 60px;
    @extend %animated-bg-gradient;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

h1::before, h1::after {
    content: '❆';
    margin: 0 10px;
}

h2 {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

h3 {
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: 300;
    font-size: 18px;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

p {
    font-family: 'Dancing Script', cursive;
    font-size: 20px;
    font-weight: 700;
}

span {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
}

/*
-- Card Styles
*/

.card-container {
    height: 675px;
    width: 675px;
    padding: 30px;
    background-color: $card-container-bg-color;
    border: 8px double $card-container-border-color;
    border-radius: 20px;
    text-align: center;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    overflow: hidden;
    position: relative;
    /*Overflow on Circle on Safari*/
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/*
-- Snow --
*/

.snow-flakes-1, .snow-flakes-2 {
    height: 5px;
    width: 5px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    z-index: 20;
    background-color: transparent;
    opacity: 1;
}

.snow-flakes-1 {
    top: 0;
    @include mix-snow-flakes(700, 700);
    -moz-animation: moveDown 15s ease infinite;
    -webkit-animation: moveDown 15s ease infinite;
    animation: moveDown 15s ease infinite;
}

.snow-flakes-2 {
    top: -700px;
    @include mix-snow-flakes(700, 700);
    -moz-animation: moveDown 13s ease infinite;
    -webkit-animation: moveDown 13s ease infinite;
    animation: moveDown 13s ease infinite;
    animation-delay: 2s;
}

/*
-- Xmas Balls
*/

.xmas-ball {
    border-radius: 50%;
    position: absolute;
    z-index: 5;
}

.ball-0, .ball-1, .ball-2, .ball-3, .ball-4, .ball-5, .ball-6, .ball-7, .ball-8, .ball-9, .ball-10 {
    -webkit-animation: Blink .5s infinite;
    -moz-animation: Blink .5s infinite; 
    animation: Blink .5s infinite; 
}

.ball-0 {
    border-radius: 50%;
    height: 50px;
    width: 50px;
    background-color: $xmas-ball-color1-light;
    border: 6px solid $xmas-ball-color1-dark;
    margin: auto;
    position: relative;
    top: 15px;
    z-index: 6;
}

.ball-1 {
    @include mix-xmas-ball(20px, 20px, $xmas-ball-color2-light, $xmas-ball-color2-dark);
    bottom: 22px;
    right: 10px;
}

.ball-2 {
    @include mix-xmas-ball(15px, 15px, $xmas-ball-color3-light, $xmas-ball-color3-dark);
    bottom: 26px;
    right: 55px;
}

.ball-3 {
    @include mix-xmas-ball(30px, 30px, $xmas-ball-color4-light, $xmas-ball-color4-dark);
    bottom: 50px;
    left: 18px;
}

.ball-4 {
    @include mix-xmas-ball(25px, 25px, $xmas-ball-color4-light, $xmas-ball-color4-dark);
    bottom: 20px;
    left: 70px;
}

.ball-5 {
    @include mix-xmas-ball(15px, 15px, $xmas-ball-color5-light, $xmas-ball-color5-dark);
    top: 6px;
    left: 0px;
}

.ball-6 {
    @include mix-xmas-ball(20px, 20px, $xmas-ball-color6-light, $xmas-ball-color6-dark);
    top: 51px;
    right: 73px;
}

.ball-7 {
    @include mix-xmas-ball(10px, 10px, $xmas-ball-color4-light, $xmas-ball-color4-dark);
    top: 18px;
    right: 90px;
}

.ball-8 {
    @include mix-xmas-ball(15px, 15px, $xmas-ball-color2-light, $xmas-ball-color2-dark);
    top: 30px;
    right: 15px;
}

.ball-9 {
    @include mix-xmas-ball(10px, 10px, $xmas-ball-color3-light, $xmas-ball-color3-dark);
    top: 8px;
    left: 30px;
}

.ball-10 {
    @include mix-xmas-ball(20px, 20px, $xmas-ball-color5-light, $xmas-ball-color5-dark);
    top: 25px;
    right: 90px;
}

/*
-- Tree Styles
*/

.tree-container {
    bottom: 12px;
    position: relative;
}

.tree-p1, .tree-p2, .tree-p3, .tree-p4 {
    text-align: center;
}

.tree-p1 li, .tree-p2 li, .tree-p3 li, .tree-p4 li {
    overflow: hidden;
}

.tree-p1 li:first-child, .tree-p2 li:first-child, .tree-p3 li:first-child, .tree-p4 li:first-child {
    position: relative;
    left: 5px;
}

.tree-p1 li:nth-child(2), .tree-p2 li:nth-child(2), .tree-p3 li:nth-child(2), .tree-p4 li:nth-child(2) {
    position: relative;
    right: 5px;
}

.tree-left-branch, .tree-right-branch {
    background-color: $tree-bg-color;
    position: relative;
}

.tree-left-branch {
    transform: skew(-30deg);
    left: 60px;
    border-bottom: 10px solid $tree-border-color;
    border-left: 10px solid $tree-border-color;
    border-bottom-left-radius: 25px;
}

.tree-right-branch {
    transform: skew(30deg);
    right: 60px;
    border-bottom: 10px solid $tree-border-color;
    border-right: 10px solid $tree-border-color;
    border-bottom-right-radius: 25px;
}

.tree-right-branch::after {
    content: '';
    position: absolute;
    height: 100%;
    z-index: 10;
    background-color: $tree-shadow-color;
    right: 0;
    border-bottom-right-radius: 15px;
}

.tree-right-branch:first-child::after {
    width: 15px;
}

.tree-right-branch:nth-child(2)::after {
    width: 20px;
}

.tree-right-branch:nth-child(3)::after {
    width: 25px;
}

.tree-right-branch.stubborn::after {
    width: 30px;
}

/*
-- Tree Part 1 Sizes
*/

.tree-p1 .tree-left-branch, .tree-p1 .tree-right-branch {
    width: 100px;
    height: 110px;
} 

.tree-p1 ul {
    height: 110px + 9px;
}

/*
-- Tree Part 2 Sizes
*/

.tree-p2 .tree-left-branch, .tree-p2 .tree-right-branch {
    width: 140px;
    height: 95px;
} 

.tree-p2 ul {
    height: 95px + 9px;
}

/*
-- Tree Part 3 Sizes
*/

.tree-p3 {
    z-index: 1;
}

.tree-p3 .tree-left-branch, .tree-p3 .tree-right-branch {
    width: 175px;
    height: 95px;
} 

.tree-p3 ul {
    height: 95px + 9px;
}

/*
-- Tree Part 4 Sizes
*/

.tree-p4 {
    z-index: 2;
    position: relative;
}

.tree-p4 .tree-left-branch, .tree-p4 .tree-right-branch {
    width: 200px;
    height: 65px;
}

.tree-p4 ul {
    height: 65px + 10px;
}

/*
-- Tree Wood Styles
*/

.wood {
    height: 70px;
    width: 55px;
    background-color: $wood-bg-color;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    margin: auto;
    border-left: 10px solid $wood-border-color;
    border-bottom: 10px solid $wood-border-color;
    border-right: 10px solid $wood-border-color;
    position: relative;
}

.wood::before {
    content: '';
    position: absolute;
    height: 100%;
    z-index: 1;
    background-color: $wood-shadow-color;
    width: 25px;
    right: 0;
}

/*
-- Present Styles 1
*/

.present-container-1 {
    position: absolute;
    z-index: 1;
    right: 105px;
    bottom: 30px;
}

.present-container-1 .tie {
    width: 20px;
    height: 20px;
    background-color: $present1-color1;
    border-radius: 50%;
    margin: auto;
    position: relative;
    top: 10px;
    z-index: 1;
}

.present-container-1 .tie::before {
    content: '';
    width: 15px;
    height: 15px;
    background-color: transparent;
    border: 5px solid $present1-color1;
    border-radius: 50%;
    position: absolute;
    right: 10px;
    bottom: 0px;
}

.present-container-1 .tie::after {
    content: '';
    width: 15px;
    height: 15px;
    background-color: transparent;
    border: 5px solid $present1-color1;
    border-radius: 50%;
    position: absolute;
    bottom: 0px;
    left: 10px;
}

.present-container-1 .lid {
    width: 120px;
    height: 35px;
    border-radius: 6px;
    z-index: 2;
    position: relative;
    background: radial-gradient(circle, $present1-color1 0.25em, rgba(255, 255, 255, 0) 0.25em, rgba(255, 255, 255, 0) 0.5em, rgba(102, 187, 106, 0.7) 0.5em, rgba(102, 187, 106, 0.7) 0.6em, rgba(255, 255, 255, 0) 0.6em) 0 0, radial-gradient(circle, $present1-color2 0.25em, rgba(255, 255, 255, 0) 0.25em, rgba(255, 255, 255, 0) 0.5em, rgba(76, 175, 80, 0.7) 0.5em, rgba(76, 175, 80, 0.7) 0.6em, rgba(255, 255, 255, 0) 0.6em) 1em 1em, radial-gradient(circle, rgba(76, 175, 80, 0.7) 0.125em, rgba(255, 255, 255, 0) 0.125em) 1em 0, radial-gradient(circle, rgba(102, 187, 106, 0.7) 0.1em, rgba(255, 255, 255, 0) 0.1em) 0 1em;
    background-color: $present1-color3;
    background-size: 2em 2em;
    background-repeat: repeat;
}

.present-container-1 .lid::after {
    content: '';
    width: 100px;
    height: 6px;
    background-color: $present-shadow-color;
    position: absolute;
    left: 10px;
    bottom: -6px;
}

.present-container-1 .box {
    width: 100px;
    height: 70px;
    background-color: $present1-color4;
    margin: auto;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/*
-- Present Styles 2
*/

.present-container-2 {
    position: absolute;
    right: 146px;
    bottom: 0px;
    z-index: 3;
}

.present-container-2 .tie {
    width: 20px;
    height: 20px;
    background-color: $present2-color1;
    border-radius: 50%;
    margin: auto;
    position: relative;
    top: 10px;
    z-index: 1;
}

.present-container-2 .tie::before {
    content: '';
    width: 15px;
    height: 15px;
    background-color: transparent;
    border: 5px solid $present2-color1;
    border-radius: 50%;
    position: absolute;
    right: 10px;
    bottom: 0px;
}

.present-container-2 .tie::after {
    content: '';
    width: 15px;
    height: 15px;
    background-color: transparent;
    border: 5px solid $present2-color1;
    border-radius: 50%;
    position: absolute;
    bottom: 0px;
    left: 10px;
}

.present-container-2 .lid {
    width: 160px;
    height: 30px;
    background-color: $present2-color2;
    border-radius: 6px;
    z-index: 2;
    position: relative;
}

.present-container-2 .lid::after {
    content: '';
    width: 140px;
    height: 6px;
    background-color: $present-shadow-color;
    position: absolute;
    left: 10px;
    bottom: -6px;
}

.present-container-2 .box {
    width: 140px;
    height: 60px;
    margin: auto;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    overflow: hidden;
    box-shadow: 8px -20px 50px 5px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, $present2-color2 0.3em, rgba(232, 58, 37, 0) 0.3em) 0 1em, linear-gradient(-135deg, $present2-color2 0.3em, rgba(232, 58, 37, 0) 0.3em) 0 1em, radial-gradient(circle at 1.79em 1.85em, $present2-color2 0.255em, rgba(232, 58, 37, 0) 0.261em) 0 -1em, radial-gradient(circle at 0.21em 1.85em, $present2-color2 0.255em, rgba(232, 58, 37, 0) 0.261em) 0 -1em, linear-gradient(135deg, $present2-color3 0.3em, rgba(152, 204, 150, 0) 0.3em) 1em 0, linear-gradient(-135deg, $present2-color3 0.3em, rgba(152, 204, 150, 0) 0.3em) 1em 0, radial-gradient(circle at 1.79em 1.85em, $present2-color3 0.255em, rgba(152, 204, 150, 0) 0.261em) 1em 0, radial-gradient(circle at 0.21em 1.85em, $present2-color3 0.255em, rgba(152, 204, 150, 0) 0.261em) 1em 0;
    background-size: 2em 2em;
    background-color: $present2-color1;
    background-repeat: repeat;
}

/*
-- Blink Xmas Balls
*/

@-webkit-keyframes Blink {
    50% { 
        filter: brightness(130%); 
    }
}
@-moz-keyframes Blink {
    50% { 
        filter: brightness(130%); 
    }
}
@keyframes Blink {
    50% { 
        filter: brightness(130%); 
    }
}

/*
-- Change Background Gradient
*/

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/*
-- Snow Fall
*/

@-webkit-keyframes moveDown {
	0% {
        -webkit-transform: translateY(-50em);
        opacity: 1;
    }  
    25% {
        opacity: 0.8;
    }
    50% {
        @include mix-snow-flakes(700, 700);
        opacity: 0.6;
    }
    75% {
        opacity: 0.3;
    }
    100% {
        -webkit-transform: translateY(50em);
        opacity: 0.1;
    }
}

@-moz-keyframes moveDown {
	0% {
        -moz-transform: translateY(-50em);
        opacity: 1;
    }  
    25% {
        opacity: 0.8;
    }
    50% {
        @include mix-snow-flakes(700, 700);
        opacity: 0.6;
    }
    75% {
        opacity: 0.3;
    }
    100% {
        -moz-transform: translateY(50em);
        opacity: 0.1;
    }
}

@keyframes moveDown {
    0% {
        transform: translateY(-50em);
        opacity: 1;
    }  
    25% {
        opacity: 0.8;
    }
    50% {
        @include mix-snow-flakes(700, 700);
        opacity: 0.6;
    }
    75% {
        opacity: 0.3;
    }
    100% {
        transform: translateY(50em);
        opacity: 0.1;
    }
}