html,
body {
	margin: 0;
	box-sizing: border-box;
	background-color: var(--background);

	font-family: var(--font);
	font-size: var(--text);
	line-height: 1.4;
	overflow-x: hidden;
}

h1,
h2,
h3 {
	font-family: var(--font);
	font-weight: bold;
	font-style: italic;
}

h1 {
	font-size: var(--title);
}
h2,
h3 {
	font-size: var(--text);
}

a {
	color: currentColor;
}

code,
pre {
	font-family: "Necto";
	border: none;
}

input {
	font-family: var(--font);
	font-size: var(--text);
	padding: 6px;
	border: 1px solid currentColor;
	border-radius: 6px;
}

button,
input[type="submit"] {
	font-family: var(--font);
	font-size: var(--text);
	font-weight: bold;
	font-style: italic;
	background-color: white;
	border: 1px solid currentColor;
	padding: 6px;
	border-radius: 12px;
	transform: scale(1);
	transition: transform 0.3s ease-out;
	cursor: pointer;
}

button,
input[type="submit"]:active {
	transform: scale(0.95);
	transition: transform 0.1s ease-in;
}

/* STICKER CONTAINER */

#sticker-container {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;

	pointer-events: none;

	z-index: 100;

	min-height: 100vh;
	height: 100%;
}

#sticker-fix-container {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;

	pointer-events: none;

	z-index: 300;

	min-height: 100vh;
	height: 100%;
}

.sticker {
	position: absolute;
	user-select: none;
	border: 1px solid currentColor;
	border-radius: var(--radius);
	white-space: nowrap;
	background-color: white;
	font-size: 18px;
	padding: 0 6px;
	box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
	text-decoration: none;
}

*[data-sticker] {
	position: relative;
}

/* HEADER AND NAV */

.page--header {
	position: fixed;
	z-index: 200;

	top: 60px;
	left: 50%;
	transform: translate(-50%, 0);

	width: calc(100% - 2 * var(--app-margin));
	max-width: var(--content-width);
	padding: 0 var(--app-margin);

	display: flex;
	justify-content: center;
}

header {
	flex-grow: 1;
	flex-shrink: 1;

	display: flex;
	flex-direction: column;
	justify-content: center;

	border: 1px solid currentColor;
	border-radius: var(--radius);
	background-color: var(--background);
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
	height: 48px; /* comment this in page with multiple elements in the header */
	flex-basis: 48px;

	padding: 0px 12px;
}

.page--header .title {
	/* flex-grow: 0; */
	/* flex-shrink: 1; */
	/* line-height: 1; */
	margin: 0;
}

.page--header .subtitle {
	line-height: 1;
	margin: 6px 0;
}

nav {
	margin-left: 12px;
}

.page--header nav a {
	display: inline-block;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid currentColor;
	background-color: var(--background);
	margin: 0;
}

.page--header nav a + a {
	margin-left: 6px;
}

/* FOOTER */

.page--footer {
	position: relative;
	bottom: var(--app-margin);

	width: calc(100% - 2 * var(--app-margin));
	max-width: var(--content-width);
	padding: 0 var(--app-margin);

	left: 50%;
	transform: translate(-50%, 0);
}

footer {
	margin-top: 90px;
	margin-bottom: 30px;

	padding: 6px 12px;
	border: 1px solid currentColor;
	border-radius: var(--radius);

	font-weight: bold;
	font-style: italic;
}

/* MAIN CONTENTS */

.page--content {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: var(--app-margin);
	align-items: baseline;

	max-width: var(--content-width);
	padding: 0 var(--app-margin);
	margin: 0 auto;
	margin-top: 180px;
}

.page--content p {
	grid-column-end: span 2;

	margin: 0;

	text-indent: calc(var(--text) * 2);
	line-height: 1.4;
}

.page--content h2 {
	font-size: var(--title);
	margin: 0;
	margin-top: calc(var(--app-margin) * 3);
	margin-bottom: var(--app-margin);
}

.page--content > * + * {
	margin-top: var(--app-margin);
}

.page--content img {
	grid-column-end: span 2;
	width: 100%;
	margin: 60px 0;
	border-radius: var(--radius);
	border: 1px solid currentColor;
}

/* GRID functional classes sorry this is not good at all but.... */

.c2 {
	grid-column-end: span 2;
}

.s1 {
	grid-column-start: 1;
}

.s2 {
	grid-column-start: 2;
}

/* Medium screens */

@media (max-width: 991.98px) {
	/* HEADER MOBILE */

	.page--header {
		top: 30px;
	}

	header {
		min-height: 42px;
	}

	.page--header .title {
		font-size: 24px;
	}

	.page--header .subtitle {
		font-size: 21px;
	}

	.page--header nav a {
		width: 48px;
		height: 48px;
	}

	/* MAIN CONTENTS */

	.page--content {
		margin-top: 120px;
	}
}

@media (max-width: 767.98px) {
	.page--content {
		display: block;
	}

	.page--content h2 {
		margin-top: 60px;
	}
}