@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);
}

.testing {
	border: 5px solid red;
	background-color: green;
}


.visually-hidden {
	display: none;
}

: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);
	--warn-text-col: var(--brick-ember);
}

@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);
 --warn-text-col: var(--brick-pink);
	
	}
#img-logo{
		content:url("computerkätzchen-dark.svg");
	}	

}

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


body {
	font-size: 120%;
}


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

#img-logo {
	object-fit: contain;
	display: block;
	margin: auto;
	width: 100%;
	max-height: 65vh;
	max-width: 15em;
	border-radius: 0.5em;
}

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

.illustration{
	width: 50%;
	max-width: 10em;
	max-height: 7em;
	display: block;
	background-color: var(--h2-col);
	padding: 1em;
	margin: 1em auto;
	border-radius: 1em;
	box-shadow: 0px 0px 5px var(--a-col);
}

.catalog-element {
	width: 40%;
	max-width: 10em;
	max-height: 10em;
	display: block;
	justify-content: space-around;
	padding: 0.5em;
	border-radius: 0.5em;
	border: 3px solid var(--bg-shadow-col);
	object-fit: contain;
}

.catalog-container {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.catalog-element:hover{
	background-color: var(--hilight-bg-col);
}
.catalog-img {
	width: 100%;
	margin: 0px auto;
	padding: 0px;
	display: block;
}

.clickable-img:hover {
	background-color: var(--hilight-bg-col);
}
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);
	font-size: 66%;
}
section {
	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-lowkey 
{
	padding: 0px;
	text-decoration: none;
	border-radius: 0px;
}
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;
}

.a-lowkey:hover {
	padding: 0px;
	text-decoration: none;
	border-radius: 0px;
}
h1 {
	margin: 0px;
}
h2 {
	color: var(--h2-col);
	border-radius: 0.5em;
	margin: 0.25em;
	text-align: center;
}
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;
}

#rss-container {
	margin:auto;
	grid-row: 4;
	grid-column: 1;
	display: block;
}

.required {
	color: var(--warn-text-col);
}

input {
	background-color: var(--bg-col);
	font-size: 100%;
	margin: 0.1em;
	border: 2px solid var(--font-col);
	color: var(--font-col);
	border-radius: 0.25em;
}

input[type="submit"] {
	color: var(--a-col);
	border: none;
	background-color: none;
	padding-left: 0.125em;
	padding-right: 0.125em;
	border-radius: 0.25em;
	text-decoration: underline;
	text-decoration-style: dotted;

}

input[type="submit"]: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;
}