@font-face {
	font-family: "Monaspice Neon";
	src: url(assets/Monaspace\ Neon\ Var.woff2) format("truetype");
}

:root {
	--c-main: #F8B74E;
	--c-main2: #4E8EF8;
	--c-accent: #A4C857;
	--c-accent2: #CE5A5B;
	--c-neutral: #202020;
	--c-neutralalt: #252525;
	--c-neutral2: #404040;
	--c-neutral2alt: #3B3B3B;
	--c-negative: #EAECEF;
}

@keyframes activeBorderAnim {
	to {
		--borderAngle: 360deg;
	}
}

@property --borderAngle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}


.title {
	display: flex;
	align-items: center;

}

.card {
	font-family: Monaspice Neon;
	background-color: #00000099;
	backdrop-filter: blur(5px);
	width: 33em;
	border: 0.125em solid ghostwhite;
	padding: 2em;
	padding-top: 1em;
	padding-bottom: 0.5em;
	border-radius: 1em;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0px 0px 150px 20px #000000FF;
}

.link {
	color: inherit;
}

.socials {
	display: flex;
	justify-content: space-evenly;
}

.socialIcon {
	width: 2em;
	height: 2em;
	overflow: visible;
	opacity: 50%;
	color: inherit;

	transition: 0.2s ease-out;

	svg {
		overflow: visible;
	}


	path,
	polygon {

		transform-origin: center;
		transition: 0.2s ease-out;
		stroke: rgba(#EAECEF)
	}
}

.socialIcon:hover {
	opacity: 100%;

	path,
	polygon {
		transform: scale(1.25, 1.25);
		position-anchor: 1em;
	}
}

.pfp {
	box-shadow: 0px 0px 20px 0px #F8F8FF55;
	border: double 1em transparent;
	border-width: 0.1em;
	border-style: solid;
	border-radius: 0.5em;
	margin-right: 1em;
	background-origin: border-box;
	background-clip: content-box, border-box;
	background-image: linear-gradient(white, white),
		linear-gradient(var(--borderAngle), var(--c-main), var(--c-main2));

	animation: activeBorderAnim 10s infinite;
}

.feather {
	position: fixed;
	top: 0;
	left: 0;
	width: 100dvw;
	height: 100dvh;
	z-index: 0;
	pointer-events: none;
	opacity: 0.5;

	background: radial-gradient(#00000011, #000000FF);
}

.overlay {
	z-index: 1;
}

.unselectable {
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

body {
	color: antiquewhite;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

html,
body {
	background-color: #181825;
}