body {
    font-family: "Lato", sans-serif;
    background-image: url(../pics/back.jpg);
    background-repeat: no-repeat; 
    background-position: fixed;
    background-size:cover;
}

#main { 
margin: auto;
width: 120vh; 
height: 84vh;
transition: 0.5s; 
padding: 16px; color: #ddd; 
word-wrap: break-word; 
border-radius: 10px; 
background-image: url(../pics/avalon1200.jpg); 
background-repeat: no-repeat; 
background-size: 100% 100%;
}

#textdiv { 
margin: 16vh; 
padding: 3vh; 
border: solid 1px #999; 
border-radius: 1vh; 
}

/*	SCHRIFT */
.ts_bb_s { font-size: 1.4vh; text-shadow: 1px 1px 2px black, 0 0 1.4vh blue, 0 0 0.4vh black; }
.ts_bb_m { font-size: 2.0vh; text-shadow: 1px 1px 2px black, 0 0 2.0vh blue, 0 0 0.5vh darkblue; }
.ts_bb_xl{ font-size: 2.8vh; font-weight: bold; text-shadow: 1px 1px 2px black, 0 0 2.8vh black, 0 0 0.6vh darkblue; }

/* SCHATTEN */
.sh_rand_gr {
-moz-box-shadow: 0 0 10px #111; /* Firefox */
-webkit-box-shadow: 0 0 10px #111; /* Chrome, Safari */
-khtml-box-shadow: 0 0 10px #111; /* Konqueror */
box-shadow: 0 0 10px #111; /* CSS3 */
}

.sh_rand_ws {
-moz-box-shadow: 0 0 10px #fff; /* Firefox */
-webkit-box-shadow: 0 0 10px #fff; /* Chrome, Safari */
-khtml-box-shadow: 0 0 10px #fff; /* Konqueror */
box-shadow: 0 0 10px #fff; /* CSS3 */
}

/* TRANSPARENZ */
.opa02 {
opacity: 0.2;
filter: alpha(opacity=20); /* For IE8 and earlier */}

/* NAVIGATION */
.headnav {
	margin: auto;
    height: 0;
    width: 120vh;
    z-index: 1;
    top: 0;
    background-color: #2A3344;
    overflow: hidden;
    transition: 0.5s;
    border-radius: 7px;
}

.headnav a {
    padding: 10px 10px 10px 40px;
    text-decoration: none;
    font-size: 20px;
    color: #818181;
    transition: 0.3s
}

.headnav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.headnav .closebtn {
    position: absolute;
    top: 0;
    right: 45px;
    font-size: 30px;
    cursor: pointer;
}

.headnav .startbtn {
	color: #999999;
    position: absolute;
    top: 5px;
    left: 20px;
    font-size: 20px;
    cursor: pointer;
}