html { height: 100%; }

body { 
	margin: 0; 
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	/*background-color: black;*/
    background-color: aliceblue;

/*	background: url(imgs/18700.jpg);*/
    background: url(imgs/18700_2.jpg);
    
    background-size: 33% 33%;
/*    background-repeat: no-repeat;*/
/*    background-blend-mode: lighten;*/

}

#lines {
	/*margin-top: -100px;*/
/*	image-rendering: pixelated;*/
}

#three {
	position: absolute;
/*	top: calc(50% - 260px);*/
	background: rgb(95,89,109);
/*	background: radial-gradient(ellipse, #b4b4b4 10%, #000 100%);*/
	opacity: 0;
	transition: opacity 3s ease-in-out;
	pointer-events: none;
}

#three.active {
	opacity: 1;
}

/* media queries */
@media only screen and (max-width: 480px) {
	canvas#lines {
/*		max-width: 100vw;*/
/*		max-height: 75vw;*/
	}
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
	canvas#lines {
/*		max-width: 100vw;*/
/*		max-height: 75vw;*/
	}
}