body,
html {
    margin: 0;
    padding: 0;
   
}


body,

html {
    overflow-x: hidden;
    width: 100vw;
    height: auto;
}

.after{
	display: none;
}
.snow-container {
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    pointer-events: none;
}

.snowflake {
    position: absolute;
    background-color: white;
    border-radius: 50%;
    opacity: 0.8;
    pointer-events: none;
}

@keyframes fall {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    10% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
        transform: translateY(100vh);
    }
}

@keyframes diagonal-fall {
    0% {
        opacity: 0;
        transform: translate(0, 0);
    }
    10% {
        opacity: 1;
    }
    100% {
        opacity: 0.25;
        transform: translate(10vw, 100vh);
    }
}


/* --------------------- */
audio {
    display: none;
  }
  /* ----------------------- */
  html {
	height: 100%;
}
body {
	 background: #000;
	/*background-image: linear-gradient(to bottom, #bc987e, #000);*/
}
 .lightrope {
	 text-align: center;
	 white-space: nowrap;
	 overflow: hidden;
	 position:relative;
	 z-index: 1;
	 margin: 30px 0 30px 0;
	 padding: 0;
	 pointer-events: none;
	 width: 100%;
}
 .lightrope li {
	 position: relative;
	 animation-fill-mode: both;
	 animation-iteration-count: infinite;
	 list-style: none;
	 margin: 0;
	 padding: 0;
	 display: block;
	 width: 12px;
	 height: 28px;
	 border-radius: 50%;
	 margin: 20px;
	 display: inline-block;
	 background: rgba(0, 247, 165, 1);
	 box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 1);
	 animation-name: flash-1;
	 animation-duration: 2s;
}
 .lightrope li:nth-child(2n+1) {
	 background: rgba(0, 255, 255, 1);
	 box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.5);
	 animation-name: flash-2;
	 animation-duration: 0.4s;
}
 .lightrope li:nth-child(4n+2) {
	 background: rgba(247, 0, 148, 1);
	 box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 1);
	 animation-name: flash-3;
	 animation-duration: 1.1s;
}
 .lightrope li:nth-child(odd) {
	 animation-duration: 1.8s;
}
 .lightrope li:nth-child(3n+1) {
	 animation-duration: 1.4s;
}
 .lightrope li:before {
	 content: "";
	 position: absolute;
	 background: #222;
	 width: 10px;
	 height: 9.3333333333px;
	 border-radius: 3px;
	 top: -4.6666666667px;
	 left: 1px;
}
 .lightrope li:after {
	 content: "";
	 top: -14px;
	 left: 9px;
	 position: absolute;
	 width: 52px;
	 height: 18.6666666667px;
	 border-bottom: solid #222 2px;
	 border-radius: 50%;
}
 .lightrope li:last-child:after {
	 content: none;
}
 .lightrope li:first-child {
	 margin-left: -40px;
}
 @keyframes flash-1 {
	 0%, 100% {
		 background: rgba(0, 247, 165, 1);
		 box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 1);
	}
	 50% {
		 background: rgba(0, 247, 165, 0.4);
		 box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
	}
}
 @keyframes flash-2 {
	 0%, 100% {
		 background: rgba(0, 255, 255, 1);
		 box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 1);
	}
	 50% {
		 background: rgba(0, 255, 255, 0.4);
		 box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2);
	}
}
 @keyframes flash-3 {
	 0%, 100% {
		 background: rgba(247, 0, 148, 1);
		 box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 1);
	}
	 50% {
		 background: rgba(247, 0, 148, 0.4);
		 box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 0.2);
	}
}
  /* ------------------------ */
.container-tree{
    height: 40vh;
    display: flex;
    align-items: center;
    max-width: 500px; /* Giới hạn chiều rộng tối đa */
    max-height: 500px; /* Giới hạn chiều cao tối đa */
    margin: auto; /* Căn giữa chiều ngang */
    justify-content: space-around; /* Sắp xếp các SVG cách đều nhau trên hàng ngang */
    
  }
  /* ------------------- */
  * {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--red4: hsl(345,100%,23%);
	--white: hsl(0,0%,100%);
	font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
}
body {
	background-color: var(--red4);
	color: var(--white);
	font: 1em/1.5 sans-serif;
	height: 100vh;
	display: grid;
	place-items: center;
}
main {
	padding:  0;
	
}

/* Main styles */
.greeting,
.holly {
	display: block;
	margin: auto;
}
.greeting {
	width: 16em;
	height: 8em;
}
.greeting__merry {
	animation: merry 1.5s 1.2s cubic-bezier(0.1,0,0.9,1) forwards;
	stroke-dashoffset: 345;
}
.greeting__christmas {
	animation: christmas 2.7s 2.7s cubic-bezier(0.05,0,0.95,1) forwards;
	stroke-dashoffset: 453;
}
.greeting__i {
	animation: dot 0.1s 5.4s ease-in-out forwards;
	transform: scale(0);
	transform-origin: 57px 57px;
}
.greeting__t {
	animation: line 0.1s 5.55s ease-in-out forwards;
	stroke-dashoffset: 22;
}
.greeting__exclamation1 {
	animation: line 0.1s 5.7s ease-in-out forwards;
	stroke-dashoffset: 22;
}
.greeting__exclamation2 {
	animation: dot 0.1s 5.85s ease-in-out forwards;
	transform: scale(0);
	transform-origin: 152px 73px;
}
.holly {
	margin-bottom: 1.5em;
	width: 12em;
	height: 9em;
}
.holly__berry {
	animation: berry1 0.3s ease-in-out forwards;
	transform-origin: 12px 24px;
}
.holly__berry--1 {
	animation-delay: 0.75s;
	transform: translate(68px,66px) rotate(120deg) scale(0);
}
.holly__berry--2 {
	animation-name: berry2;
	animation-delay: 0.6s;
	transform: translate(68px,66px) rotate(-120deg) scale(0);
}
.holly__berry--3 {
	animation-name: berry3;
	animation-delay: 0.45s;
	transform: translate(68px,66px) scale(0);
}
.holly__leaf {
	animation: leaf1 0.3s 0.15s ease-in-out forwards;
	transform-origin: 30px 100px;
}
.holly__leaf--1 {
	transform: translate(50px,0) scale(0);
}
.holly__leaf--2 {
	animation-name: leaf2;
	transform: translate(50px,0) rotate(-50deg) scale(0);
}
.holly__leaf--3 {
	animation-name: leaf3;
	transform: translate(50px,0) rotate(50deg) scale(0);
}
.holly__vein {
	animation: vein1 0.9s 0.15s ease-in-out forwards;
}
.holly__vein--1 {
	stroke-dashoffset: 80;
}
.holly__vein--2 {
	animation-name: vein2;
	stroke-dashoffset: 48;
}
.holly__vein--3 {
	animation-name: vein3;
	stroke-dashoffset: 47;
}
.holly__vein--4 {
	animation-name: vein4;
	stroke-dashoffset: 74;
}
.holly__vein--5 {
	animation-name: vein5;
	stroke-dashoffset: 70;
}
/* Animations */
@keyframes berry1 {
	from { transform: translate(68px,66px) rotate(120deg) scale(0); }
	33.33% { transform: translate(68px,66px) rotate(120deg) scale(0.75,1.25); }
	66.67% { transform: translate(68px,66px) rotate(120deg) scale(1.125,0.875); }
	to { transform: translate(68px,66px) rotate(120deg) scale(1); }
}
@keyframes berry2 {
	from { transform: translate(68px,66px) rotate(-120deg) scale(0); }
	33.33% { transform: translate(68px,66px) rotate(-120deg) scale(0.75,1.25); }
	66.67% { transform: translate(68px,66px) rotate(-120deg) scale(1.125,0.875); }
	to { transform: translate(68px,66px) rotate(-120deg) scale(1); }
}
@keyframes berry3 {
	from { transform: translate(68px,66px) scale(0); }
	33.33% { transform: translate(68px,66px) scale(0.75,1.25); }
	66.67% { transform: translate(68px,66px) scale(1.125,0.875); }
	to { transform: translate(68px,66px) scale(1); }
}
@keyframes leaf1 {
	from { transform: translate(50px,0) rotate(0deg) scale(0); }
	33.33% { transform: translate(50px,0) rotate(0deg) scale(1); }
	66.67% { transform: translate(50px,0) rotate(0deg) scale(1.25,0.875); }
	to { transform: translate(50px,0) rotate(0deg) scale(1); }
}
@keyframes leaf2 {
	from { transform: translate(50px,0) rotate(-50deg) scale(0); }
	33.33% { transform: translate(50px,0) rotate(-50deg) scale(1); }
	66.67% { transform: translate(50px,0) rotate(-50deg) scale(1.25,0.875); }
	to { transform: translate(50px,0) rotate(-50deg) scale(1); }
}
@keyframes leaf3 {
	from { transform: translate(50px,0) rotate(50deg) scale(0); }
	33.33% { transform: translate(50px,0) rotate(50deg) scale(1); }
	66.67% { transform: translate(50px,0) rotate(50deg) scale(1.25,0.875); }
	to { transform: translate(50px,0) rotate(50deg) scale(1); }
}
@keyframes vein1 {
	from { stroke-dashoffset: 80; }
	33.33%, to { stroke-dashoffset: 0; }
}
@keyframes vein2 {
	from { stroke-dashoffset: 48; }
	26%, to { stroke-dashoffset: 0; }
}
@keyframes vein3 {
	from { stroke-dashoffset: 47; }
	26%, to { stroke-dashoffset: 0; }
}
@keyframes vein4 {
	from { stroke-dashoffset: 74; }
	31%, to { stroke-dashoffset: 0; }
}
@keyframes vein5 {
	from { stroke-dashoffset: 70; }
	31%, to { stroke-dashoffset: 0; }
}
@keyframes merry {
	from { stroke-dashoffset: 345; }
	to { stroke-dashoffset: 0; }
}
@keyframes christmas {
	from { stroke-dashoffset: 453; }
	to { stroke-dashoffset: 0; }
}
@keyframes dot {
	from { transform: scale(0); }
	to { transform: scale(1); }
}
@keyframes line {
	from { stroke-dashoffset: 22; }
	to { stroke-dashoffset: 0; }
}