/* ============================== */
/* === Powered by locomputing === */
/* ============================== */


*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

html, body {
margin:0;
padding:0;
}

@media screen and (min-width: 18em) {

body {
font-size: calc(1.2em + ((1.2vw - 0.1em) * 2));
}
}
@media screen and (min-width: 60em) {

body {
font-size: calc(.9em + ((.9vw - 0.1em) * 2));
}
}

@media screen and (max-width: 18em) {
html, body {display: none;}
}

html {
scroll-behavior: smooth;
scrollbar-color:white black;
scrollbar-width:thin;
scrollbar-highlight-color:black;
scrollbar-face-color: white;
scrollbar-arrow-color:white;
-ms-scrollbar-arrow-color:black;
-ms-scrollbar-track-color:black;
}
html::-webkit-scrollbar {
width: 7px;
}
html::-webkit-scrollbar-thumb {
background:white; 
}
html::-webkit-scrollbar-thumb:hover {
background: white;
}
html::-webkit-scrollbar-track {
background-color: black;
}

html, body {
	background-image: linear-gradient(-45deg, #337599, #adc8d6, #dfac20, #e9ac9b, sienna);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

header {
  display:block;
  height: calc(1.35em + ((1.35vw - 0.1em) * 1));	
  background: sienna linear-gradient(77deg, #cd764c, gold, #e5e600 , sienna);
}

header:after {
content: "";
display: block;
position: relative;
height: 62.5%;
background: sienna linear-gradient(77deg, #cd764c, gold, #e5e600 , sienna);
transform: skew(0deg, 1deg);
margin-top:-12px;
border-bottom:calc(.13em + ((.13vw - 0.1em) * 1)) solid #333333;
z-index: 3;
}
.headtext {
position:relative;
font-size: 125%;
font-family: 'Times New Roman',serif;
letter-spacing: calc(.15em + ((.15vw - 0.1em) * 1));
font-weight: bold;
cursor: default;
color: #d7b700;
text-shadow: 0 1px 0 gray,
               0 1px 0 #c9c9c9,
               0 1px 0 #bbb,
               0 2px 0 #b9b9b9,
               0 2px 0 #aaa,
               0 2px 1px rgba(0,0,0,.1),
               0 0 2px rgba(0,0,0,.1),
               0 1px 1px rgba(0,0,0,.3),
               0 2px 2px rgba(0,0,0,.2),
               0 2px 2px rgba(0,0,0,.25),
               0 3px 3px rgba(0,0,0,.2),
               0 3px 3px rgba(0,0,0,.15);
margin-top: 0;
padding: 0;
text-align: center;
z-index:5;
-webkit-text-stroke:clamp(.025em, .1vw, 1em) black;
}

main {
display: grid;
grid-template-columns: repeat(1, 1fr);
}
aside {
grid-column: 1;
grid-row: 0;
}
article {
grid-column: 1;
grid-row: 2;
font-size: 111%;
}

#aid {
white-space: nowrap;
}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Counter*/
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#counting {
margin: 2em auto 0 auto;
}

.counter {
display: flex;	
}
.txt { 
flex:1;
	color:#4a4a4a; 
	text-align: left;
	padding-left: calc(.5em + ((.5vw - 0.1em) * 1));
	font-size:65%;	
}
.zal { 
flex:1;
	color:#4a4a4a; 
	text-align: right; 
	font-weight: bold;
	padding-right: calc(.5em + ((.5vw - 0.1em) * 1));
	font-size:65%;
}



@media screen and (min-width: 60em) {

header {
display:block;
}

main {
display: grid;
grid-template-columns: repeat(100, 1fr);
}

aside {
grid-column: 1 / 20;
grid-row: 2;
}

article {
grid-column: 21 / 101;
grid-row: 2; 
}
footer {
display:block;
}

#counting {
margin: .5em auto;
}

}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Nach Oben */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.artifot {
position:fixed;
display: grid;
grid-template-columns: repeat(100, 1fr);
width: 99%;
left:.75%;
bottom:calc(2.85em + ((2.85vw - 0.1em) * 1));
}

.artli {
grid-column: 1;
grid-row:    1;
text-align: left;
}
.artire {
grid-column: 101;
grid-row:    1;
text-align: right;
}
.artifot img {
width:1em;
height: auto;
opacity: .3;
}
.artifot img:hover {
opacity: 1;
}