@font-face {
    font-family: 'mathleteskinny';
    src: url('res/font/mathlete/Mathlete-Skinny-webfont.eot');
    src: url('res/font/mathlete/Mathlete-Skinny-webfont.eot?#iefix') format('embedded-opentype'),
         url('res/font/mathlete/Mathlete-Skinny-webfont.woff') format('woff'),
         url('res/font/mathlete/Mathlete-Skinny-webfont.ttf') format('truetype'),
         url('res/font/mathlete/Mathlete-Skinny-webfont.svg#mathleteskinny') format('svg');
    font-weight: normal;
    font-style: normal;

}

body{
    margin: 0px;
    color: #ffffff;
}

#container{
    background-color: #1F8694;
    background-image: url('res/img/pattern2.png');
    width: 100vw;
    height: 100vh;
    
    text-align: center;
    
    font-family: 'mathleteskinny', sans-serif;
}

#logo{
    postion: absolute;
    margin-top: 10vh;
    width: 20vw;
    height: auto;
}


#title{
    margin-top: 10px;
    font-size: 15vh;
}

#subtitle{
    font-size: 5vh;
}

.button{
	font-size: 7vh;
	color: #1F8694;
	background-color: #ffffff;
	width: 50vw;
	transform: translate(25vw,5vh);
	cursor: pointer;
	opacity: 0.6;
	border-radius: 3px;
	font-family: 'mathleteskinny', sans-serif;
}

.button:hover{
	opacity: 1;
}

.overlay{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,0.6);
	display: none;
}

.close{
	opacity: 0.6;
	width: 4vh;
	height: auto;
	cursor: pointer;
	position: absolute;
	right: 4vh;
	top: 4vh;
}

.close:hover{
	opacity: 1;
}

#imprint{
	border-radius: 3px;
	background-color: white;
	color: black;
	position: absolute;
	top: 4vh;
	right: 12vh;
	left: 8vw;
	bottom: 4vh;
	padding: 4vh;
	font-family: sans-serif;
	font-size: 3vh;
	color: #313131;
	overflow-y: auto;
}

#imprint h1, #imprint h2{
    font-family: 'mathleteskinny', sans-serif;
}

#imprint h1{
	font-size: 8vh;
}

#imprint h2{
	font-size: 5vh;
}

#overlay .button{
   background-color: #1F8694;
	color: white;
	text-align: center;
	position: absolute;
	width: 90%;
	opacity: 1;
	margin-top: 4vh;
	transform: translate(0,0);
}

#overlay .button:hover{
	opacity: 0.8;
}

a{
	color: #1F8694; 
}

.pgp{
	text-align: justify;
}