body {
	background-color:#0000ff;
	color:white;
	font-family: 'Archivo', sans-serif;
	font-weight:100;
	font-size:12pt;
}

a {
	color:#ffffff;
	text-decoration:none;
}


#BDQ {
	position:fixed;
	top:10px;
	left:10px;
	text-transform:uppercase;
	font-size:2em;
	z-index:100;
}

#date {
	position:fixed;
	top:10px;
	right:10px;
	text-transform:uppercase;
	font-size:2em;
	z-index:100;
}

#poeticwebsites {
	margin-left:auto;
	margin-right:auto;
	top:10vh;
	position:relative;
	width:80vw;
}

#poetic {
	font-size:10em;
	text-transform:uppercase;
}

#websites {
	position:relative;
	margin-left:1.5em;
	margin-top:-0.25em;
	font-size:10em;
	text-transform:uppercase;
}

#description {
	font-size:1.5em;
	font-weight:800;
	width:100%;
	text-align:center;
}

#sites{
	position:relative;
	margin-top:10em;
	width:80vw;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:200px;
}

#sites img{
	filter: saturate(1) contrast(100%) drop-shadow(0px 0px 0px white);
	transition: all 0.25s ease-in-out;
	width:50vw;
	display:block;
	margin-bottom:2em;
	border:1em solid #0000ff;
}

#sites img:hover{
	filter: saturate(10) contrast(200%) drop-shadow(16px 16px 20px white);
	border:1em solid #ffffff;
}

#animals {margin-left:30vw;}
#bodies {margin-left:15vw;}
#building {margin-left:20vw;}
#buns {margin-left:4vw;}
#dionaea {margin-left:21vw;}
#highway {margin-left:5vw;}
#kh {margin-left:32vw;}
#mirrors {margin-left:25vw;}
#space {margin-left:15vw;}
#trigun{margin-left:32vw;}

@media (max-width: 1024px) {
	#poeticwebsites {
	  width:90vw;
	 }
	 
	#poetic{font-size:8em;}
	#websites{font-size:8em;}
}

@media (max-width: 750px) {
  body {font-size:6pt;}
  #poetic {text-align:center; width:100%;}
  #websites {margin-left:0; text-align:center; width:100%;}
  #sites {margin-top:15em;}
  #sites img {width:100%; margin:0 !important; border:0 !important;}
  #sites img:hover {border:0;}
  #description{font-size:2em;}
}