@font-face {
	font-family: "def-font";
	src: url("/fonts/myfont.woff2");
}
/* source-code-pro-latin-ext-wght-normal */
/*
@font-face {
	font-family: "vult-font";
	src: url("/fonts/vt323-latin-400-normal.ttf");
}
*/



/* defaults (desktop like devices) */
:root {
	--color-background: #d3d3d3;
	--color-fancy: #404075;
	--color-link: #404095;
	--color-bg-b: #353538;
	--midgray: #777777;
	--color-footer: #aaaacc;

	--max-pic-width: 40%;

	--main-marg: 10%;
	--border-radius: 2rem;

	--def-font-s: 24px;
	--code-font-s: 0.9rem;
	--logo-fontsize: 1.2rem;
}

/* phone like devices --- css vars */
@media screen and (max-width: 980px) and (pointer:coarse) {
	:root {
		--main-marg: 5%;
	}
}



html {
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	font-family: def-font;
	font-size: var(--def-font-s);
	background-color: var(--color-bg-b);
	color: var(--color-facny);
}



/* Header */
header {
	margin-top: 3%;

	margin-right: var(--main-marg);
	margin-left: var(--main-marg);

	background-color: var(--color-background);

	padding: 0;

	border-radius: var(--border-radius);
	border-color: var(--color-fancy);

	color: var(--color-fancy);
	font-weight: bold;
}

header pre {
	padding-top: 1.5%;
	font-size: var(--logo-fontsize);
	text-align: center;
}

header ul {
	display: flex;
	justify-content: space-evenly;
	list-style: none;

	padding-bottom: 1.5%;
}

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

header a:hover {
	color: white;
}



/* Main */
main {
	display: flex;
	justify-content: center;

	display: block;
	background-color: var(--color-background);
	color: black;


	margin-left: var(--main-marg);
	margin-right: var(--main-marg);
	margin-bottom: 1.5%;
	margin-top: 3%;

	padding-top: 0.5%;
	padding-bottom: 2%;
	padding-left: 8%;
	padding-right: 8%;

	border-radius: var(--border-radius);
	border-color: var(--color-fancy);
}

main  h1, main  h3,
main  h2, main h4, main  h5, main  h6 {
	color: var(--color-fancy);
}

#text  h1, #text  h3,
#text  h2, #text h4, #text h5, #text h6 {
	margin-bottom: 0.5%;
}

#text p {
	margin-top: 0;
}

#title > h1 {
	text-align: center;
}
/* Elements */

/* Code */
pre.code {
	color: var(--color-background);
	font-size: var(--code-font-s);
	background-color: var(--color-bg-b);
	padding: var(--code-font-s);
	border-radius: var(--code-font-s);
	overflow-x: scroll;
}

/* Link */
a.link {
	color: var(--color-link);
}
a.link:hover {
	color: white;
}
/* Math Inline */
/* Math Newline */
/* Pictures */
.image-wrapper {
	background-color: var(--midgray);
	border-radius: var(--code-font-s);
	padding: var(--code-font-s);
	display: flex;
	justify-content: center;
}
img.image {
	max-width: var(--max-pic-width);
}
img.image-inline {
	max-width: var(--max-pic-width);
	margin: var(--code-font-s);
	border: var(--code-font-s) solid var(--midgray);
	border-radius: var(--code-font-s);
	float: left;
}
/* Quotes */



/* Footer */
footer {
	margin: 1.5%;
	color: var(--color-footer);
}

footer ul {
	list-style: none;
	display: flex;
	justify-content: space-evenly;
}

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

footer a:hover {
	color: white;
}



/* phone like devices --- literals */
@media screen and (max-width: 980px) and (pointer:coarse) {
	:root {
	}
}

.textimg {
	height: 0.8em;
}

div.warning-outer {
	color: red;
	/*color: var(--warning-color);*/
}

div.warning-outer {
}
/* Quotes */