html {
  background: url(login.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


a:link { color:#6699FF; text-decoration:none; }
a:visited { color:#00FF00; text-decoration:none; }
a:hover { color:#FF6600; text-decoration:none; }
a:active { color:#00FF00; text-decoration:none; }
p,ul,ol,li,div,td,th,b,i,input { font-family:Arial,Helvetica,sans-serif;}
p,ul,ol,li,div,td,th,b,i,input { font-size:12px; }

#rahmen1 {
  border-width:1px;
  border-style:solid;
  border-color:#000080;
  text-align:left; }

#rahmen2 {
  border-width:1px;
  border-style:solid;
  border-color:#FF9900;
  text-align:left; }


#logli-logo {	
	grid-area: image;	
	width:90vw;
}
#logli-logo img{	
	width:97vw;
}

#logli-lbl1 {	
	grid-area: lable1;
	font-size:1.3em;	
}
#logli-lbl_user {	
	grid-area: lbluser;	
	width:50vw;
}
#logli-input_user {	
	grid-area: inputuser;	
	width:50vw;
}
#logli-lbl_pw {	
	grid-area: lblpw;	
}
#logli-input_pw {	
	grid-area: inputpw;	
}
#logli-lbl2 {	
	grid-area: lable2;	
}

 div#login {
	 display: grid;
	 display: none;
	 align-content: center;	
	 
	 grid-template-columns: auto;
		
	align-content: center;	
	background-color: #fgf;
	grid-template-areas: 
		"image image"
		"lable1 lable1"
		"lbluser inputuser"
		"lblpw inputpw"
		"lable2 lable2";
 }
 
 
.content{
	font-size:2em;
}
 
@media (max-width: 500px) {
	
	div#login {
	    display: grid;
	 	 
		grid-template-columns: auto;
		
		grid-template-areas: "image" "lable1" "lbluser" "inputuser" "lblpw" "inputpw" "lable2";
 
}
 
		
}