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

:root{
  		
	--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(--darkblue);
}

* {
	box-sizing: border-box;
	
	max-width: 100%;
	outline: none;

	scrollbar-width: inherit;
	scrollbar-color: inherit;
	
	color:inherit;
	caret-color:inherit;
	border-color:inherit;
	text-decoration-color:inherit;
	
	transition-duration:inherit;
	
	/*default colours to be overwritten*/
	--darkblue:darkblue;
	--blue:blue;
	--turquoise:turquoise
	--lightblue:lightblue;
	--green:green;
	--lightgreen:lightgreen;
	--yellow:yellow;
	--lightyellow:yellow;
	--white:white;
	--smokewhite:lightgray;
}

html{
	scrollbar-width: thin;
	scrollbar-color: var(--darkblue) var(--white);
	scroll-behavior: smooth;
	filter: unset;
}

body{
	min-height: 100vh;
	color:var(--darkblue); 
	caret-color:currentColor;
	border-color:currentColor;
	padding:0;
	margin:0;
	font-family:Arial, sans-serif;
	font-size:var(--fontheight);	
	line-height:var(--lineheight);	
	font-feature-settings: "salt";
	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;
}

::selection{ 
	background:var(--smokewhite);
	color:var(--blue);
	text-decoration-color:var(--blue);
}

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


.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(--turquoise);
}


.fragment.hyper{
	width: 100%;
}





slide{
	position: fixed;
	top: 0;
	z-index: 99999;
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}


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

slide#preload,
slide svg rect{
  -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{
	width: max(50px,min(50%,500px))
}