* { box-sizing:border-box; }
body {font-family:sans-serif;font-size:24px;color:#e6ffb0;background-color:#288b86;padding:5%;margin:0 auto;text-align:center; }
header img, h1, h2, h3, p, section, hr { margin-bottom:1em; }
h1, h2, h3 { font-weight:normal;text-transform:uppercase;color:#A0FFDB; }
h1 { font-size:1.2em; }
p { font-size:1em;line-height:1.5;}
ul { padding:0;margin:0;list-style-type:none; }
li { line-height:1.3; }
blockquote {font-style:italic;}
cite { display:block;font-size:0.9em;font-style:normal;color:#A0FFDB;margin:10px 0px 50px 0px; }
a, a:visited { color:#df787c; }
a:hover { color:#A0FFDB;}
img { max-width:100%; }
hr{ display:block;width:70%;height:100px;border:none;background:url('assets/divider.svg') center no-repeat;background-size:contain;filter:invert(50%) sepia(100%) brightness(55%) saturate(250%) hue-rotate(140deg); } 
summary::marker { content: ""; }
a img, summary img { border:8px solid #92535f;margin-top:0.5em; }
summary img { display:block;width:100%; }
a:hover img, summary:hover img { border:8px solid #A0FFDB; }
#trailer span { border:8px solid #92535f; }
#trailer span { display:block;position:relative;padding-bottom:calc(56.25% - 8px);height:0; }
#trailer span video { position:absolute;top:0;left:0;width:100%;height:100%;border:none; }
#screenshots span img { width:100%;margin-bottom:1em;border:8px solid #92535f; }
#wallpapers details ul { margin:0;border:8px solid #92535f;border-top:none; }
#wallpapers details ul li { margin:0 auto;text-align:center;margin:0;padding:0;border-bottom:2px solid #92535f; }
#wallpapers details ul li:last-child { border:none; }
#wallpapers details ul li a { display:block;padding:0.3em;background-color:#00666d; }
#wallpapers details ul li a:hover { background-color:#A0FFDB; }
footer span { display:block;width:100%; }
footer a img, #about a img { border:none;width:80%;min-width:200px;max-width:300px;max-height:200px;margin-bottom:40px;opacity:0.6;filter:invert(50%) sepia(50%) saturate(300%) brightness(150%) contrast(120%) hue-rotate(110deg); }
footer a:hover img, #about a:hover img { border:none;opacity:1; }
footer a span { display:none;text-align:center;margin:0 auto; }
@media (min-width: 800px) {
	#images span, footer span { display:flex;flex-wrap:wrap;justify-content:space-between;align-content:center; }
	#images span a { width:48%;margin:1%; }
	#images span a img, footer span a img { margin:0;width:100%; }
	#wallpapers span { display:flex;flex-wrap:wrap;justify-content:space-evenly; }
	#wallpapers span details { width:48%; }
	#wallpapers span ul li { font-size:0.8em; }
	footer span a img { display:block;max-width:220px;min-height:150px;max-height:150px;}
}
@media (min-width: 1024px) { 
	body { font-size:2em;padding:1em; } 
	main, header, footer { max-width:1024px;text-align:center;margin:0 auto; }
	hr{ height:200px; }
	footer { padding-bottom:2em; }
	footer span a img, #about a img { max-width:300px;}
}
@media (min-width: 2000px) { 
	body { font-size:4em;padding:0; } 
	main, header, footer { max-width:2000px; }
	hr{ width:50%; }
	a img, summary img { border-width:20px }
	a:hover img, summary:hover img { border-width:20px }
	#trailer span { border:0.5vw solid #92535f; }
	#screenshots span img { border:20px solid #92535f; }
	footer span a img, #about a img { max-width:600px;max-height:500px;min-height:300px; }
}