:root {
	--primary: rgb(252, 101, 171, 0.9);
	--secondary: rgb(109, 21, 160, 0.9);
	/*--secondary: rgba(89, 205, 255, 0.9);*/
	--glass: rgba(255, 255, 255, 0.05);
	--solid: rgb(52, 29, 82);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	min-height: 100vh;
	display: grid;
	place-items: center;
	background: 
	/*linear-gradient(to top,
	rgba(0,0,0,0.1)50%, rgba(0,0,0,0.3)50%),*/
	url(./assets/bg-sky.webp);
	background-position: center;
	background-size: cover;
	backdrop-filter: blur(5px);
	font-family: 'Segoe UI', sans-serif;
}

.card {
	position: relative;
	width: 350px;
	height: 500px;
	background: var(--solid);
	border-radius: 20px;
	/*backdrop-filter: blur(20px);
	border: 2.5px groove rgb(181, 101, 201);
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 15px 35px rgba(0,0,0,0.5);
	/*transform-style: preserve-3d;
	animation: float 7s ease-in-out infinite;*/
}

.content {
	position: relative;
	padding: 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 1;
}

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

.card::after, .card::before {
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	background-image: conic-gradient(from var(--angle),
		var(--primary),
		#E458A9,
		#CC4AA7,
		#B53DA6,
		#9D30A4,
		#8522A2,
		var(--secondary),
		#8522A2,
		#9D30A4,
		#B53DA6,
		#CC4AA7,
		#E458A9,
		var(--primary));
	/*background-image: linear-gradient(
    90deg,
    hsla(197, 100%, 64%, 1) 0%,
    hsla(339, 100%, 55%, 1) 100%
  );*/
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	z-index: -1;
	padding: 4px;
	border-radius: 20px;
	animation: spin 6s linear infinite;
}

.card::before {
	filter: blur(1.5rem);
	opacity: 0.75;
}

@keyframes spin {
	from {
		--angle: 0deg;
	}
	to {
		--angle: 360deg;
	}
}

.avatar {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.1);
	margin-bottom: 20px;
	transition: 0.5s;
	cursor: pointer;
}

.avatar:hover {
	transform: scale(1.1) rotate(15deg);
}

h2 {
	color: white;
	font-size: 1.75em;
	margin-bottom: 10px;
}

p {
	color: rgba(255, 255, 255, 0.75);
	text-align: center;
	line-height: 1.6;
	margin-bottom: 25px;
}

.socials {
	display: flex;
	gap: 15px;
	margin-bottom: 30px;
}

.socials a {
	width: 40px;
	height: 40px;
	background: var(--glass);
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: white;
	text-decoration: none;
	transition: 0.3s;
}

.socials a:hover {
	background: linear-gradient(45deg, var(--primary), var(--secondary));
	transform: translateY(-5px);
}

button {
	padding: 12px 30px;
	background: linear-gradient(45deg, var(--primary)20%, var(--secondary)80%);
	border: none;
	border-radius: 25px;
	color: white;
	font-weight: 600;
	cursor: pointer;
	transition: 0.3s;
}

button:hover {
	letter-spacing: 2px;
	box-shadow: 0 5px 15px rgba(255, 70, 86, 0.4);
}

@keyframes float {
	0%, 100% { transform: translateY(0) rotateX(0) rotateY(0); }
	25% { transform: translateY(-20px) rotateX(5deg) rotateY(5deg); }
	75% { transform: translateY(20px) rotateX(-5deg) rotateY(-5deg);}
}