main {
	height: 100vh;
	margin: 0;
	position: relative; /* Ensure main is positioned correctly */
	overflow: hidden; /* Ensure canvas does not overflow */
	display: flex; /* Use flexbox for centering */
	justify-content: center; /* Center horizontally */
	align-items: center; /* Center vertically */
}
main>canvas {
	opacity: 0.2;
}
@media screen and (max-width: 992px) and (orientation:portrait) {
	#details {
		width: 90% !important;
	}
}
@media (prefers-color-scheme: dark) {
	body {
		background-color: #222529 !important;
	}
	#details>h1 {
		color: rgb(255, 255, 255) !important;
	}
	#details>p {
		color: rgb(255, 255, 255) !important;
	}
	button {
		background-color: #3a3a3a !important;
	}
	button:hover {
		background-color: #2f2f2f !important;
		cursor: pointer;
		animation: bounce 0.6s ease-in-out;
		transform: scale(1.1);
	}
}
@media (prefers-color-scheme: light) {
	button:hover {
		background-color: #252525 !important;
		cursor: pointer;
		animation: bounce 0.6s ease-in-out;
		transform: scale(1.1);
	}
}
@media screen and (max-aspect-ratio: 9/16) {
	main {
		height: 100vh;
		width: 100vw;
	}
	#details {
		width: 90%;
	}
	#details>h1 {
		font-size: 2em;
	}
	#details>p {
		font-size: 0.8em;
	}
	#pfp {
		height: max(8vmax, 80px);
	}
	#buttons {
		gap: 1rem;
	}
	button {
		width: 40px;
		height: 40px;
	}
	button i {
		font-size: 16px;
	}
}
#details {
	width: 500px;
	height: auto;
	display: flex; /* Use flexbox for centering */
	flex-direction: column; /* Arrange children in a column */
	justify-content: center; /* Center vertically */
	align-items: center; /* Center horizontally */
	text-align: center; /* Center text within the #details div */
}
#pfp {
	height: max(10vmax, 100px);
	/* Removed border-radius */
	background-color: #0000;
	display: block; /* Ensure the image is a block element */
	margin: 0 auto; /* Center the image horizontally */
}
.centre {
	position: relative;
	text-align: center;
}
#details>h1 {
	margin: 0;
	font-family: 'Poppins', sans-serif; /* Ensure Poppins font is used */
	font-size: 3em;
	color: #3D3D3D;
}
#details>p {
	margin: .3vh 0 0 0;
	font-size: .9em;
	font-family: 'Poppins', sans-serif;
	color: #3D3D3D;
}
#buttons {
	margin-top: 4vh;
	display: flex; /* Use flexbox for centering */
	justify-content: center; /* Center horizontally */
	align-items: center; /* Center vertically */
	gap: 2rem; /* Add more space between buttons */
}
button {
	all: unset;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #303030;
	border-radius: 8px;
	width: 50px;
	height: 50px;
	transition: all 250ms ease-in-out;
	position: relative;
	overflow: hidden;
}

button:hover {
	animation: bounce 0.6s ease-in-out;
	transform: scale(1.1);
}

@keyframes bounce {
	0%, 100% {
		transform: scale(1.1) translateY(0);
	}
	25% {
		transform: scale(1.15) translateY(-8px);
	}
	50% {
		transform: scale(1.1) translateY(-4px);
	}
	75% {
		transform: scale(1.15) translateY(-2px);
	}
}
button i {
	font-size: 20px;
	color: #FFCF00;
}
body {
	margin: 0;
}