$border-radius: null !default;
$font-color: #333 !default;
$font-family: sans-serif !default;
$font-size: 100% !default;
$font-size-small: 0.9em !default;
$font-size-xsmall: 0.8em !default;
$font-line-height: 1.4 !default;
$link-color: #028 !default;
$link-decoration: none !default;
$link-hover-decoration: underline !default;
$body-background: white !default;
$zebra-color: hsla(0, 0%, 0%, 0.06) !default;

html {
	font-family: $font-family;
	font-size: $font-size;
	color: $font-color;
	background: $body-background;
	scroll-behavior: smooth;
}

main, footer {
	line-height: $font-line-height;
}

h1, h2, h3, h4, h5, h6 {
	line-height: normal;
}

a {
	color: $link-color;
	text-decoration: $link-decoration;
	&:hover {
		text-decoration: $link-hover-decoration;
	}
}

a > img {
	border: none;
}

img {
	max-width: 100%;
	height: auto;
}

[role=button] {
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	*, ::before, ::after {
		transition-delay: 0.01s !important; // keep running transitionend callback event if exist.
		transition-duration: 0s !important;
	}
}
