@font-face {
	font-family: ia-quattro;
	src: url(Fonts/iAWriterQuattroS-Regular.woff2);
}

@font-face {
	font-family: ia-quattro;
	src: url(Fonts/iAWriterQuattroS-Bold.woff2);
	font-weight: bold;
}

@font-face {
	font-family: ia-quattro;
	src: url(Fonts/iAWriterQuattroS-Italic.woff2);
	font-style: italic;
}

@font-face {
	font-family: ia-quattro;
	src: url(Fonts/iAWriterQuattroS-BoldItalic.woff2);
	font-weight: bold;
	font-style: italic;
}

body {
	--bg: #0f0d0c;
	--text_col: #b0b0b0;

	font-family: 'ia-quattro', sans-serif;
	font-size: 12pt;
	line-height: 1.8;
	display: block;


	background-color: var(--bg);
	color: var(--text_col);
}


header {
	width: 100%;
	margin: 5% 0 0 0;
	display: flex;
}

header h1 {
	align-self: center;
	margin: auto;
}

#lang-choice {
	margin: auto;
	display: flex;
	align-content: space-evenly;
}

#lang-choice button {
	background-color: transparent;
	border: none;
	color: var(--text_col);
}

#lang-choice button.active {
	color: #d0d0d0;
}

#lang-choice button:first-child {
	padding-left: 0;
}

#content {
	max-width: 80ch;
	padding: 1ch 10ch;
	margin: 0 auto;
}

#flex {
	display: flex;
	align-items: flex-start;
	gap: 30px;
}

@media (max-width: 786px) {
	#flex {
		flex-direction: column;
	}

	#profile_pic {
		width: 100%;
		margin: auto;
	}

	body {
		font-size: 11pt;
	}

	#content {
		padding: 1ch 3ch;
	}
}

p {
	text-align: justify;
}

a {
	color: var(--text_col);
}

#flex .text p:first-of-type {
	margin-top: 0;
}

#flex #profile_pic {
	flex: 1;
	max-width: 300px;
	display: flex;
	justify-content: center;
}


#flex .text {
	flex: 2;
}

#profile_pic img {
	width: 100%;
	max-width: 300px;
	height: auto;
	border: 10px solid #3338;
}

a {
	background-color: #222;
	padding: 3px 5px;
	border-radius: 2px;
	text-decoration: None;
	font-weight: bold;
}

footer {
	margin-top: 25ex;
}

footer div {
	display: flex;
	justify-content: center;
}

footer a {
	background-color: transparent;
	font-weight: normal;
	padding: 0;
}

.not-displayed {
	display: none;
}


ul.links {
	padding-left: 0;
}

ul.links li {
	display: inline;
	list-style-type: none;
}