@font-face {
    font-family: 'Baskervville-Regular';
    src: url('../fonts/Baskervville-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Baskervville-Regular';
    src: url('../fonts/EBGaramond-VariableFont_wght.ttf') format('truetype');
    unicode-range: U+30-39;
}
/*@font-face {
    font-family: 'inferi-dante';
    src: url('../fonts/inferi-dante.otf') format('opentype');
}*/


/*@font-face {
    font-family: 'EBGaramond';
    src: url('../fonts/EBGaramond-VariableFont_wght.ttf') format('truetype');
}*/


		.section,a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}.section,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav{display:block}

		

		section#first {
			height: 100vh;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
		section#second {
			height: auto;
			width: 100%;
			position: absolute;
			top: 100vh;
			left: 0;
		}

		#muster {
			height: 300vh;
			width: 300vw;
			position: fixed;
			top: -100%;
			left: -100%;

			background-image: url("data:image/svg+xml;utf8,<svg id='Ebene_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28.3 22.7'><rect width='14.2' height='11.3'/><rect x='14.2' y='11.3' width='14.2' height='11.3'/></svg>");
			background-size: 20px;

			z-index: -3;
			animation:spin 300s linear infinite;
		}

		@keyframes spin {
			from{transform:rotate(0deg)}
			to{transform:rotate(360deg)}	
		}


		#background {
			background-image: url("../files/ai_hot-mess/orchidee-1.png");
			background-size: contain;
			background-position: right center;
			background-repeat: no-repeat;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -2;
		}
		#foreground {
			background-image: url("../files/ai_hot-mess/hot-mess_schriftzug.svg");
			background-size: contain;
			background-position: left center;
			background-repeat: no-repeat;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}


		body {
			font-family: Baskervville-Regular, serif;
			font-size: 15px;
			line-height: 1.25;
			color: blue;
		}
		h1 {
			font-size: 2.3em;
			-webkit-font-smoothing: antialiased;
		}
		h2 {
			font-size: 2.25em;
		}
		p, nav {
			-webkit-hyphens: auto;
			-moz-hyphens: auto;
			-ms-hyphens: auto;
			hyphens: auto;
			margin-bottom: 1.25em;
		}
		.big {
			margin-bottom: 3em;
		}

		av li:first-of-type:before {
		    content: unset;
		    display: unset;
		    cursor: unset;
		}


		a {
			color: blue;
			text-decoration: none;
		}
		a:hover {
			color: black;
		}

		sup {
			vertical-align: super;
			vertical-align: top;
			font-size: 0.6em;
		}

		.small sup {
			font-size: 0.9em;
		}

		#wueste {
			grid-area: wueste;
		}

		#wueste img {
			max-width: 100%;
			height: auto;
			display: block;
		}

		#text {
			padding: 0;
			background-color: #ffffff;
			grid-area: text;

		}

		#text>div {
			padding: 12vh 4vw;

			column-count: 2;
			column-gap: 30px;
			max-width: 510px;
		}

		p.small {
		    font-size: .75em;
		    display: inline-block;
		    max-width: 100%;
		}
		/*.small a {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			max-width: 100%;
    		display: inline-block;
		}*/
		i {
		    font-style: italic;
		}

		section#second {
		  display: grid;
		  grid-template-columns: 1fr 1fr;
		  grid-template-areas: 
		    "wueste text";
		  grid-gap: 0px;
		}


		@media (max-width:700px) {
			section#second {
			  display: grid;
			  grid-template-columns: 1fr;
			  grid-template-rows: auto;
			  grid-template-areas: 
			    "text"
			    "wueste";
			  grid-gap: 0px;
			}
		}

		@media (max-width:350px) {
			#text>div {

				column-count: 1;
				column-gap: unset;
				max-width: 100%;
			}
		}
		@media (prefers-color-scheme: dark) {



		}

		@media (forced-colors: active) {
		  * {
		    forced-color-adjust: none;
		  }
		}


		#container {
			display: block;
		}