body {
	padding-top: 10vh;
	padding-bottom: 10vh;
	padding-left: 5vw;
	padding-right: 5vw;

	display: flex;
	justify-content: center;

	background-color: rgb(19, 19, 19);

	color: white;
	font-family: "Roboto";
}

.pattern {
	position: fixed;
	inset: 0;
	z-index: -1;

	background-image: radial-gradient(#424242 1px, transparent 1px);
	background-size: 20px 20px;

	opacity: 0.25;
	animation: move-dots 18s linear infinite;
}

.pattern::after {
	content: "";
	position: absolute;
	inset: 0;

	background-image: radial-gradient(#515151 1px, transparent 1px);
	background-size: 28px 28px;
	opacity: 0.15;

	animation: move-dots-reverse 28s linear infinite;
}

@keyframes move-dots {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 200px 200px;
	}
}

@keyframes move-dots-reverse {
	from {
		background-position: 0 0;
	}
	to {
		background-position: -200px -200px;
	}
}

.profile {
	display: flex;

	flex-direction: column;
	align-items: center;

	gap: 3vh;
}

.profile .profile-picture {
	border: solid 5px rgb(15, 15, 15);
	border-radius: 360px;

	box-shadow: 0px 0px 10px #00000067;

	backdrop-filter: blur(10px);

	aspect-ratio: 1 / 1;

	max-width: 300px;
	width: calc(20vw + 10vh);
	min-width: 100px;
}

.profile .profile-name {
	font-size: 2.5rem;
	font-weight: bold;

	backdrop-filter: blur(10px);
	background-color: transparent;
}

.profile .profile-description {
	font-size: 1.5rem;
}

.stacks {
	display: flex;
	gap: 10px;

	flex-wrap: wrap;
	justify-content: center;

	margin-top: 4vh;
	padding: 10px 10px;

	background-color: #1818188e;

	border-radius: 20px;
	border: solid 2px rgb(15, 15, 15);

	box-shadow: 0px 0px 10px #00000067;

	backdrop-filter: blur(10px);
}

.stacks img {
	aspect-ratio: 1 / 1;

	border-radius: 15px;
	border: solid 2px rgb(39, 39, 39);

	background-color: transparent;
	backdrop-filter: blur(10px);

	box-shadow: 0px 0px 10px #00000067;

	max-width: 75px;
	width: calc(6vw + 3vh);
	min-width: 20px;
}