@import "settings.css";

html {
	font-family: var(--main-font);
	background-color: var(--color-bg);
	color: var(--color-text);
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;
	width: 100%;
}

span {
	display: flex;
}

h1 {
	font-size: var(--size-ml);
	padding-bottom: var(--spacing-m);
	padding-top: var(--spacing-s);
	display: flex;
	justify-content: center;
	text-align: center;
	color: var(--color-text);
}

a {
	text-decoration: none;
	color: var(--color-text);
}

p {
	margin-bottom: var(--spacing-s);
}

button {
	-webkit-appearance: none;
	padding: var(--spacing-s);
	background-color: var(--color-links);
	border: none;
	border-radius: var(--border-r-m);
	color: black;
	width: 50%;
	align-self: center;
	margin-bottom: var(--spacing-s);
	font-family: var(--main-font);
	font-size: var(--size-s);
}

@media screen and (min-width: 600px) {
	h1 {
		font-size: var(--size-xl);
		padding-top: var(--spacing-xl);
		padding-bottom: var(--spacing-xl);
	}
}