@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
	--clr-primary: #5e382c;
	--clr-primary-light: #654338;
}

html, body {
	height: 100%;

	font-family: "Inter", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

h1, h2, h3, p {
	margin-bottom: 0;
}

.page-title {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	margin-bottom: 1.5rem;
}

.page-title h1 {
	font-size: 1.5rem;
	font-weight: 500;
}

.page-title h2 {
	font-size: 1rem;
	color: #949499;
}

aside nav a {
	display: flex;
	width: 100%;
	aspect-ratio: 1;
	justify-content: center;
	align-items: center;
	color: white;
}

aside nav a.active {
	background-color: rgba(255, 255, 255, 0.25);
}

.btn {
	padding: .5rem 1rem;
	border-radius: 10px;
}

.btn-primary {
	color: white !important;
	background-color: var(--clr-primary) !important;
	border-color: var(--clr-primary) !important;
}

.btn-primary:hover, .btn-primary:focus-within {
	color: white !important;
	background-color: var(--clr-primary-light) !important;
	border-color: var(--clr-primary-light) !important;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	margin-bottom: 1rem;
}