:root {
	--bg-color: #ffffff;
	--card-color: #ffffff;
	--text-color: #212121;
	--accent-color: #1db954;
}

body {
	background: url(../images/IMG_1528.JPG) no-repeat center/cover fixed;
	margin: 0;
	font-family: "Silkscreen", sans-serif;
	/* Adjust according to your navbar height */
	background-color: var(--bg-color);
	color: var(--text-color);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2rem;
}

.container {
	padding-top: 200px;

	max-width: 500px;
	width: 100%;
	text-align: center;
}

p {
	color: black;
}

h1 {
	font-size: 1.8rem;
	margin-bottom: 1.5rem;
	color: black;
}

.link {
	background-color: var(--card-color);
	border: 1px solid #333;
	border-radius: 4px;
	padding: 1rem 1.5rem;
	margin: 0.5rem 0;
	text-decoration: none;
	color: var(--text-color);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	backdrop-filter: blur(0px);
}

.link:hover {
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
}

.link i {
	margin-right: 0.6rem;
}

@media (max-width: 600px) {
	h1 {
		font-size: 1.5rem;
	}

	.link {
		font-size: 1rem;
	}
}