html {
	font: 300 calc($fontDefault-size / 16 * 1em)/1.5 $fontDefault-family;
	overflow-x: hidden;
	overflow-y: scroll;
}
/* html { @mixin responsive font-size, 16px, 20px, $screen_linear, $screen_tablet; } */

::selection {
	background: $color_blue;
	color: #fff;
}
p {
	margin: 0 0 $defaultSpacing;
}
br + br {
    line-height: 1;
}
a {
	background-color: transparent;
	color: $color_accent;
	text-decoration: underline;

	&[href^="tel:"] {
		color: inherit;
		text-decoration: none;
	}
	&:focus,
	&:hover {
		color: $color_text;
	}
	&:active {
		color: $color_blue;
	}
}

%h1 { font: 300 50px/1.2 $fontDefault-family;border-bottom: 2px solid $color_blue; }
%h2 { font: 700 40px/1.2 $fontDefault-family; }
%h3 { font: 700 30px/1.2 $fontDefault-family; }
%h4 { font: 700 24px/1.2 $fontDefault-family; }
%h5 { font: 700 20px/1.2 $fontDefault-family; }
%h6 { font: 700 16px/1.2 $fontDefault-family; }

%allHeaders {
	margin: 0 0 $defaultSpacing;

	& a,
	& a:focus,
	& a:hover {
		color: inherit;
		text-decoration: none;
	}
}
h1 {
	@extend %allHeaders;
	@extend %h1;
}
h2 {
	@extend %allHeaders;
	@extend %h2;
}
h3 {
	@extend %allHeaders;
	@extend %h3;
}
h4 {
	@extend %allHeaders;
	@extend %h4;
}
h5 {
	@extend %allHeaders;
	@extend %h5;
}
h6 {
	@extend %allHeaders;
	@extend %h6;
}
h1 {
	@mixin responsive font-size, 32px, 50px, $screen_linear, $screen_tablet;
}
h2 {
	@mixin responsive font-size, 26px, 40px, $screen_linear, $screen_tablet;
}
h3 {
	@mixin responsive font-size, 21px, 30px, $screen_linear, $screen_tablet;
}

img {
	display: inline-block;
	max-width: 100%;
	/*height: auto;*/
}
hr {
	position: relative;
	display: block;
	height: 1px;
	margin: 20px 0;
	border: 0;
	border-top: 1px solid;
	/* $color_text */
}
hr::after {
	content: '';
	position: absolute 50% * * 50%;
	display: block;
	width: 9px;
	height: 9px;
	margin-top: -2px;
	border-radius: 9px;
	background: currentColor;
	opacity: 1.2;
	transform: translate(-50%, -50%);
}
ol,
ul {
	margin: 20px 0;
	padding-left: 2em;
}
ol ol,
ol ul,
ul ol,
ul ul {
	margin: 0;
	padding-left: 1.5em;
}
ol li,
ul li {
	margin: 0 0 0.3em;
}


/* ===============================================================
 * Overlay
 * =============================================================== */
$pageOverlay_background: #000;
$pageOverlay_zIndex: 999;

.pageOverlay {
	position: fixed 0 0 0 0;
	background: $pageOverlay_background;
	visibility: hidden;
	opacity: 0;
	z-index: -1;
	transition: opacity 300ms ease-in 0ms;
}
@define-mixin openPageOverlay {
	.pageOverlay {
		visibility: visible;
		opacity: 0.5;
		z-index: $pageOverlay_zIndex;
	}
}


@media (prefers-color-scheme: light) {
	html {
		color: #000;
		background: #fff;
	}
}
@media (prefers-color-scheme: dark) {
	html {
		color: #fff;
		background: #000;
	}
	img {
		opacity: .75;
		transition: opacity .5s ease-in-out;
	}
	img:hover {
		opacity: 1;
	}
}