html, body {
	height: 100%;
	margin: 0;
}

body, header, .button {
	display: flex;
	justify-content: safe center;
	align-items: safe center;
	gap: 1rem;
}

body {
	background: url(../img/index.png) no-repeat center;
	background-size: cover;
	flex-direction: column;
	font-family: "Vazirmatn", sans-serif;
	color: #3f474f;
}

header {
	flex-wrap: wrap;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
}

::selection {
	background-color: #3f474f;
	color: #f0f8ff;
}

svg {
	margin: 0;
	height: 1.2rem;
	fill: #f0f8ff;
}

.title {
	font-family: "Sorena", "Vazirmatn", sans-serif;
	font-weight: normal;
	text-align: center;
	font-size: 36pt;
}

.subtitle {
	text-align: center;
	font-weight: bold;
	font-size: 14pt;
}

p {
	text-align: center;
	margin: 1rem auto;
	max-width: 50rem;
	padding: 0 1rem;
}

.button {
	font-family: "Sorena", "Vazirmatn", sans-serif;
	margin: .8rem;
	position: relative;
	gap: .5rem;
	padding: 1rem;
	color: #f0f8ff;
	box-sizing: border-box;
	text-decoration: none;
	width: 150px;
	height: 64px;
}

.button:hover, .button:focus {
	filter: brightness(1.2);
}

.button-menu {
	background: url('button-menu.png') no-repeat;
}

.button-download {
	background: url('button-download.png') no-repeat;
}

.do {
	justify-content: center;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.title-box {
	text-align: center
}

@media (prefers-color-scheme: dark) {

	html, .button {
		filter: invert() hue-rotate(180deg);
	}

	.button:hover, .button:focus {
		filter: brightness(1.2) invert() hue-rotate(180deg);
	}

}