:root {
  --orange: #f96a1b;
  --hellblau: #39b4e1;
  --dunkelblau: #3896b3;
}

body {
  /*background: -webkit-linear-gradient(left, #f96a1b 50%, #3896b3 50%);
  background: -moz-linear-gradient(left, #f96a1b 50%, #3896b3 50%);
  background: -ms-linear-gradient(left, #f96a1b 50%, #3896b3 50%);
  background: linear-gradient(left, #f96a1b 50%, #3896b3 50%);*/
  background: var(--dunkelblau);
  font-family: "Calibri Light", sans-serif;
  font-weight: 0;
  text-align: center;
  
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
	
}

#colorblock{
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	height: 100%;
	width: 50%;
	background: var(--orange);
	animation: 0.65s linear 1 slideInFromLeft;
	z-index: 1;
}

@keyframes slideInFromLeft{
  0%
  {
    width: 0%;
  }
  100% 
  {
    width: 50%;
  }
}

@media screen and (min-width: 800px){
h1{
	font-size: 50;

}

#firma h2{
	font-size: 18	;
}

#title{
	position: fixed;
	top: 8%;
	left: 50%;
	margin-left: -35%;
	display: inline-block;
	height: 150;
	width: 70%;
	background-color: #3896b3;
	box-shadow: 10px 10px black;
	border: 3px solid white;
	line-height: 75px;
	z-index: 10;
}



#firma{
	position: fixed;
	right: 15%;
	margin-top: -20;
	z-index: 10;
	}
	
#start{
	position: fixed;
	left: 50%;
	top: 45%;
	margin-left: -25%;
	display: inline-block;
	height: 100px;
	width: 50%;
	/*background-color: #DCDCDC;*/
	background-color: var(--dunkelblau);
	box-shadow: 10px 10px black;
	border: 3px solid white;
	cursor: pointer;
	transition: background-color 0.4s;
	line-height: 50px;
	z-index: 10;
}

#start:hover{
    background-color: var(--orange);
    }

#start h2{
	font-size: 32;
}

#footer{
	position: fixed;
	bottom: -25;
	width: 800;
	left: 50%;
	margin-left: -400;
	display:flex;
    justify-content: space-around;
	z-index: 10;
}
}
/*xXxXxXxXxXxXxXxXxXxXxXxXxXxXxXxXxXxXxXxXxXxXxXxXxXxXxXxX*/

@media screen and (orientation: portrait) {
	
body{
	background: -webkit-linear-gradient(left, #f96a1b 50%, #3896b3 50%);
    background: -moz-linear-gradient(left, #f96a1b 50%, #3896b3 50%);
    background: -ms-linear-gradient(left, #f96a1b 50%, #3896b3 50%);
    background: linear-gradient(left, #f96a1b 50%, #3896b3 50%);
}

#colorblock{
	visibility: hidden;
}
	
h1{
	font-size: 50;
	margin-top: 30;
}

#title h2{
	padding-top: 20;
	padding-right: 5;
}


#title{
	position: static;
	display: inline-block;
	background-color: #3896b3;
	box-shadow: 10px 10px black;
	border: 3px solid white;
	text-align: center;
	margin-top: 140;
	height: 180;
	width: 80%;
	top: 0%;
	left: 0%;
	
	z-index: 10;
}

#firma{
	position: static;
	text-align: right;
	z-index: 10;
	}
	
#start{
	position: static;
	margin-left: 0;
	left: 0%;
	display: inline-block;
	background-color: var(--dunkelblau);
	box-shadow: 10px 10px black;
	border: 3px solid white;
	cursor: pointer;
	transition: background-color 0.4s;
	display: inline-block;
	margin-top: 100;
	height: 140;
	width: 60%;
	z-index: 10;
}

#start:hover{
    background-color: var(--dunkelblau);
    }

#start h2{
	font-size: 32;
	margin-top: 15;
}

#footer{
	position: static;
	margin-left: 0;
	display:flex;
    justify-content: space-around;
	margin-top: 180;
	z-index: 10;
}
}