/*  This is my style sheet.  There are many like, but this one is mine
	look at me, becoming all serious with an actual attempt at site-wide styling.
*/

	body {
			font-family: "Trebuchet MS", "Lucida Sans", "Tahoma", "Verdana", "Arial", "Helvetica", sans-serif;
			color: #DDD;
			background: #000 url("./assets/milkyway.jpg") no-repeat; backdrop-filter: blur(0.5px);
			
			margin: auto; width: 75%; padding: 10px; /* center align trick */
		}

/* header */
	header {padding-left: 3rem;}
	.fishing {font-size: 2.5em; color: #9DF; filter: drop-shadow(0px 0px 0.2ex) blur(0.01ex)} /* site title */
	.tagline {font-size: 0.75em; color: #7AC; margin-top: -2.5em; padding-left: 4rem; filter: drop-shadow(0px 0px 0.2ex) blur(0.01ex)}
	.doodad {font-size: 0.8em; color: #999; margin-top: -1em; margin-left: 5rem; filter: drop-shadow(0px 0px 0.2ex) blur(0.01ex)}

/* article */
	article {padding: 1ex; margin-left: 3ex; margin-right: 3ex;}
	.instigator {font-size: smaller; color: #8A8; margin-top: -3.5ex; margin-left: 5ex}

/* article images */
	.article-image {float: right; height: auto; width: 50%; max-width: 350px;}
	#pointless {filter: blur(1px) brightness(75%); max-width: 300px;}
	#dragons {max-width: 400px; margin: -50px;}
	#suspiscious {max-width: 400px;}
	#cloud1 {max-width: 328px}
	#palette {max-width: 287px}


/* image gallery */
	/* sample html
		<ul class="gallery" title="a gallery of images">
			<li><a href="image.jpg" alt="an image of a jpeg"><span class="caption>My new jpeg</span></a></li>
			<li><a href="image.png" alt="an image of a ping"><span class="caption>My new png</span></a></li>
		<ul>
	*/
	
		.gallery {
			clear: both;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
		}

		.gallery::before {
			content: attr(title);
			width: 100%;

			text-align: center;
			font-size: 5ex; color: #456; font-weight: bold;
		}

		.gallery li {
			width: 125px; height: 200px;
			margin: 1ex; padding: 0.5ex;
			display: inline;

			text-align: center;

			background-image: linear-gradient(45deg, rgba(64, 106, 192, 0.2), rgba(50, 50, 50, 0.1));
		}

		.gallery .caption::before {white-space: pre-wrap; content: "\A";} /* force caption onto new line*/
		
		.gallery li a {}
		.gallery a .caption:hover {}

		.gallery li img {width: 100px; height: auto;}
		.gallery li a:hover img {
			width: 200%; margin-left: -50%; margin-top: -50%; /* wtf this is witchcraft */
			transform: rotate(1deg);
		} 
		
		.gallery li:active {width: 800px; height: auto;} /* this might be a dumb thing to do */


/* navigation */
	nav {
			position: absolute; top: 0%; right: 10%;
			background-image: linear-gradient(45deg, rgba(60, 90, 120, 0.2), rgba(90, 120, 150, 0.1));
			padding: 0.5ex; margin: 0.5ex;
	}
	nav ul {display: inline; padding: 0}
	nav li {display: inline; padding: 0}
	nav li::after {content: "|"}
	nav li:last-child::after {content: ""}

/* footer */
	footer {
			border-top: 0.5ex dotted #7F779C;
			margin-top: 2.5em;
			color: #A9A;
			font-size: small;
			clear: both;
			background-image: linear-gradient(rgba(64, 106, 192, 0.4), rgba(0, 0, 0, 0));
		}
	footer p {margin: 1ex}
	.moon img {float: right; margin-right: 5ex; margin-top: 1.5ex; margin-bottom: 2ex; width: 64px; height: auto}

/* general */
	h1 {color: #DAD}
	h2 {color: #9C9;}
	/* heading doodads */
		#alchemy {padding-left: 1em; background: url('./assets/alchemy.earth.png') no-repeat left; background-size: 1em;}

	blockquote {font-size: 120%; color: #AAA;}

	a:link {color: #FFF}
	a:visited {color: #999}
	a:hover {color: #88F;  font-weight: bold;}
	a:active {color: #FFF; font-weight: bold;}

/* Shanty done it */