@charset "UTF-8";

html
{
	scroll-behavior: smooth;
}

body
{
	background: var(--pp-background);
	color: var(--pp-color);
	
	font-family: var(--pp-font-family);
	font-weight: var(--pp-font-weight);
	font-size: var(--pp-font-size);
	
	margin-top: var(--pp-header-full-size-height);

	transition: margin-top var(--pp-transition-default);
}

html,
body
{
	line-height: 1;
}

h1, h2, h3, h4, h5, h6
{
	font-family: var(--pp-font-family);
	margin: 0;
}

body.scrolling
{
	margin-top: var(--pp-header-scroll-size-height);
}

body.no-scrolling .no-scrolling-hide
{
	display: none;
}

body.scrolling .scrolling-hide
{
	display: none;
}



/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* HEADER */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#header
{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--pp-header-full-size-height);
	padding: var(--pp-header-full-size-padding) 0;
	
	background: var(--pp-header-background);
	color: var(--pp-header-color);
	
	font-size: var(--pp-header-font-size);
	
	z-index: var(--pp-zindex-header);

	transition: height var(--pp-transition-default),
				padding var(--pp-transition-default);
}

body.scrolling #header
{
	height: var(--pp-header-scroll-size-height);
	padding: var(--pp-header-scroll-size-padding);
}



/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* FOOTER */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#footer
{
	background: var(--pp-footer-background);
	color: var(--pp-footer-color);
	
	font-size: var(--pp-footer-font-size);
	
	z-index: var(--pp-zindex-footer);
}