@font-face {
	font-family: Barbie;
	font-style: normal;
	src: url("https://assets.codepen.io/527512/barbie.woff2") format("woff2"),
		url("https://assets.codepen.io/527512/barbie.woff") format("woff");
}

:root {
	--pink-100: #d25099;
	--pink-200: #e16aad;
	--pink-300: #f4a2d0;
	--yellow: #f9dd9a;
	--blue: #87ced0;
	--gradient1: #000000;
	--gradient2: #240e45
}

html,
body {
	box-sizing: border-box;
	min-height: 100vh;
	display: flex;
	align-content: center;
	justify-content: center;
	align-items: center;
	background: radial-gradient(
		ellipse at bottom,
		var(--gradient1) 0%,
		var(--gradient2) 100%
	);
  overflow: hidden;
}

svg {
	width: 1000px;
	height: 540px;
	-webkit-box-reflect: below -250px linear-gradient(to bottom, transparent, rgba(0.3, 0, 2, 0.5));
}

#text-shadow,
#text-outline,
#text-glitter {
	font-family: Barbie, sans-serif;
	font-size: 30rem;
}