@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);
}

html,
body {
	line-height: 1;
}

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

body.scrolling {
}

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-top: var(--pp-header-full-size-padding-top);
	padding-bottom: var(--pp-header-full-size-padding-bottom);

	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);

	text-transform: uppercase;
}

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);
}