@import url( 
"https://fonts.googleapis.com/css2?family=Sedan+SC&display=swap"); 

* { 
	padding: 0; 
	margin: 0; 

	transition: all 0.3s ease-in-out; 
} 

body { 
	font-family: "Sedan SC", sans-serif; 
	background-color: #1d1d2f;
}

main { 
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	justify-content: center; 
} 

a { 
	
	font-weight: 600;
	text-decoration: underline;
	color: #FFFFFF;
} 

.logo { 
	position: relative; 
	height: 100%; 
	width: 100%; 
	border-radius: 50%; 
	margin-top: 2%; 
} 

.logoContainer { 
	margin: 1rem 0; 
	position: relative; 
	height: 225px; 
	aspect-ratio: 1; 
	border-radius: 50%; 
	margin-bottom: 1rem; 
} 

.links { 
	display: flex; 
	flex-direction: column; 
} 

.link { 
	height: 2.75rem; 
	width: 600px; 

	display: flex; 
	align-items: center; 
	justify-content: center; 
	color: #000; 

	margin: 0.5rem 0; 
	border-radius: 15px; 
} 

.greetings { 
	font-size: 2rem; 
	font-weight: 700; 
	margin-bottom: 1rem; 
	color: white; 
} 

.about { 
	font-size: .75rem; 
	font-weight: 300; 
	text-align: center;
	margin-bottom: .25rem; 
	color: white; 
}

.player { 
	margin: 1rem; 
}

.cover { 
	margin: 1rem; 
} 

.link span { 
	width: 80%; 
	text-align: center; 
} 

.link img { 
	height: 2rem; 
	aspect-ratio: 1; 
} 

.linkIcon { 
	height: 2rem !important; 
	aspect-ratio: 1; 
} 

.link:nth-child(1) { 
	background: linear-gradient(90deg, 
			rgba(29, 29, 47, 0.3) 30%, 
			rgba(238, 125, 34, 0.1) 100%), 
		#ee7d22; 
	color: white; 
} 

.link:nth-child(2) { 
	background: linear-gradient(90deg, 
			rgba(238, 125, 34, 0.1) 30%, 
			rgba(29, 29, 47, 0.3) 100%), 
		#ee7d22;  
	color: white; 
} 

.link:nth-child(3) { 
	background: linear-gradient(90deg, 
			rgba(29, 29, 47, 0.3) 30%, 
			rgba(238, 125, 34, 0.1) 100%), 
		#ee7d22; 
	color: white; 
} 

.link:nth-child(4) { 
	background: linear-gradient(90deg, 
			rgba(238, 125, 34, 0.1) 30%, 
			rgba(29, 29, 47, 0.3) 100%), 
		#ee7d22;  
	color: white;   
} 

.link:nth-child(5) { 
	background: linear-gradient(90deg, 
			rgba(29, 29, 47, 0.3) 30%, 
			rgba(238, 125, 34, 0.1) 100%), 
		#ee7d22; 
	color: white; 
} 

.link:nth-child(6) { 
	background: linear-gradient(90deg, 
			rgba(238, 125, 34, 0.1) 30%, 
			rgba(29, 29, 47, 0.3) 100%), 
		#ee7d22;  
	color: white;  
} 

.link:nth-child(7) { 
	background: linear-gradient(90deg, 
			rgba(29, 29, 47, 0.3) 30%, 
			rgba(238, 125, 34, 0.1) 100%), 
		#ee7d22; 
	color: white; 
} 

.link:nth-child(8) { 
	background: linear-gradient(90deg, 
			rgba(238, 125, 34, 0.1) 30%, 
			rgba(29, 29, 47, 0.3) 100%), 
		#ee7d22;  
	color: white; 
}

.link:nth-child(9) { 
	background: linear-gradient(90deg, 
			rgba(29, 29, 47, 0.3) 30%, 
			rgba(238, 125, 34, 0.1) 100%), 
		#ee7d22; 
	color: white; 
}

.link:nth-child(10) { 
	background: linear-gradient(90deg, 
			rgba(238, 125, 34, 0.1) 30%, 
			rgba(29, 29, 47, 0.3) 100%), 
		#ee7d22;  
	color: white; 
}

.link:hover { 
	filter: drop-shadow(0px 5px 1px rgba(0, 0, 0, 0.2)); 
	transform: scale(1.05); 
} 

.link>* { 
	transition: all 0.3s ease-in-out; 
	transition-delay: 0.1s; 
} 

.link:hover>* { 
	transform: scale(1.1); 
	filter: drop-shadow(0px 5px 1px rgba(0, 0, 0, 0.2)); 
} 

@media (max-width: 600px) { 
	body { 
		background-size: 100%; 
	} 

	.logo img { 
		width: 200px; 
	} 

	.link span { 
		width: 70%; 
		text-align: center; 
	} 

	.link { 
		width: 95vw; 
	} 

	.link:hover { 
		transform: scale(1.01); 
	} 
}