* {
	margin : 0;
	padding : 0;
	}

html {
	margin : 0;
	padding : 0;
	height : 100%;
	width : 100%;
	}

body {	
	margin : 0;
	padding : 0;
	border : 0;
	width : 100%;
	height : 100%;
	
	display : flex;
	align-items : center;
	justify-content : center;
	position : relative;
	
	background : #e10085;
	background-image : url('../img/start/bild1.jpg');
	background-position : center center;
	background-repeat : no-repeat;
	background-size : cover;
	}
	
body:after {
	content : "";
	position : absolute;
	top : 0;
	right : 0;
	bottom : 0;
	left : 0;
	
	background-image : url('../img/hyperspace-emblem-bg.png');
	background-position : center center;
	background-repeat : no-repeat;
	background-size : 200% auto;
	-webkit-background-blend-mode: color; 
	}
	
.logo {
	padding: 50px;
	width : 240px;
	height: 100px;
	z-index : 100;
	cursor: pointer;
	}
	
.logo a {
	display : block;
	position : absolute;
	}
	
.logo img{
	width : 240px;
	}
	
.logo:hover .emblem {
	animation: pulse 1.5s ease-out infinite;
	}
	
.grow {
	animation: grow 0.4s ease-out forwards;
	}
	
@keyframes pulse {

	  0% {transform: scale(1);}
	
	 25% {transform: scale(1.15);}
	
	100% {transform: scale(1);}
	
	}
	
@keyframes grow {

	  0% {transform: scale(1);}
	  
	100% {transform: scale(25);}
	
	}



@media (min-aspect-ratio: 6/5) {
	
	body:after {
	background-size : 200% auto, cover;
	}

}

@media (max-aspect-ratio: 6/5) {
	
	body:after {
	background-size : auto 165%, cover;
	}

}