style.css

button {
	display: block;
	width: 200px;
	margin: 10px 0;
	padding: 10px;
	border: none;
	border-radius: 8px;
	background-color: #f5057b;
	color: #ffffff;
	font-size: 16px;
	cursor: pointer;
	transition: background-color 0.1s;
}

button:hover {
	background-color: #7264e8;
	box-shadow: inset 0 0 0 1px #ffffff;
	scale: 1.05;
}

a {
	display: block;
	width: 200px;
	margin: 10px 0;
	padding: 10px;
	border-radius: 8px;
	font-size: 16px;
	cursor: pointer;
	transition: background-color 0.1s;
	text-align: center;
	text-decoration: none;
}

hr {
	width: 100%;
}

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 250px;
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: #191919;
	}
	a {
		background-color: #ffffff !important;
		color: #191919 !important;
		border: 1px solid #ffffff !important;
	}
	a:hover {
		background-color: #7264e8 !important;
		color: #ffffff !important;
		scale: 1.05;
	}
}

@media (prefers-color-scheme: light) {
	body {
		background-color: #ffffff !important;
	}
	a {
		background-color: #ffffff !important;
		color: #191919 !important;
		border: 1px solid #191919 !important;
	}
	a:hover {
		background-color: #7264e8 !important;
		color: #ffffff !important;
		scale: 1.05;
	}
}

a.downloadLink:hover img {
	/* style rules for the img element inside the downloadLink element when it is hovered */
	background-image: url('download-dark.png') !important;
	transition: background-image 0.1s;
}