:root
{
	--intro-headline-color-text: hsla(204, 80%, 50%, 1);
	--screen-headline-color-text: #999;
	--infobox-color-background: hsla(204, 80%, 50%, 0.7);
}

html, body
{
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	cursor: default;
	user-select: none;
	font-family: 'OpenSansLight';
	color: #FFF;
	overflow:hidden;
	-moz-osx-font-smoothing: grayscale;
}

p  { margin: 5px 0px 5px 0px; } 
h2 { margin: 0px 0px -10px 0px; }
ul
{
	list-style: none;
    padding-left: 0;
    line-height: 1.2;
}
ul li:before
{
	content: '\2713\0020';
	font-size: 140%;
}

/* === Intro screen === */

#intro
{
    position: absolute;
    height: 100vh;
    width: 100vw;
    background: #FFF;
    z-index: 1000;
}
#intro #logo
{
	position: absolute;
	left: 25vw;
	top: -50vh;
	width: 50vw;
}
#intro #headline
{
	position: absolute;
	bottom: -50vh;
	width: 100vw;
	color: var(--intro-headline-color-text);
	font-size: 5vw;
	font-family: 'OpenSansLight';
	text-align: center;
}

/* === Screenshot === */

#screen
{
	position: absolute;
	bottom: 27vh;
}
#screen #screen-headline
{
	position: relative;
	height: 7vh;
	width: 80vw;
	color: var(--screen-headline-color-text);
	font-size: 6vh;
	font-family: 'OpenSans';
	z-index: 10;
}
#screen #screen-img
{
	position: relative;
	height: 60vh;
	z-index: 9;
	cursor: pointer; 
}
#screen #buffer-img
{
    display: none;
}

/* === Infobox === */

#box
{
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 33vh;
	background: var(--infobox-color-background);
	z-index: -1;
}
#box-content
{
	margin-top: 8vh;
	width: 100%;
	height: 100%;
    overflow-y: auto;
}
#box-text
{
	position: absolute;
	left: calc(50% - 400px);
	width: 600px;
	height: 250px;
    color: #FFF;
    text-align: justify;
}
#box-facts
{
	position: absolute;
	left: calc(50% + 240px);
	width: 150px;
	height: 250px;
    color: #FFF;
}

/* === Controller === */


.controller
{
	position: absolute;
	width: 60px;
	height: 60px;
	bottom: 55vh;
	z-index: 100;
	cursor: pointer; 
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
}
.controller.prev
{
    left: 2vw;
    background-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="rgb(196,196,196)" d="M349.5 475.5l-211.1-211c-4.7-4.7-4.7-12.3 0-17l211.1-211c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L178.1 256l195.5 195.5c4.7 4.7 4.7 12.3 0 17l-7.1 7.1c-4.7 4.6-12.3 4.6-17-.1zm-111 0l7.1-7.1c4.7-4.7 4.7-12.3 0-17L50.1 256 245.5 60.5c4.7-4.7 4.7-12.3 0-17l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0l-211.1 211c-4.7 4.7-4.7 12.3 0 17l211.1 211c4.8 4.8 12.4 4.8 17.1.1z"/></svg>')
}
.controller.next
{
	right: 2vw;
    background-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="rgb(196,196,196)" d="M34.5 36.5l211.1 211c4.7 4.7 4.7 12.3 0 17l-211.1 211c-4.7 4.7-12.3 4.7-17 0l-7.1-7.1c-4.7-4.7-4.7-12.3 0-17L205.9 256 10.5 60.5c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.6-4.6 12.2-4.6 16.9.1zm111 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17L333.9 256 138.5 451.5c-4.7 4.7-4.7 12.3 0 17l7.1 7.1c4.7 4.7 12.3 4.7 17 0l211.1-211c4.7-4.7 4.7-12.3 0-17l-211.1-211c-4.8-4.8-12.4-4.8-17.1-.1z"/></svg>');
}

.controller.prev:hover
{
    filter: drop-shadow(4px 4px 4px rgba(0,0,0,0.2));
    margin-left: -2px;
}
.controller.next:hover
{
    filter: drop-shadow(4px 4px 4px rgba(0,0,0,0.2));
    margin-left: 2px;
}
.controller.prev:active, .controller.next:active
{
    filter: unset;
     margin-left: unset;
}





/* === font: openSans === */

@font-face {
  font-family: 'OpenSansBold';
  src: url('../../../css/fonts/opensans-bold.woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'OpenSans';
  src: url('../../../css/fonts/opensans-regular.woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'OpenSansLight';
  src: url('../../../css/fonts/opensans-light.woff');
  font-weight: light;
  font-style: normal;
}