*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	line-height: 1.15;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	background: var(--color-background);
	color: var(--color-text);
	font-family: var(--font-family-base);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	margin: 0;
}

::selection {
	background: var(--color-accent-soft);
	color: var(--color-text);
}

img,
svg,
video {
	display: block;
	height: auto;
	max-width: 100%;
}

button,
input,
select,
textarea {
	font: inherit;
}

input,
select,
textarea {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	padding: 0.65rem 0.75rem;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
figure {
	margin-top: 0;
}

h1,
h2,
h3,
h4,
.bl-h1,
.bl-h2,
.bl-h3,
.bl-h4 {
	color: var(--color-text);
	font-family: var(--font-family-heading);
	font-weight: 700;
	letter-spacing: 0;
	line-height: var(--line-height-heading);
	margin-bottom: var(--space-md);
	text-wrap: balance;
}

h1,
.bl-h1 {
	font-size: var(--font-size-h1);
}

h2,
.bl-h2 {
	font-size: var(--font-size-h2);
}

h3,
.bl-h3 {
	font-size: var(--font-size-h3);
	font-weight: 600;
}

h4,
.bl-h4 {
	font-size: var(--font-size-h4);
	font-weight: 600;
}

p,
.bl-text {
	color: var(--color-text-muted);
	margin-bottom: var(--space-md);
	overflow-wrap: break-word;
	text-wrap: pretty;
}

ul,
ol {
	color: var(--color-text-muted);
	margin-bottom: var(--space-md);
	padding-left: 1.5rem;
}

li + li {
	margin-top: 0.375rem;
}

a {
	color: var(--color-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--transition-normal);
}

a:hover,
a:focus {
	color: var(--color-accent-hover);
}

:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 3px;
}

@media (max-width: 640px) {
	body {
		text-align: left;
	}
}