@font-face { /* alright and readable font, but doesnt support cyrillic */
	font-family: AtkinsonHyperlegible;
	src: url(/fonts/AtkinsonHyperlegible-Regular.ttf);
}

body {
	/*font-family: AtkinsonHyperlegible;*/
	font-family: Arial;
	background-color: #1f1f1f;
	color: #eeeeee;
	margin: 0px;
	border: 0px;
	padding: 0px;
}

a:link, a:visited, a:active {
	color: #afafaf;
	text-decoration: none;
	transition: 0.1s;
}

a:hover {
	color: #eeeeee;
	transition: 0.1s;
}

.icon {
	width: 48px;
	height: 48px;
	margin: 0px;
	padding: 0px;
}

li.menuitem {
	display: inline-block;
	padding-right: 16px;
}

.menuitem {
	height: 48px;
	vertical-align: middle;
}

.menubar {
	background-color: #2f2f2f;
	margin: 0px;
	padding: 8px;
	line-height: 48px;
	width: calc(100% - 16px);
}

.content {
	margin: 8px;
}

div.project {
	padding: 8px;
	margin-top: 8px;
	margin-bottom: 8px;
	background-color: #2f2f2f;
	height: max-content;
}

.project {
	margin: 0px;
}

h2.project {
	margin-bottom: 16px;
}

img.project {
	float: left;
	margin-right: 8px;
	width: 8em;
	height: 8em;
}

div.projecttext {
	min-height: 128px;
}

img.presentation {
	max-width: 100%;
	max-height: 80vh;
}

img.presentation[naturalHeight=0] {
	display: block;
	padding-bottom: 80vh;
}

inline {
	display: inline;
}

ul.list {
	padding-left: 0px;
}

ul.list > li {
	list-style-type: none;
}

ul.list > li:before {
	content: "-";
	padding-left: 2ch;
	padding-right: 2ch;
}

textarea, input {
	background-color: #3f3f3f;
	color: #eeeeee;
}

details.index {
	background-color: #3f3f3f;
	padding: 8px;
}

div.indexscroll {
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;
	max-width: 100%;
	/*max-height: 144px;*/
}

div.index {
	display: inline-block;
	margin-right: 8px;
	margin-top: 8px;
	width: 128px;
	height: 128px;
}

img.index {
	max-width: 128px;
	max-height: 128px;
	object-fit: contain;
}