@font-face {
 font-family: Skye4Business;
 src: url(../fonts/Skye4Business.otf);
}
@font-face {
	font-family: Atkinson-Hyperlegible;
	src: url(../fonts/Atkinson-Hyperlegible-Regular-102.otf);
}
@font-face {
	font-family: Atkinson-Hyperlegible;
	font-weight: bold;
	src: url(../fonts/Atkinson-Hyperlegible-Bold-102.otf);
}
@font-face {
	font-family: Atkinson-Hyperlegible;
	font-style: italic;
	src: url(../fonts/Atkinson-Hyperlegible-Italic-102.otf);
}


:root {


	--brick-ember: #D10000;
	--brick-ember-lighter: #ff0202;
	--brick-ember-darker: #b00000;
	--bright-amber: #ffd019;
	--bright-amber-lighter: #ffd83e;
	--bright-amber-darker: #ecbc00;
	--brick-pink: #ff9191;
	--brick-pink-lighter: #ffb7b7;
	--brick-pink-lighter-lighter: #ffd9d9;
	--dodger-blue: #058fff;
	--dodger-blue-lighter: #2da1ff;
	--dodger-blue-lighter-lighter: #58b4ff;
	--dodger-blue-darker: #0078da;
	--dodger-blue-darker-darker: #004f90;
	--ink-black: #001011;
	--ink-black-lighter: #00585e;
	--ink-black-darker: #000c0d;
	--lime-moss: #7dB800;
	--lime-moss-lighter: #a1ec00;
	--lime-moss-darker: #699a00;
	--lime-moss-very-light: #c1ff3b;


	--bg-col: var(--lime-moss-very-light);
	--bg-shadow-col: var(--ink-black-lighter);
	--font-col: var(--ink-black);
	--h1-col: var(--brick-ember-darker);
	--h2-col: var(--dodger-blue-darker);
	--hilight-bg-col: var(--brick-pink-lighter);
	--link-frame-col: var(--brick-pink);
	--off-bg-col: var(--lime-moss);
	--a-col: var(--dodger-blue-darker-darker);
}

@media (prefers-color-scheme: dark) {
	:root {
	--bg-col: var(--ink-black);
	--bg-shadow-col: var(--lime-moss);
	--off-bg-col: var(--ink-black-lighter);
	--font-col: var(--dodger-blue-lighter-lighter);
	--h1-col: var(--brick-ember);
	--h2-col: var(--lime-moss);
	--hilight-bg-col: var(--brick-ember-darker);
	--link-frame-col: var(--brick-pink);
	--a-col: var(--brick-pink-lighter);

	
	}
/*#img-logo{
		content:url("../computerkätzchen-dark.svg");
	}*/	

}

body {
	display: grid;
	grid-template-columns: fit-content(25em);
	margin-left: 5%;
	margin-right: 5%;
	gap: 0em;
	justify-content: center;
	background-color: var(--off-bg-col);
	color: var(--font-col);
	font-family: Skye4Business, sans-serif;
	hyphens:auto;
}


@media only screen and (min-width: 600px) {
		body{font-size: 120%;}
		}
@media only screen and (min-width: 800px) {
		body{font-size: 140%;}
		}

@media only screen and (min-width: 1000px) {
		body{font-size: 160%;}
		}

@media only screen and (min-width: 1200px) {
		body{font-size: 180%;}
		}



header{
	grid-row: 1;
	grid-column: 1;
	border: 0px solid red;
	background-color: var(--bg-col);
	border-radius: 1em;
	padding: 0em;
	margin-top: 0.75em;
	margin-bottom: 0.75em;
	box-shadow: 0px 0px 5px var(--bg-shadow-col);
	hyphens: none;
	word-break: none;
	object-fit: contain;
}

#img-logo {
	object-fit: contain;
	display: block;
	margin: 1em 0.5em 0em 1em;
	width: 70%;
	max-height: 50vh;
	max-width: 12em;
	border-radius: 0.5em;
	float: none;
}

#info {
	margin: 1em 2em 1em 0.5em;
	text-align: right;
}

#div-logo:hover {
	background-color: var(--hilight-bg-col);
}

aside {
		display: flex;
		justify-content: space-between;
		flex-shrink: 1;
}

.img-full-width {
	width: 100%;
	object-fit: contain;
	display: block;	
	padding: 0em;
	margin: auto;
	margin-top: 0px;
	border-radius: 0em;
	float: none;
}

.fill {
	padding: 0em;
}

.img-fill {
	border-radius: 1em;
}

.illustration{
	display: block;
	margin: auto;
	width: 50%;
 
}

.illustration-breit {
	width: 90%;
}

.illustration-klein {
		max-width: 10em;
		max-height: 7em;
}

main {
	grid-column: 1;
	grid-row: 2;
	border: 0px solid green;
	border-radius: 1em;
	margin-top: 0.75em;
}
footer {
	grid-column: 1;
	grid-row: 3;
	border: 0px solid blue;
	background-color: var(--bg-col);
	padding: 1em;
	margin-bottom: 0.75em;
	border-radius: 1em;
	box-shadow: 0px 0px 5px var(--bg-shadow-col);
}
section {
object-fit: contain;
	border: 0px dotted black;
	background-color: var(--bg-col);
	padding: 1em;
	border-radius: 1em;
	margin-bottom: 1.5em;
	box-shadow: 0px 0px 5px var(--bg-shadow-col);
}
h1 {
	color: var(--h1-col);
	margin-top: 0px;
	border-radius: 0.5em;
	padding: 0.25em;
	/*text-shadow: 0px 0px 5px var(--bg-shadow-col);*/
}
a {
	color: var(--a-col);
	padding-left: 0.125em;
	padding-right: 0.125em;
	border-radius: 0.25em;
	text-decoration: underline;
	text-decoration-style: dotted;
}
a:hover {
	background-color: var(--hilight-bg-col);
	border-radius: 0.25em;
	padding-left: 0.125em;
	padding-right: 0.125em;
	text-decoration: underline;
 text-decoration-style: dotted;
}
h1 {
	margin: 0px;
}
h2 {
	color: var(--h2-col);
	border-radius: 0.5em;
	margin: 0.25em;
	text-align: center;
}
h1, h2, h3 {
	font-family: Skye4Business, sans-serif;
}
p {
	margin-top: 0.1em;
	margin-bottom: 0.9em;
}
blockquote > p {
	margin-top: 0.1em;
	margin-bottom: 0.1em;
}

ul {
	margin-top: 0em;
	margin-bottom: 0.5em;
}

li {
	margin-top: 0em;
	margin-bottom: 0.5em;
}
.p-center {
	text-align: center;
}


.info-page, footer
{
	font-family: Atkinson-Hyperlegible, sans-serif;
	font-size: 85%;
}