:root{
  	--snow:#fff;
}
body {
	overflow: hidden;
	width: 100%;
	margin: 0;
	padding: 0;
	touch-action: none;
    -ms-touch-action: none;
}

.new-year-container {
  	position: relative;
	width: 100vw;
	min-height: 100vh;
	background-image: linear-gradient(#003A65, #003A65, #003A65, #3585BA);
}

.new-year-container .centered {
	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	width: 750px;
  	height: 500px;
  	background-image: url("/images/new-year.webp");
    background-repeat:   no-repeat;
    background-size: contain;
}
.new-year-container .sparkles {
	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	width: 750px;
  	height: 500px;
}

.new-year-container .centered .text {
    position: absolute;
    font-size: 38px;
    top: -18%;
    left: 50%;
    transform: translate(-50%, 0);
    background-image: linear-gradient(#ff0000, #00ff00);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    color: transparent;
    font-family: "Great Vibes", cursive;
    font-weight: 400;
    font-style: normal;
    text-align: center;
 }

.new-year-container .centered span {
  width:0.65vh;
  height:0.65vh;
  border-radius:50%;
  position:absolute;
  box-shadow:0 0 0.8vmin 0.15vmin currentColor;
  opacity:0.85;
  animation-name:color-change;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
@keyframes color-change {
    0% {
      background: red; /* Start color */
      color: red;
    }
    25% {
      background: orange; /* End color */
      color: orange;
    }
    50% {
      background: yellow; /* End color */
      color: yellow;
    }
    75% {
      background: lightgreen; /* Intermediate color */
      color: lightgreen;
    }
    100% {
      background: lightblue; /* End color */
      color: lightblue;
    }
  }
.new-year-container .sparkles span {
	position: absolute;
	opacity: 0;
	width:0.2vh;
	height:0.2vh;
	border-radius:50%;
	background: #f0f0ff;
	animation-name: sparkling;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

.new-year-container .sparkles .star {
	position: absolute;
	opacity: 0.7;
	width:0.3vmax;
	height:0.3vmax;
	border-radius:50%;
	background: #f0f0ff;
	animation-name: starshine;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

@keyframes sparkling {
	0% {
		opacity: 0;
	}
	45% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	55% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
@keyframes starshine {
	0% {
		opacity: 0.3;
	}
	35% {
		opacity: 0.7;
	}
	50% {
		opacity: 1;
	}
	75% {
		opacity: 0.65;
	}
	100% {
		opacity: 0.4;
	}
}
.snow {
	position:absolute;
	pointer-events: none;
	inset: 0;
}
.snow span {
	position: absolute;
	top: -10%;
	width: 6px;
	height: 6px;
	background: var(--snow);
	opacity: 0.9;
	border-radius: 50%;
	filter: blur(0.4px);
	animation:fall linear infinite;
}
@keyframes fall {
	to	{transform: translateY(120vh);
		opacity: 0.2}
}		  


@media (min-width: 390px) {
	.new-year-container .centered {
		width: 780px;
		height: 520px;
	}
	.new-year-container .sparkles {
		width: 780px;
		height: 520px;
	}
}

@media (min-width: 780px) {
	.new-year-container .centered {
		width: 780px;
		height: 520px;
	}
	.new-year-container .sparkles {
		width: 780px;
		height: 520px;
	}
    .new-year-container .centered .text {
        font-size: 28px;
        top: 50%;
        left: 25%;
        transform: translate(-50%, -50%);
    }
}

@media (min-width: 1024px) {
	.new-year-container .centered {
		width: 1024px;
		height: 683px;
	}
	.new-year-container .sparkles {
		width: 1024px;
		height: 683px;
	}
    .new-year-container .centered .text {
        font-size: 38px;
        top: 50%;
        left: 25%;
        transform: translate(-50%, -50%);
    }
}

@media (min-width: 1280px) {
	.new-year-container .centered {
		width: 1280px;
		height: 853px;
	}
	.new-year-container .sparkles {
		width: 1280px;
		height: 853px;
	}
    .new-year-container .centered .text {
        font-size: 42px;
        top: 50%;
        left: 25%;
        transform: translate(-50%, -50%);
    }
}

@media (min-width: 1366px) {
	.new-year-container .centered {
		width: 1366px;
		height: 911px;
	}
	.new-year-container .sparkles {
		width: 1366px;
		height: 911px;
	}
    .new-year-container .centered .text {
        font-size: 44px;
        top: 50%;
        left: 25%;
        transform: translate(-50%, -50%);
    }
}

@media (min-width: 1536px) {
	.new-year-container .centered {
		width: 1536px;
		height: 1024px;
	}
	.new-year-container .sparkles {
		width: 1536px;
		height: 1024px;
	}
    .new-year-container .centered .text {
        font-size: 48px;
        top: 50%;
        left: 25%;
        transform: translate(-50%, -50%);
    }
}

@media (min-width: 1920px) {
	.new-year-container .centered {
		width: 1920px;
		height: 1280px;
	}
	.new-year-container .sparkles {
		width: 1920px;
		height: 1280px;
	}
}

@media (min-width: 2560px) {
	.new-year-container .centered {
		width: 2560px;
		height: 1706px;
	}
	.new-year-container .sparkles {
		width: 2560px;
		height: 1706px;
	}
}

@media (min-width: 3840px) {
	.new-year-container .centered {
		width: 3840px;
		height: 2560px;
	}
	.new-year-container .sparkles {
		width: 3840px;
		height: 2560px;
	}
}