@import url('styles-01.css');
@import url('styles-02.css');
@import url('styles-03.css');
@import url('styles-04.css');
@import url('styles-05.css');

html, body		{	width: 100.0%; height: 100.0%; line-height: 1.2; -webkit-text-size-adjust: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
	  body		{	font-family: "sofo-light", Courier, monospace; overflow: hidden; }
		*		{	list-style: none; margin: 0; padding: 0; border: 0; border-style: solid; font-style: normal; font-weight: normal; transition: all 600ms ease-in-out 0ms; }
img, ul, video	{	display: block; }
		  main	{	position: relative; display: block; z-index: 2; width: 100.0%; }

@font-face 	{   font-family: 'sofo-light';  src: url('resources/fonts/Futura-Light.woff2') format('woff2'); }
@font-face 	{   font-family: 'sofo-book';   src: url('resources/fonts/Futura_Book.woff2') format('woff2'); }
@font-face 	{   font-family: 'sofo-black';  src: url('resources/fonts/Futura-ExtraBlack-Condensed.woff2') format('woff2'); }
@font-face 	{   font-family: 'sofo-motto';  src: url('resources/fonts/Joost-Bold.woff2') format('woff2'); }

@media screen and (min-width : 0) and (max-width : 767px)		{	body {	font-size: 2.00vmin; }}
@media screen and (min-width : 768px) and (max-width : 1024px) 	{	body {	font-size: 1.80vmin; }}
@media screen and (min-width : 1025px) 							{	body {	font-size: 1.80vmin; }}

a		{	text-decoration: none; font-size: 1.05em; }
a:hover	{	text-decoration: underline; }

h1	{	font-family: 'sofo-book', Courier, monospace; }
h2	{	font-family: 'sofo-book', Courier, monospace; margin-bottom: 0.60em; }

#motto:before	{	font-family: 'sofo-motto', Courier, monospace; line-height: 1; letter-spacing: -0.02em; }
#motto:after	{	content: ''; display: inline-block; background: url('resources/img/g-murmel_black.svg') no-repeat center; background-size: cover; }

#link > a		{	font-family: 'sofo-black', Courier, monospace; }

p + p	{	margin-top: 0.60em; }
	p	{	font-size: 0.90em; line-height: 1.4; 
			-ms-hyphens: 		auto;	-ms-hyphenate-limit-chars: 		auto 4;	-ms-hyphenate-limit-lines: 		4;
		    -moz-hyphens:		auto;	-moz-hyphenate-limit-chars: 	auto 4;	-moz-hyphenate-limit-lines: 	4;
		    -webkit-hyphens: 	auto;	-webkit-hyphenate-limit-chars: 	auto 4;	-webkit-hyphenate-limit-lines: 	4;
		    hyphens: 			auto; 	hyphenate-limit-chars: 			auto 4;	hyphenate-limit-lines: 			4; }

/* --- Layout-Change--- */

.brand-change 			{	z-index: 3; position: absolute; top: 3.00vmin; left: 3.00vmin; }
.brand-change a 		{	opacity: 0.42; display: inline-block;width: 1.80vmin; height: 1.80vmin; margin: 0.30vmin; box-shadow: inset 0 0 0 1px rgba(000,000,000,0.24); border-radius: 100.0%; background: white; cursor: pointer; background: silver; } 
.brand-change a:hover 	{	opacity: 0.90; } 

/* --- Cookies--- */

#cookies 			{	position: fixed; top: 0; left: 0; z-index : 999; width: 100.0%; height: 100.0%; overflow: hidden; 
						display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; 
						-webkit-backdrop-filter:	blur(8px);
						-moz-backdrop-filter:		blur(8px);
						-o-backdrop-filter:			blur(8px);
						-ms-backdrop-filter:		blur(8px);
						backdrop-filter:			blur(8px); }
						
#cookies:before		{	content: ''; position: absolute; top: 0; left: 0;  width: 100.0%; height: 100.0%; opacity: 0.42; background: rgba(000,000,000,0.3); }

#cookies > span 		{	position: relative; width: 80.00%; max-width: 280px; height: auto; padding: 1.80rem; border-width: 1px; border-color: silver; color: black; background: white; color: black; opacity: 0.90;
							font-size: 1.00rem; line-height: 1.40; text-align: center; display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; }
#cookies > span > span	{	display: block; width: 100.0%; }
#cookies span + span	{	margin-top: 0.60rem; }
#cookies *				{	color: gray; }
#cookies a				{	color: black; }


#cookies span > .btn		{	opacity: 0.60; flex: inline-block; margin-top: 1.50rem; padding: 0.84rem 1.80rem; text-decoration: none; color: white; background: black; }
#cookies span > .btn:hover	{	opacity: 1.00; }

	#cookies 		{	animation-name: 			cookies-on;
						animation-duration: 		3s;
						animation-fill-mode: 		forwards;
						animation-timing-function: 	linear; }
		
						@keyframes cookies-on {
							from 	{	opacity: 0.00; }
							66% 	{	opacity: 0.00; }
							to 		{	opacity: 1.00; } }
								
	#cookies:target 		{	height:  0; transition: height  480ms ease-in-out 240ms; }
	#cookies:target:before 	{	opacity: 0; transition: opacity 240ms ease-in-out 0ms; }

/*	=================================
		Layout
	================================= 
			
	*	{	box-shadow: 		inset 0 0 0 1px  rgba(000,000,000,0.10) !important; } 
	*	{	background-color: 	rgba(000,000,000,0.05) 					!important; } 
	div	{	background-color: 	rgba(255,000,000,0.05) 					!important; } 
	div	{	background-image: 	none				 					!important; } 
	*	{	color: 				rgba(000,000,000,1.0) 					!important; } 
	img	{	box-shadow: 		inset 0 0 0 1px  rgba(000,000,000,0.40) !important; } 
				
/*	=================================
		END
	================================= */