@import "screen.fonts.css";
@import "screen.reset.css";
@import "screen.properties.css";
@import "screen.elements.css";
@import "screen.classes.css";
@import "screen.animations.css";
body{
	background: var(--color-background-secondary);
	font-size: var(--font-size-fixed);
}
main{
	color: var(--scheme-default-body-foreground-color);
	min-height: 80vh;
}
/* MARK: siteFooter #sf*/
#sf{
	padding-inline:var(--safe-inline-gutter-width);
}
#sf-copyright{
	color: var(--color-foreground-secondary);
	font-size: 1.2rem;
	line-height: 1.6rem;
	padding-block: var(--gutter-half-width);
}
/* MARK: siteHeader #sh*/
#sh{
	background-color: var(--color-message-success);
	color: white;
	height: 4.8rem;
	/*left: 0;*/
	padding-inline: var(--safe-inline-gutter-width);
	position: sticky;
	top: 0;
	/*top: 0;
	width: 100vw;
	*/
}
#sh-header{
	display: grid;
	grid-template-areas: 
		"logo heading01"
		"logo heading02";

	grid-template-columns: auto 1fr;
}
#sh-heading01{
	align-self: end;
	font-size: 1.6rem;
	font-weight: 300;
	grid-area: heading01;
	line-height: 1.6rem;
	justify-self: start;
}
#sh-heading02{
	align-self: start;
	grid-are: heading02;
	font-size:1.3rem;
	font-weight: 300;
	line-height: 1.6rem;
	justify-self: start;
	opacity: 0.8;
}
#sh-logo{
	display: block;
	grid-area:logo;
	height: 4.8rem;
	max-height: 4.8rem;
	max-width: 4.8rem;
	width: 4.8rem;
}