/* Fancy CSS that I really enjoyed writing! All the colors! And responsiveness! And image that changes based on screen size! And everything!

Feel free to use as long as your end result looks different from what I did. */


/******************************************************************************
************************************ font! ************************************
******************************************************************************/

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


/******************************************************************************
************ make the picky people happy, no matter what they pick ************
******************************************************************************/

:root {
	--fg-alt-color: #661800; /*dunkelrot*/
 --hilight-bg-color: #ffa286; /*rosarot*/
 --button-bg-color: #4deaff; /*hellblau*/
	--fg-mid-contrast-color: #002c32; /*dunkelblau*/
	--fg-high-contrast-color: #000000; /*schwarz*/
	--accent-color: #ffa286; /*rosarot*/
 --main-bg-color: #fff8b5; /*blassgelb*/ 

/*small screen*/
	@media only screen and (width < 80em) {
		.decoration-image {
				content:url("page-resources/keyboard-long-lightmode.svg");
		}
	}
	/*big screen*/
	@media only screen and (width >= 80em) {
		.decoration-image {
				content:url("page-resources/keyboard-de-lightmode.svg");
		}
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--fg-alt-color: #99f3ff; /*hellhellblau*/
  --button-bg-color: #005a66; /*mitteldunkles blau*/
  --hilight-bg-color: #008799; /*mittelhelles blau */
		--fg-mid-contrast-color: #fff8b5; /*blassgelb*/
		--fg-high-contrast-color: #ffffff; /*weiß */
		--accent-color: #661800; /*dunkelrot */
  --main-bg-color: #002c32; /*dunkles blau */

/*small screen*/
	@media only screen and (width < 80em) {
		.decoration-image {
				content:url("page-resources/keyboard-long-darkmode.svg");
		}
	}
/*big screen*/
	@media only screen and (width >= 80em) {
			.decoration-image {
					content:url("page-resources/keyboard-de-darkmode.svg");
			}
 	}
	}
}


/******************************************************************************
********************** boxes, containers, areas and such **********************
******************************************************************************/

body {
	justify-content: center;
	display: grid;
	background-color: var(--main-bg-color);
	font-family: Atkinson-Hyperlegible, sans-serif;
	color: var(--fg-mid-contrast-color);
	font-size: 14;
}

main {
 padding: 10px;
 background-color: var(--main-bg-color);
}

header {
	text-align: center;
	margin-top: 5vh;
}

summary {
	margin-top: 0.5em;
	margin-left: 1em;
	margin-right: 1em;
	padding-bottom: 0.5em;
	cursor: pointer;
	color: var(--fg-high-contrast-color);
}

.div-summary {
	margin-left: 1em;
	margin-right: 1em;
	padding-left: 1em;
	padding-right: 1em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	border-left: 5px solid var(--accent-color);
	border-right: 5px solid var(--accent-color);
}

.decoration-image {
	object-fit: contain;
	width: 100%;
}

/******************************************************************************
******************************** text contents ********************************
******************************************************************************/

p {
	padding: 0px;
	margin: 0px;
	margin-bottom: 0.5em;
	color: var(--fg-mid-contrast-color);
}

.p-high-contrast {
	color: var(--fg-high-contrast-color);
}


h1, h2, h3 {
	font-family: Swanston, sans-serif;
}

h1 {
	font-size: 2.5em;
}

h2 {
	font-size: 2.1em;
}

h3 {
	font-size: 1.7em;
	margin-top: 1em;
	margin-bottom: 0.15em;
}

ul {
	padding-left: 1em;
	margin-top: 5px;
	margin-bottom: 5px;
}

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

.link-inline {
	text-decoration-style: dotted;
	text-decoration-line: underline;
}

details[open] > summary > .link-inline {
	text-decoration: none;
}

.link-lowkey {
	text-decoration-line: none;
}

.link-special {
	display: block;
	padding: 5px;
	margin-top: 10px;
	margin-bottom: 5px;
	margin-left: 5px;
	margin-right: 5px;
	border-radius: 1em;
	border-left: 5px solid var(--accent-color);
	border-right: 5px solid var(--accent-color);
	background-color: var(--button-bg-color);
	color: var(--fg-high-contrast-color);
	text-decoration-line: none;
	text-align: center;
}
.link-special:hover {
	background-color: var(--accent-color);
	color: var(--fg-alt-color);
	text-decoration-line: none;
}

.link-current {
	padding: 5px;
	margin-top: 10px;
	margin-bottom: 5px;
	margin-left: 5px;
	margin-right: 5px;
	border-radius: 1em;
	border-left: 5px solid var(--accent-color);
	border-right: 5px solid var(--accent-color);
	background-color: var(--accent-color);
	color: var(--fg-high-contrast-color);
	text-decoration-line: none;
}
.link-current:hover {
	background-color: var(--accent-color);
	color: var(--fg-alt-color);
}

.p-hilighted {
	color: var(--fg-high-contrast-color);
	background-color: var(--hilight-bg-color);
	padding: 0.5em;
	margin: 0.5em;
	text-align: center;
	border-radius: 1em;
	border-left: 5px solid var(--accent-color);
	border-right: 5px solid var(--accent-color);
}

.content-heading {
	margin-top: 1em;
	margin-bottom: 0.5em;
	color: var(--fg-mid-contrast-color);
}

#menu-heading {
	margin-bottom: 0.5em;
}

#page-heading {
	margin-bottom: 0.5em;
	margin-top: 0.5em;
	background-color: var(--button-bg-color);
	padding: 0.5em;
	border-radius: 1em;
	margin-left: 5px;
	margin-right: 5px;
	border-left: 5px solid var(--accent-color);
	border-right: 5px solid var(--accent-color);
	color: var(--fg-high-contrast-color);
	font-family: Swanston;
 
}

#page-heading:hover {
	background-color: var(--accent-color);
}

/******************************************************************************
************************************ other ************************************
******************************************************************************/

.visually-hidden {
	display: none;
}

.clickable-image {
}

/******************************************************************************
******************** all your screen size are belong to us ********************
******************************************************************************/

/* Small screen */

@media only screen and (width < 80em) {
 	
	body {
		grid-template-columns: 95vw;
	}
	
	nav {
		grid-row: 3;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		padding-left: 1em;
		padding-right: 1em;
	 flex-wrap: wrap;
	 text-align: center;
		
	}
	header {
		grid-row: 1;
	}
	main {
		grid-row: 4;
	}

	#aside-anfragen {
		grid-row: 5;
		margin-bottom: 1em;
		padding: 1em;
	}
	
	#aside-decoration {
		grid-row: 2;
		align-content: center;
		margin: auto;	
		padding: 1em;
	}



	#menu-heading {
		display: none;
	}
	
.decoration-image {
	object-fit: contain;
	width: 70vw;
	max-width: 30em;
	max-height: 70vh;
	}


	footer {
		grid-row: 6;
		margin-bottom: 5vh;
		width: 90vw;
		margin: auto;
	}

	.div-footer {
	text-align: left;
	padding: 1em;
	}
	
	#img-footer {
		max-height: 80vh;
		max-width: 75vw;
		object-fit: contain;
		display: block;
		margin: auto;
		border-radius: 1em;
	}

}


/* Big screen */

@media only screen and (width >=80em) {

	body {
		grid-template-columns: 55em 15em;
	}

	#aside-decoration {
		grid-column: 2;
		grid-row: 1;
		margin-top: 5vh;
		padding: 1em;
		max-width: 15em;
	}
	

	nav {
		grid-column: 2;
		grid-row: 2/span 2;
		align-content: center;
		max-width: 15em;
		padding: 0.5em;
		display: flex;
		flex-direction: column;
		align-items: left;
		justify-content: start;
		text-align: center;
	}
	
	header {
		grid-row: 1;
		grid-column: 1;
	}
	
	main {
		grid-column: 1;
		grid-row: 2;
	}
	
	#aside-anfragen {
		grid-row: 3;
		grid-column: 1;
		margin-bottom: 1em;
		padding: 1em;
	}

	footer {
		grid-row: 4;
		grid-column: 1;
		margin-bottom: 5vh;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.div-footer {
	flex-basis: 90%;
	padding: 1em;
	text-align: right;	
	}
	
	#img-footer {
		width: 100%;
		border-radius: 1em;
	}
}