@font-face {
    font-family: Hangyaboly;
    src: url('../fonts/Hangyaboly.woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Hangyaboly;
}
body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.canvas {
    width: 100%;
    height: 100%;
    position: relative;
    background: url(../images/bg.webp);
    background-size: cover;
    .layer {
        position: absolute;
        right: 0;
        bottom: 0;
        top: 0;
        left: 0;

        &.snow {
            width: 200%;
            background: url(../images/snow.svg) repeat;
            filter: blur(5px);
            opacity: 0.3;
            animation: snow 30s linear infinite alternate;
        }
        .bg-border {
            width: 100%;
            height: 100%;
            display: block;
        }
        .left-top-tree {
            position: absolute;
            top: -2.77%;
            left: -2.32%;
            width: 28.82%;
            display: block;
            transform-origin: top left;
            animation: left-top-tree 10s linear infinite alternate;
        }
        .left-bottom-tree {
            position: absolute;
            bottom: 15.06%;
            left: -0.98%;
            width: 29.11%;
            display: block;
            transform-origin: center left;
            animation: left-bottom-tree 10s linear infinite alternate;
        }
        .right-top-tree {
            position: absolute;
            top: -2.77%;
            right: -2.48%;
            width: 30.67%;
            display: block;
            transform-origin: top right;
            animation: right-top-tree 10s linear infinite alternate;
        }
        .right-bottom-tree {
            position: absolute;
            bottom: 18.84%;
            right: -2.48%;
            width: 22.39%;
            display: block;
            transform-origin: center right;
            animation: right-bottom-tree 10s linear infinite alternate;
        }
        .boy {
            position: absolute;
            bottom: 7.63%;
            right: 11.04%;
            width: 61.04%;
            display: block;
            transform-origin: bottom center;
            animation: boy 10s linear infinite alternate;
        }
        .text {
            position: absolute;
            top: -2.96%;
            left: -6.46%;
            width: 72.27%;
            display: block;
        }
        .text-container {
            color: #6b2314;
            font-size: 2.16vw;
            z-index: 1;
            position: absolute;
            width: 42.04%;
            left: 11.09%;
            top: 16.99%;
            line-height: 110%;
            span {
                opacity: 0;
                transition: 0.3s;
            }
        }
        .text-1 {
            position: absolute;
            bottom: 23.98%;
            left: 22.42%;
            width: 29.27%;
            display: block;
            opacity: 0;
            animation: text 2s linear both;
            animation-delay: 5.5s;
            
        }
        .text-2 {
            position: absolute;
            bottom: 1.8%;
            left: 2%;
            width: 96%;
            display: block;
            animation: text 2s linear both;
            animation-delay: 8s;
        }
        .text-3 {
            position: absolute;
            bottom: 1.8%;
            left: 2%;
            width: 96%;
            display: none;
            animation: text 2s linear both;
            animation-delay: 8s;
        }
    }
}
@keyframes left-top-tree {
    0% {
        transform: rotate(0deg);
    }
    33.33% {
        transform: rotate(1.926deg);
    }
    66.66% {
        transform: rotate(-1.9deg);
    }
    100% {
        transform: rotate(2.036deg);
    }
}
@keyframes right-top-tree {
    0% {
        transform: rotate(0deg);
    }
    33.33% {
        transform: rotate(2.59deg);
    }
    66.66% {
        transform: rotate(-1.824deg);
    }
    100% {
        transform: rotate(1.259deg);
    }
}
@keyframes left-bottom-tree {
    0% {
        transform: rotate(0deg);
    }
    33.33% {
        transform: rotate(-3.602deg);
    }
    66.66% {
        transform: rotate(2.837deg);
    }
    100% {
        transform: rotate(-2.958deg);
    }
}
@keyframes right-bottom-tree {
    0% {
        transform: rotate(0deg);
    }
    33.33% {
        transform: rotate(-3.938deg);
    }
    66.66% {
        transform: rotate(2.907deg);
    }
    100% {
        transform: rotate(-4.54deg);
    }
}
@keyframes boy {
    0% {
        transform: rotate(0deg);
    }
    33.33% {
        transform: rotate(-1.414deg);
    }
    66.66% {
        transform: rotate(2.179deg);
    }
    100% {
        transform: rotate(-1.382deg);
    }
}
@keyframes snow {
    0% {
        left: 0%;
    }
    100% {
        left: -100%;
    }
}
@keyframes text {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@media screen and (max-width: 800px) {
    .canvas {
        .layer {
            .text {
                width: 140%;
                left: -20%;
                top: -5%;
            }
            .text-container {
                font-size: 3.6vw;
                width: 80%;
            }
            .left-bottom-tree {
                bottom: 30%;
                width: 40%;
            }
            .text-1 {
                bottom: 27%;
                width: 60%;
                left: 5%;
            }
            .text-2 {
                display: none;
            }
            .text-3 {
                display: block;
                bottom: 1.8%;
                width: 90%;
                left: 5%;
            }
            .boy {
                width: 85%;
                right: -10%;
            }
        }
    }
}
@media screen and (max-width: 440px) {
    .canvas {
        .layer {
            .text {
                width: 800px;
                left: -150px;
                top: 20px;
            }
            .text-container {
                font-size: 5vw;
                width: 80%;
                top: 140px;
            }
            .left-bottom-tree {
                bottom: unset;
                bottom: 37%;
            }
            .text-1 {
                bottom: 150px;
            }
            .text-2 {
                display: none;
            }
            .text-3 {
                display: block;
                bottom: 1.8%;
                width: 380px;
                max-width: 90%;
                left: 5%;
            }
            .boy {
                width: 100%;
                right: -5%;
            }
        }
    }
}