@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');

* {
	box-sizing: border-box;
}

html {
	height: 100vh;
	overflow-y: auto;
}

body {
	background-color: #1c1f25;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 32px;
	gap: 32px;
	font-family: 'IBM Plex Sans', sans-serif;
	color: #f5f9fc;
	height: max-content;
	min-height: 100%;
}

a {
	color: #57abff;
	text-decoration: none;
}

#profile {
	border-radius: 50%;
}

#name {
	margin: 0;
}

#socials {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 300px;
	max-width: 100%;
	margin-bottom: auto;
}

.social {
	text-decoration: none;
	transition-duration: 150ms;
	width: 100%;
	padding: 8px;
	border: 2px solid #57abff;
	border-radius: 8px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.social:hover {
	color: var(--color);
	scale: 1.02;
	border-color: var(--color);
}

#footer {
	margin: 0;
	min-height: 0;
}