@font-face {
        font-family: "Goudy Initialen";
        src: url("/assets/GoudyInitialen.ttf") format("truetype");
        font-weight: normal;
        font-style: normal;
        font-display: swap;
}

p {
	margin: 6px;
}

html {
	box-sizing: border-box;
	--left-column-width: 250px;
	--right-column-width: 200px;
	--page-header-height: 120px;
	--page-footer-height: 120px;
	--content-padding: 10px;
}
*, *::before, *::after {
	box-sizing: inherit;
}

body {
	margin: 20px auto;
	max-width: 1600px;

	display: grid;
	grid-template: var(--page-header-height) auto var(--page-footer-height) / var(--left-column-width) auto var(--right-column-width);
	grid-template-areas:
		"header header header"
		"left content right"
		"footer footer footer";
}

#contentColumn {
	grid-area: content;
}
#leftColumn {
	grid-area: left;
}
#rightColumn {
	grid-area: right;
}
#header {
	grid-area: header;
}
#footer {
	grid-area: footer;
}

#header,
#contentColumn,
#leftColumn,
#rightColumn,
#footer {
	padding: var(--content-padding);
	display: grid;
	grid-gap: var(--content-padding);
}

#header {
	grid-template: 1fr 1fr / calc(var(--left-column-width) - var(--content-padding)) auto calc(var(--right-column-width) - var(--content-padding));
	grid-template-areas:
		"header-left header-top header-right"
		"header-left header-bottom header-right";
}
#headerLeft {
	grid-area: header-left;
    font-family: "Goudy Initialen";
}
#headerRight {
	grid-area: header-right;
}
#headerTopSection {
	grid-area: header-top;
}
#headerBottomSection {
	grid-area: header-bottom;
}

#contentColumn,
#leftColumn,
#rightColumn {
	align-content: start;
	grid-template-rows: auto 1fr auto;
}
#footer {
	grid-template-rows: 1fr 1fr;
}