:root {
	--pink: #ffc6ff;
	--green: #caffbf;
	--orange: #ffd6a5;
	--aqua: #9bf6ff;
	--red: #ffadad;
	--purple: #bdb2ff;
	--yellow: #fdffb6;
	--blue: #a0c4ff;
}

html {
	font-size: 62.5%;
}

body {
	height: 100vh;
	width: 100vw;
	margin: 0;
	background: radial-gradient(ellipse at bottom, hsla(225, 26%, 16%, 1), hsla(245, 60%, 8%, 1));
	overflow: hidden;
}

.text-container {
	margin: 25vh auto;
	width: 590px;
	z-index: 1;
	background-color: hsla(245, 80%, 4%, 0.8);
	border-radius: 25px;
	text-align: center;
	line-height: 4rem;
	padding: 4px 0;
	animation: 1.4s pulse-txt infinite;
}

.regular-text, .special-text {
	color: GhostWhite;
}

.regular-text {
	font-family: "Playfair Display";
	font-size: 5rem;
}

.special-text {
	font-family: "Carter One";
	font-size: 9rem;
}

.fireworks-container {
	width: 100%;
	height: 100%;
}

.firework {
	position: absolute;
	z-index: -1;
	opacity: 0;
	animation: boom 5.6s infinite;
}

.border-three, .border-two, .border-one {
	border-width: 10px;
	border-style: dotted;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.border-three {
	width: 350px;
	height: 340px;
	filter: blur(0.95px);
}

.border-two {
	width: 240px;
	height: 230px;
}

.border-one {
	width: 130px;
	height: 125px;
}

.center {
	width: "";
	height: "";
	border-width: 12px;
	border-style: dotted;
	border-radius: 50%;
}

.pink {
	top: -10%;
	left: -10%;
	border-color: var(--pink);
	animation-delay: 2.8s;
}

.green {
	top: 5%;
	left: 20%;
	border-color: var(--green);
	animation-delay: 0s;
}

.orange {
	top: -20%;
	left: 50%;
	border-color: var(--orange);
	animation-delay: 4.2s;
}

.aqua {
	top: 13%;
	right: -3%;
	border-color: var(--aqua);
	animation-delay: 0.7s;
}

.red {
	bottom: -20%;
	left: -15%;
	border-color: var(--red);
	animation-delay: 4.9s;
}

.blue {
	bottom: -35%;
	left: 15%;
	border-color: var(--blue);
	animation-delay: 1.4s;
}

.purple {
	bottom: -10%;
	left: 45%;
	border-color: var(--purple);
	animation-delay: 3.5s;
}

.yellow {
	bottom: -40%;
	right: 2%;
	border-color: var(--yellow);
	animation-delay: 2.1s;
}

@keyframes boom {
	0% {
		opacity: 0;
		transform: scale(0.1);
	}
	4% {
		opacity: 1;
		transform: scale(0.1);
	}
	8% {
		opacity: 1;
		transform: scale(1.0);
	}
	12% {
		opacity: 0;
		transform: scale(1.0);
	}
	16% {
		opacity: 0;
		transform: scale(0.1);
	}
	100% {
		opacity: 0;
		transform: scale(0.1);
	}
}

@keyframes pulse-txt {
	0% {
		transform: scale(1.0)
	} 50% {
		transform: scale(1.2);
	} 100% {
		transform: scale(1.0);
	}
}