@charset "UTF-8";
/*
-- 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
*/
/*
-- Extends
*/
h1, body {
    background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
    background-size: 400% 400%;
    -webkit-animation: Gradient 15s ease infinite;
    -moz-animation: Gradient 15s ease infinite;
    animation: Gradient 15s ease infinite;
}

/*
-- Mixin Xmas-ball
*/
* {
    padding: 0;
    margin: 0;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
}

ul {
    list-style-type: none;
}

ul li {
    display: inline-block;
}

/*
-- Text
*/
h1 {
    font-family: "Mountains of Christmas", cursive;
    font-size: 42px;
    line-height: 60px;
    -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: rgba(255, 255, 255, 0.6);
    border: 8px double #fff;
    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;
    box-shadow: 405px 88px 6px 4px #fff, 300px 44px 6px 3px #fff, 160px 189px 6px 6px #fff, 503px 123px 6px 6px #fff, 133px 6px 6px 8px #fff, 402px 509px 6px 8px #fff, 541px 672px 6px 2px #fff, 182px 349px 6px 4px #fff, 54px 213px 6px 2px #fff, 360px 304px 6px 1px #fff, 156px 431px 6px 8px #fff, 361px 136px 6px 3px #fff, 21px 557px 6px 7px #fff, 495px 518px 6px 3px #fff, 406px 204px 6px 4px #fff, 587px 322px 6px 5px #fff, 656px 270px 6px 2px #fff, 151px 654px 6px 5px #fff, 36px 369px 6px 4px #fff, 159px 431px 6px 7px #fff, 234px 364px 6px 7px #fff, 390px 671px 6px 6px #fff, 659px 302px 6px 1px #fff, 123px 144px 6px 5px #fff, 232px 52px 6px 4px #fff, 258px 540px 6px 4px #fff, 106px 674px 6px 1px #fff, 583px 521px 6px 1px #fff, 445px 116px 6px 2px #fff, 47px 658px 6px 2px #fff;
    -moz-animation: moveDown 15s ease infinite;
    -webkit-animation: moveDown 15s ease infinite;
    animation: moveDown 15s ease infinite;
}

.snow-flakes-2 {
    top: -700px;
    box-shadow: 362px 174px 6px 7px #fff, 608px 39px 6px 2px #fff, 254px 513px 6px 6px #fff, 476px 2px 6px 4px #fff, 610px 272px 6px 3px #fff, 97px 219px 6px 7px #fff, 593px 45px 6px 3px #fff, 190px 135px 6px 6px #fff, 20px 29px 6px 8px #fff, 454px 181px 6px 6px #fff, 14px 619px 6px 1px #fff, 183px 433px 6px 8px #fff, 613px 465px 6px 8px #fff, 168px 313px 6px 7px #fff, 335px 34px 6px 8px #fff, 228px 314px 6px 1px #fff, 460px 406px 6px 1px #fff, 684px 328px 6px 1px #fff, 485px 397px 6px 1px #fff, 316px 247px 6px 1px #fff, 345px 396px 6px 5px #fff, 323px 683px 6px 6px #fff, 429px 399px 6px 7px #fff, 55px 488px 6px 7px #fff, 246px 174px 6px 2px #fff, 165px 101px 6px 5px #fff, 232px 608px 6px 7px #fff, 641px 428px 6px 2px #fff, 83px 133px 6px 8px #fff, 290px 416px 6px 2px #fff;
    -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 0.5s infinite;
    -moz-animation: Blink 0.5s infinite;
    animation: Blink 0.5s infinite;
}

.ball-0 {
    border-radius: 50%;
    height: 50px;
    width: 50px;
    background-color: #fbc02d;
    border: 6px solid #f9a825;
    margin: auto;
    position: relative;
    top: 15px;
    z-index: 6;
}

.ball-1 {
    height: 20px;
    width: 20px;
    background-color: #f48fb1;
    border: 4px solid #f06292;
    bottom: 22px;
    right: 10px;
}

.ball-2 {
    height: 15px;
    width: 15px;
    background-color: #b39ddb;
    border: 4px solid #9575cd;
    bottom: 26px;
    right: 55px;
}

.ball-3 {
    height: 30px;
    width: 30px;
    background-color: #90caf9;
    border: 4px solid #64b5f6;
    bottom: 50px;
    left: 18px;
}

.ball-4 {
    height: 25px;
    width: 25px;
    background-color: #90caf9;
    border: 4px solid #64b5f6;
    bottom: 20px;
    left: 70px;
}

.ball-5 {
    height: 15px;
    width: 15px;
    background-color: #ffab91;
    border: 4px solid #ff8a65;
    top: 6px;
    left: 0px;
}

.ball-6 {
    height: 20px;
    width: 20px;
    background-color: #66bb6a;
    border: 4px solid #4caf50;
    top: 51px;
    right: 73px;
}

.ball-7 {
    height: 10px;
    width: 10px;
    background-color: #90caf9;
    border: 4px solid #64b5f6;
    top: 18px;
    right: 90px;
}

.ball-8 {
    height: 15px;
    width: 15px;
    background-color: #f48fb1;
    border: 4px solid #f06292;
    top: 30px;
    right: 15px;
}

.ball-9 {
    height: 10px;
    width: 10px;
    background-color: #b39ddb;
    border: 4px solid #9575cd;
    top: 8px;
    left: 30px;
}

.ball-10 {
    height: 20px;
    width: 20px;
    background-color: #ffab91;
    border: 4px solid #ff8a65;
    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: #2e7d32;
    position: relative;
}

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

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

.tree-right-branch::after {
    content: "";
    position: absolute;
    height: 100%;
    z-index: 10;
    background-color: rgba(27, 94, 32, 0.2);
    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: 119px;
}

/*
-- Tree Part 2 Sizes
*/
.tree-p2 .tree-left-branch, .tree-p2 .tree-right-branch {
    width: 140px;
    height: 95px;
}

.tree-p2 ul {
    height: 104px;
}

/*
-- 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: 104px;
}

/*
-- 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: 75px;
}

/*
-- Tree Wood Styles
*/
.wood {
    height: 70px;
    width: 55px;
    background-color: #a98274;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    margin: auto;
    border-left: 10px solid #795548;
    border-bottom: 10px solid #795548;
    border-right: 10px solid #795548;
    position: relative;
}

.wood::before {
    content: "";
    position: absolute;
    height: 100%;
    z-index: 1;
    background-color: rgba(121, 85, 72, 0.2);
    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: #4caf50;
    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 #4caf50;
    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 #4caf50;
    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, #4caf50 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, #66bb6a 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: #fff;
    background-size: 2em 2em;
    background-repeat: repeat;
}

.present-container-1 .lid::after {
    content: "";
    width: 100px;
    height: 6px;
    background-color: rgba(0, 0, 0, 0.1);
    position: absolute;
    left: 10px;
    bottom: -6px;
}

.present-container-1 .box {
    width: 100px;
    height: 70px;
    background-color: #f44336;
    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: #fff;
    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 #fff;
    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 #fff;
    border-radius: 50%;
    position: absolute;
    bottom: 0px;
    left: 10px;
}

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

.present-container-2 .lid::after {
    content: "";
    width: 140px;
    height: 6px;
    background-color: rgba(0, 0, 0, 0.1);
    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, #f44336 0.3em, rgba(232, 58, 37, 0) 0.3em) 0 1em, linear-gradient(-135deg, #f44336 0.3em, rgba(232, 58, 37, 0) 0.3em) 0 1em, radial-gradient(circle at 1.79em 1.85em, #f44336 0.255em, rgba(232, 58, 37, 0) 0.261em) 0 -1em, radial-gradient(circle at 0.21em 1.85em, #f44336 0.255em, rgba(232, 58, 37, 0) 0.261em) 0 -1em, linear-gradient(135deg, #66bb6a 0.3em, rgba(152, 204, 150, 0) 0.3em) 1em 0, linear-gradient(-135deg, #66bb6a 0.3em, rgba(152, 204, 150, 0) 0.3em) 1em 0, radial-gradient(circle at 1.79em 1.85em, #66bb6a 0.255em, rgba(152, 204, 150, 0) 0.261em) 1em 0, radial-gradient(circle at 0.21em 1.85em, #66bb6a 0.255em, rgba(152, 204, 150, 0) 0.261em) 1em 0;
    background-size: 2em 2em;
    background-color: #fff;
    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% {
        box-shadow: 113px 636px 6px 4px #fff, 68px 611px 6px 3px #fff, 453px 313px 6px 8px #fff, 590px 52px 6px 2px #fff, 315px 503px 6px 3px #fff, 260px 657px 6px 7px #fff, 258px 457px 6px 6px #fff, 111px 344px 6px 7px #fff, 585px 479px 6px 2px #fff, 450px 438px 6px 4px #fff, 144px 213px 6px 6px #fff, 111px 292px 6px 3px #fff, 292px 423px 6px 2px #fff, 57px 365px 6px 6px #fff, 566px 204px 6px 3px #fff, 502px 252px 6px 3px #fff, 12px 484px 6px 6px #fff, 422px 631px 6px 2px #fff, 653px 677px 6px 5px #fff, 598px 616px 6px 5px #fff, 200px 172px 6px 2px #fff, 254px 234px 6px 2px #fff, 375px 33px 6px 1px #fff, 695px 58px 6px 5px #fff, 95px 62px 6px 5px #fff, 499px 299px 6px 1px #fff, 413px 378px 6px 3px #fff, 588px 156px 6px 6px #fff, 392px 424px 6px 6px #fff, 228px 450px 6px 5px #fff;
        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% {
        box-shadow: 621px 138px 6px 8px #fff, 297px 238px 6px 3px #fff, 534px 622px 6px 5px #fff, 76px 222px 6px 7px #fff, 250px 253px 6px 2px #fff, 75px 56px 6px 6px #fff, 212px 682px 6px 8px #fff, 145px 125px 6px 7px #fff, 388px 315px 6px 6px #fff, 678px 28px 6px 8px #fff, 387px 126px 6px 7px #fff, 655px 343px 6px 2px #fff, 200px 83px 6px 5px #fff, 224px 595px 6px 5px #fff, 198px 27px 6px 1px #fff, 685px 500px 6px 5px #fff, 453px 652px 6px 7px #fff, 433px 338px 6px 7px #fff, 185px 421px 6px 1px #fff, 124px 386px 6px 6px #fff, 289px 675px 6px 3px #fff, 515px 665px 6px 4px #fff, 390px 68px 6px 2px #fff, 219px 318px 6px 8px #fff, 503px 398px 6px 5px #fff, 345px 434px 6px 6px #fff, 461px 89px 6px 7px #fff, 662px 68px 6px 1px #fff, 662px 302px 6px 3px #fff, 471px 5px 6px 2px #fff;
        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% {
        box-shadow: 433px 683px 6px 2px #fff, 205px 492px 6px 5px #fff, 625px 197px 6px 5px #fff, 134px 618px 6px 3px #fff, 31px 515px 6px 2px #fff, 634px 665px 6px 5px #fff, 410px 516px 6px 8px #fff, 102px 229px 6px 2px #fff, 150px 236px 6px 3px #fff, 571px 319px 6px 1px #fff, 326px 85px 6px 3px #fff, 186px 303px 6px 5px #fff, 100px 379px 6px 8px #fff, 393px 277px 6px 3px #fff, 689px 352px 6px 6px #fff, 35px 157px 6px 7px #fff, 546px 419px 6px 4px #fff, 652px 642px 6px 6px #fff, 175px 289px 6px 5px #fff, 51px 681px 6px 3px #fff, 21px 291px 6px 5px #fff, 325px 357px 6px 7px #fff, 159px 27px 6px 3px #fff, 363px 230px 6px 2px #fff, 249px 511px 6px 6px #fff, 511px 289px 6px 2px #fff, 351px 246px 6px 2px #fff, 676px 333px 6px 7px #fff, 619px 673px 6px 8px #fff, 407px 362px 6px 4px #fff;
        opacity: 0.6;
    }
    75% {
        opacity: 0.3;
    }
    100% {
        transform: translateY(50em);
        opacity: 0.1;
    }
}