body {
   background-size: 100%;
color: white; 
}

html {  

}

.xbtn {  padding: 4px; margin: 5px; color: white; text-decoration: none;  }

.kl {
max-width: 300px;
 height: auto;	 
}



.yes-no {
display: flex;
 align-items: center;
  justify-content: center; 
   text-align: center;
   width: 100%;
   margin-top: 15px;
}

#xbtn { border: 2px solid white; width: 80px; margin: 10px; padding: 10px;  }
#xbtn:hover { background: #404040; color: black; cursor: pointer; }
#xbtn a { color: white;  text-decoration: none; }

.overlay {
 position: absolute;
	width: 100%;
	height: 100%;
		top:0px;
		left:0px;
overflow: auto;		
			background: black;

background: url(../img/kraken-background.jpg) no-repeat center center fixed;
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;
color: white; 

				z-index:  50;
				
					
}

#popup {
font-family: 'Fira Sans', sans-serif;
     font-weight: normal;
       font-size: 180%;
 position: absolute;
width: 800px;
height: 400px;	
	margin: auto;
	 z-index:  0;
			   position: absolute;
    top: 50%;
    left: 50%;
    margin: -200px 0 0 -400px;
     padding: 10px;
      text-align: center;
    
}

@media (max-width: 900px) {

#popup {
width: 600px;
height: 300px;
margin: -150px 0 0 -300px;
font-size: 130%;
  }
  	
}


@media (max-width: 700px) {
#popup {
width: 400px;
height: 220px;
margin: -110px 0 0 -200px;
font-size: 90%;
  } 	
 
 .kl { max-width: 250px; height: auto; } 
  
}

@media (max-width: 400px) {

.kl { max-width: 200px; height: auto; }

#popup {
position: static;
width: 300px;
height: 250px;
margin: auto;
font-size: 80%;
margin-top: 20%;
 }
 
 }