@font-face {
	font-family: 'montserrat-black';
	src: url('fonts/montserrat-black-webfont.eot');
	src: url('fonts/montserrat-black-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/montserrat-black-webfont.woff') format('woff'),
		 url('fonts/montserrat-black-webfont.ttf') format('truetype'),
		 url('fonts/montserrat-black-webfont.svg#open_sanslight') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'montserrat-bold';
	src: url('fonts/montserrat-bold-webfont.eot');
	src: url('fonts/montserrat-bold-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/montserrat-bold-webfont.woff') format('woff'),
		 url('fonts/montserrat-bold-webfont.ttf') format('truetype'),
		 url('fonts/montserrat-bold-webfont.svg#open_sanslight') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'montserrat-extrabold';
	src: url('fonts/montserrat-extrabold-webfont.eot');
	src: url('fonts/montserrat-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/montserrat-extrabold-webfont.woff') format('woff'),
		 url('fonts/montserrat-extrabold-webfont.ttf') format('truetype'),
		 url('fonts/montserrat-extrabold-webfont.svg#open_sanslight') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'montserrat-extralight';
	src: url('fonts/montserrat-extralight-webfont.eot');
	src: url('fonts/montserrat-extralight-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/montserrat-extralight-webfont.woff') format('woff'),
		 url('fonts/montserrat-extralight-webfont.ttf') format('truetype'),
		 url('fonts/montserrat-extralight-webfont.svg#open_sanslight') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'montserrat-light';
	src: url('fonts/montserrat-light-webfont.eot');
	src: url('fonts/montserrat-light-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/montserrat-light-webfont.woff') format('woff'),
		 url('fonts/montserrat-light-webfont.ttf') format('truetype'),
		 url('fonts/montserrat-light-webfont.svg#open_sanslight') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'montserrat-medium';
	src: url('fonts/montserrat-medium-webfont.eot');
	src: url('fonts/montserrat-medium-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/montserrat-medium-webfont.woff') format('woff'),
		 url('fonts/montserrat-medium-webfont.ttf') format('truetype'),
		 url('fonts/montserrat-medium-webfont.svg#open_sanslight') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'montserrat-regular';
	src: url('fonts/montserrat-regular-webfont.eot');
	src: url('fonts/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/montserrat-regular-webfont.woff') format('woff'),
		 url('fonts/montserrat-regular-webfont.ttf') format('truetype'),
		 url('fonts/montserrat-regular-webfont.svg#open_sanslight') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'montserrat-semibold';
	src: url('fonts/montserrat-semibold-webfont.eot');
	src: url('fonts/montserrat-semibold-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/montserrat-semibold-webfont.woff') format('woff'),
		 url('fonts/montserrat-semibold-webfont.ttf') format('truetype'),
		 url('fonts/montserrat-semibold-webfont.svg#open_sanslight') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'montserrat-thin';
	src: url('fonts/montserrat-thin-webfont.eot');
	src: url('fonts/montserrat-thin-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/montserrat-thin-webfont.woff') format('woff'),
		 url('fonts/montserrat-thin-webfont.ttf') format('truetype'),
		 url('fonts/montserrat-thin-webfont.svg#open_sanslight') format('svg');
	font-weight: normal;
	font-style: normal;
}

:root {
  --highlight: #dd4444; /* formerly #dd0000 */
  --text: #000;
  --text-inverted: #fff;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

html {
	background: var(--text-inverted);
}

body {
	position: relative;
	width: 21cm;
	margin: 0 auto;
	padding: 0;
}

a {
	color: var(--text);
	text-decoration: none;	
}

page {
	display: block;
	margin: 20px;
	padding: 0;
	width: 21cm;
	height: 29.7cm;
	overflow: visible;
	border: 4px solid #eee;
}

header {
	position: relative;
	width: 100%;
	height: 5cm;
	background: var(--highlight);
	padding: 0 0 0.5cm;

	img {
        display: block;
        position: absolute;
        top: 0.5cm;
        right: 0.5cm;
        filter: grayscale(100%);

		object-fit: cover;
	    object-view-box: inset(-8% 10% 10% 10%);

        height: 4cm;
        width: 4cm;
        overflow: hidden;
        border-radius: 50%;
        border: 0.3cm solid white;
        
        /* Optional: Add a background color to fill gaps */
        background-color: purple;
    }

	h1 {
		display: inline-block;
		margin: 0;
		padding: 1.2cm 1.2cm 0;
		font-family: montserrat-extrabold,sans-serif;
		font-size: 1.8cm;
		color: var(--text-inverted);
	}

	p {
		font-family: montserrat-light,sans-serif;
		font-size: 0.7cm;
		color: var(--text-inverted);
		padding: 0.7cm 1.2cm 1cm;
	}
}

.contact-details {
	p {
		font-family: montserrat-medium,sans-serif;
		font-size: 0.35cm;
		color: var(--text);
		padding: 0.5cm 1cm 0;
		text-align: center;
	}
}

.contact-details + main {
    margin-top: 1.2cm;
}

main {
	padding: 0 1.2cm 0;

	h2 {
		text-align: center;
		font-family: montserrat-light,sans-serif;
		font-size: 0.5cm;
		background: var(--highlight);
		padding: 0.3cm;
		color: var(--text-inverted);
		margin: 1.2cm 0 0.5cm;
	}

	ul,
	ul ol {
		margin: 0.5cm 0 0.7cm 0.5cm;
	}

	li,
	p {
		font-family: montserrat-light,sans-serif;
		font-size: 0.4cm;
		line-height: 0.55cm;
		color: var(--text);
		margin: 0.5cm 0;
	}

	li {
		margin: 0.2cm 0;

		> ul {
			margin: 0.1cm 0 0.1cm 0.5cm;

			li {
				margin: 0.15cm 0;
			}
		}
	}

	> ol {
		list-style: none;

		li {
			margin: 0.4cm 0 0.2cm;
		}
	}

	strong {
		font-family: montserrat-bold,sans-serif;
		font-weight: bold;
	}

	span {
		color: var(--text-inverted);
		filter: brightness(0) invert(1);
		margin-left: 0.5cm;
	}
}

/* Print only styles */
@page {
	margin: 0;
}

@media print {
	page {
		margin: 0;
		overflow: hidden;
		border: none;
	}
}