body
{
	background: #eeeedd;
}

@keyframes logomorphtop
{
	0%
	{
	  opacity:1;
	  filter: brightness(0.0);
	}
	5%
	{
	  opacity:1;
	  filter: brightness(1.0);
	}
	15%
	{
	  opacity:1;
	}
	33%
	{
	  opacity:0;
	}
	100%
	{
	  opacity:0;
	}
}

@keyframes logomorphmiddle
{
	0%
	{
	  opacity:1;
	}
	33%
	{
	  opacity:1;
	  filter: brightness(0.4);
	}
	48%
	{
	  opacity:1;
	  filter: brightness(2.5);
	}
	66%
	{
	  opacity:0;
	  filter: brightness(0.5);
	}
	100%
	{
	  opacity:0;
	}
}

@keyframes logomorphbottom
{
	0%
	{
	  opacity:1;
	  filter: grayscale(0.0) brightness(1.0);
	}
	80%
	{
	  opacity:1;
	  filter: grayscale(0.0) brightness(1.0);
	}
	90%
	{
	  opacity:1;
	  filter: grayscale(1.0) brightness(1.0);
	}
	100%
	{
	  opacity:1;
	  filter: grayscale(0.0) brightness(0.0);
	}
}


#mainlogo {
	position: relative;
	left: 0;
	top: 0;
  	width: 70vw;
  	height: 70vh;
	margin-top: 10vh;
	margin-left: auto;
	margin-right: auto;
  	overflow: auto; /* Enable scroll if needed */
  	box-shadow: 10px 10px 10px gray;
}
#mainlogo img
{
	position: absolute;
	left: 0px;
	top: 0px;
  	width: 70vw;
  	height: 70vh;
}

#mainlogo img.logomiddle
{
  animation-name: logomorphmiddle;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 15s;
  animation-direction: normal;
}

#mainlogo img.logotop
{
  animation-name: logomorphtop;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 15s;
  animation-direction: normal;
}

#mainlogo img.logobottom
{
  animation-name: logomorphbottom;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 15s;
  animation-direction: normal;
}


.headline
{
	width=100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-size: 2vw;
	font-family: sans-serif;
}



.container
{
	position: relative;
}

p
{
	font-size: 1vw;
	font-family: sans-serif;	
}

#overlay0
{
	position: absolute;
	left: 42vw;
	top: 13vh;
	width: 15vw;
	border: 2px solid #000000;
	border-radius: 1vw;
	background: #bbbb99;
	box-shadow: 4px 4px 4px #888888;
	padding: 1px 4px 1px 5px;
}

#overlay1
{
	position: absolute;
	left: 10vw;
	top: 10vh;
	width: 15vw;
	border: 2px solid #000000;
	border-radius: 1vw;
	background: #aabbcc;
	box-shadow: 4px 4px 4px #888888;
	padding: 1px 4px 1px 5px;
}

#overlay2
{
	position: absolute;
	left: 75vw;
	top: 7vh;
	width: 15vw;
	border: 2px solid #000000;
	border-radius: 1vw;
	background: #bbaadd;
	box-shadow: 4px 4px 4px #888888;
	padding: 1px 4px 1px 5px;
}

#overlay3
{
	position: absolute;
	left: 5vw;
	top: 50vh;
	width: 15vw;
	border: 2px solid #000000;
	border-radius: 1vw;
	background: #dd99aa;
	box-shadow: 4px 4px 4px #888888;
	padding: 1px 4px 1px 5px;
}

#overlay4
{
	position: absolute;
	left: 70vw;
	top: 60vh;
	width: 18vw;
	border: 2px solid #000000;
	border-radius: 1vw;
	background: #99ddcc;
	box-shadow: 4px 4px 4px #888888;
	padding: 1px 4px 1px 5px;
}

#overlay5
{
	position: absolute;
	left: 17vw;
	top: 72vh;
	width: 15vw;
	border: 2px solid #000000;
	border-radius: 1vw;
	background: #ddcc99;
	box-shadow: 4px 4px 4px #888888;
	padding: 1px 4px 1px 5px;
}

canvas
{
  	display: block;
  	width: 100vw;
  	height: 100vh;
}