/*
	Lotus Minima Theme (c) 2017-2021 by Pedro PSI
	https://pedros.works/
*/

html{
  		
	--durationOff:1s;
	--durationOn:0.33s;
	--durationFade:1s;

	--scaling:2;
	--basis-width:calc(1vw);
	--basis-height:calc(1vh);

		
	--w1 :var(--basis-width);
	--w2 :calc(var(--w1)	* var(--scaling));
	--w4 :calc(var(--w2)	* var(--scaling));
	--w8 :calc(var(--w4)	* var(--scaling));
	--w16:calc(var(--w8)	* var(--scaling));
	--w32:calc(var(--w16)	* var(--scaling));
	--w64:calc(var(--w32)	* var(--scaling));
	--w-2:calc(var(--w1)	/ var(--scaling));
	--w-4:calc(var(--w-2)	/ var(--scaling));
	--w-8:calc(var(--w-4)	/ var(--scaling));

	--h1:var(--basis-height);
	--h2 :calc(var(--h1)	* var(--scaling));
	--h4 :calc(var(--h2)	* var(--scaling));
	--h8 :calc(var(--h4)	* var(--scaling));
	--h16:calc(var(--h8)	* var(--scaling));
	--h32:calc(var(--h16)	* var(--scaling));
	--h64:calc(var(--h32)	* var(--scaling));
	--h-2:calc(var(--h1)	/ var(--scaling));
	--h-4:calc(var(--h-2)	/ var(--scaling));
	--h-8:calc(var(--h-4)	/ var(--scaling));
 
	--s-32:calc((var(--h-32) + var(--w-32)) * 0.5);
	--s-16:calc((var(--h-16) + var(--w-16)) * 0.5);
	--s-8:calc((var(--h-8) + var(--w-8)) * 0.5);
	--s-4:calc((var(--h-4) + var(--w-4)) * 0.5);
	--s-2:calc((var(--h-2) + var(--w-2)) * 0.5);
	--s1:calc((var(--h1) + var(--w1)) * 0.5);
	--s2:calc((var(--h2) + var(--w2)) * 0.5);
	--s4:calc((var(--h4) + var(--w4)) * 0.5);
	--s8:calc((var(--h8) + var(--w8)) * 0.5);
	--s16:calc((var(--h16) + var(--w16)) * 0.5);
	--s32:calc((var(--h32) + var(--w32)) * 0.5);
	
	--fontheight:calc(12px + var(--s-2));
	--lineheight:var(--fontheight);
	--tagheight:12px;
	--sh:1px;
		
	--colour:currentcolor;
	--uncolour:var(--neutraldarkest);
	
}

html {
	--neutrallightest:rgb(251, 248, 230);
	--neutrallight:rgb(245, 239, 214);
	--neutralchiaroscuro:rgb(206, 197, 147);
	--neutraldark:rgb(120, 115, 85);
	--neutraldarkest:rgb(61, 57, 33);

	--terciarylightest:rgb(233, 246, 251);
	--terciarylight:rgb(194, 232, 247);
	--terciarychiaroscuro:rgb(0,125,175);
	--terciarydark:rgb(0,75,125);
	--terciarydarkest:rgb(0,75,50);

	--primarybackdrop:rgba(0, 72, 46,0.5);
	
	--primarylightest:rgb(215,250,175);
	--primarylight:rgb(175,225,150);
	--primarychiaroscuro:rgb(0,200,125);
	--primarydark:rgb(0, 100, 63);
	--primarydarkest:rgb(0, 72, 46);
	
	--secondarylightest:rgb(252,238,206);
	--secondarylight:rgb(250,220,150);
	--secondarychiaroscuro:rgb(220,200,100);
	--secondarydark:rgb(160,134,0);
	--secondarydarkest:rgb(105,88,1);
	
	--translucent:rgba(255,255,255,0.2);
	--transparent:rgba(255,255,255,0);

	--uncolour:var(--neutraldark);
	--recolour:var(--neutrallightest);
	--text:var(--primarydarkest);
	--border:var(--neutraldarkest);
	--lightfilter:contrast(0.4) brightness(1.2) sepia(1);
	--normalfilter:unset;

	--night: ;
	--mono: ;
}


html{
	scrollbar-width: thin;
	scrollbar-color: var(--neutraldarkest) var(--neutrallightest);
	scroll-behavior: smooth;
	filter: unset;
	overscroll-behavior: none;
}

*{
	box-sizing: border-box
}

body{
	min-height: 100vh;
	color:var(--text); 
	caret-color:currentColor;
	border-color:currentColor;
	padding:0;
	margin:0;
	font-family:Arial, sans-serif;
	font-size:var(--fontheight);	
	line-height:var(--lineheight);	
	word-wrap:break-word;
	text-align:center;
	display:flex;/*Fix for overlapping layout issues*/
	flex-direction:column;/*Fix for overlapping layout issues*/
	justify-content:space-between;
	overflow-x: hidden;
	overscroll-behavior: none;
}

html pre {
	text-align: start;
	padding:var(--s1);
	tab-size: 4;
	white-space:pre!important
}

::selection{ 
	background:var(--primarychiaroscuro);
	color:var(--neutrallightest);
	text-decoration-color:var(--neutrallightest);
}

/* Scrollbars */
::-webkit-scrollbar {
  width: var(--w1);
}
::-webkit-scrollbar-track {
  background: var(--neutrallightest);
}
::-webkit-scrollbar-thumb {
  background: var(--neutraldarkest);
}


.opening,
.closing{
	--fade:opacity var(--durationFade) ease-in-out;
	transition:var(--fade);
	-moz-transition:var(--fade);
	-webkit-transition:var(--fade);
	-o-transition:var(--fade);
	-ms-transition:var(--fade);
}
.closing{
  opacity:0;
}
.opening{
  opacity:1;
}
.faded{
	opacity: 0;
	transition-duration: var(--durationFade);
}

.hideCursor{
	cursor:none;
}

.current{
	background-color:var(--primarychiaroscuro);
}


.fragment.hyper{
	width: 100%;
}




/*Loading*/


body > pre {
	background: rgba(255,255,255,0.8);
	color: var(--text,rgb(0,0,75));
	height: 100vh;
	width:100vw;
	overflow: scroll;
	margin: 0;
	z-index:99999;
	position: absolute;
	 white-space: pre-wrap;
}

body > pre {
	 
  animation:   Reveal 10s linear;
}

@keyframes Reveal{
	0% {
		opacity: 0;
		background: rgba(255,255,255,0);
		color: var(--neutrallightest,rgb(255,255,255));
	}
	100% {
	}
}


.centered{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.overed{
	position:fixed;
	left:0;
	top:0;
	width:100vw;
	max-width:100vw;
	min-width:100vw;
	height:100vh;
	z-index: 100;
}


@keyframes Waves{
	0%,100% {
			background:rgb(170,225,225);
	}
	50% {
			background:rgb(0,55,55);
	}
}


@keyframes Clouds{
	0%,100% {
		opacity: 0.025;
	}
	50% {
		opacity: 0.6;
	}
}


slide#preload{
  -webkit-animation: Waves 10s infinite; 
  -moz-animation:    Waves 10s infinite; 
  -o-animation:      Waves 10s infinite; 
  animation:         Waves 10s infinite;
  transition-duration: var(--durationOff);
}
slide svg rect{
  -webkit-animation: Clouds 10s infinite; 
  -moz-animation:    Clouds 10s infinite; 
  -o-animation:      Clouds 10s infinite; 
  animation:         Clouds 10s infinite;
  transition-duration: var(--durationOff);
}

slide svg{
	width: max(50px,min(50%,500px));
	height:auto;
	fill-opacity: 0.5;
	stroke: var(--neutrallightest,white);
	stroke-width: 0.1px;
}