:root {  
	--purple: rgb(123, 31, 162);
	--violet: rgb(103, 58, 183);
	--pink: rgb(244, 143, 177);
}

@keyframes background-pan {
	from {
		background-position: 0% center;
	}
	to {
		background-position: -200% center;
	}
}

@keyframes scale {
	from, to {
		transform: scale(0);
	}
	50% {
	transform: scale(1);
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(180deg);
	}
}

body {
	background-color: rgb(10, 10, 10);
	display: grid;
	height: 100vh;
	margin: 0px;
	overflow: hidden;
	place-items: center;
}

h1 {
	color: white;
	font-family: "Rubik", sans-serif;
	font-size: clamp(2em, 2vw, 4em);
	font-weight: 400;
	margin: 0px;
	padding: 20px;
	text-align: center;
}

h2 {
	color: white;
	font-family: "Rubik", sans-serif;
	font-size: clamp(1em, 1vw, 2em);
	font-weight: 400;
	margin: 0px;
	padding: 20px;
	text-align: center;
}

h1 > .magic {
	display: inline-block;
	position: relative;
}

h1 > .magic > .magic-star {
	--size: clamp(20px, 1.5vw, 30px);

	animation: scale 700ms ease forwards;
	display: block;
	height: var(--size);
	left: var(--star-left);
	position: absolute;
	top: var(--star-top);
	width: var(--size);
}

h1 > .magic > .magic-star > svg {
	animation: rotate 1000ms linear infinite;
	display: block;
	opacity: 0.7;
}

h1 > .magic > .magic-star > svg > path {
	fill: var(--violet);
}
h1 > .magic > .magic-text {
	animation: background-pan 3s linear infinite;
	background: linear-gradient(
	to right,
	var(--purple),
	var(--violet),
	var(--pink),
	var(--purple)
	);
	background-size: 200%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	white-space: nowrap;
}

/* -- YouTube Link Styles -- */

#source-link {
	top: 60px;
}

#source-link > i {
	color: rgb(94, 106, 210);
}

#yt-link {  
	top: 10px;
}

#yt-link > i {
	color: rgb(239, 83, 80);
}

.meta-link {
	align-items: center;
	backdrop-filter: blur(3px);
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 6px;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
	cursor: pointer;  
	display: inline-flex;
	gap: 5px;
	left: 10px;
	padding: 10px 20px;
	position: fixed;
	text-decoration: none;
	transition: background-color 600ms, border-color 600ms;
	z-index: 10000;
}

.meta-link:hover {
	background-color: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.meta-link > i, .meta-link > span {
	height: 20px;
	line-height: 20px;
}

.meta-link > span {
	color: white;
	font-family: "Rubik", sans-serif;
	transition: color 600ms;
}

.lang {
	font-color: white;
}
.lang a {
	text-decoration: underline;
}