* {
	margin: 0;
	padding: 0;
	outline: 0;
	box-sizing: border-box;
}

@media ( prefers-color-scheme: light ) {
	:root {
		--bgcolor: #fafaf8;
		--text-color: #444;
		--highlight-color: #6c0;
		--link-color: #0066cc;
		--link-hover: #c00;
		--link-active: #60c;
		--img-border: #aaa;
		--lightbox-color: rgba(255, 255, 255, 0.85);
	}
}

@media ( prefers-color-scheme: dark ) {
	:root {
		--bgcolor: rgb(36, 35, 34);
		--text-color: rgb(129, 127, 125);
		--highlight-color: #6c0;
		--link-color: #06c;
		--link-hover: #900;
		--link-active: #60c;
		--img-border: rgb(8, 6, 4);
		--lightbox-color: rgba(0, 0, 0, 0.85);
	}
}

html {
	margin: 0;
	height: 100vh;
}

body {
	margin: 0;
	padding: 1em;
	width: 100%;
	height: 100vh;
	background-color: var(--bgcolor);
	font-family:
		"Avenir Next",
		"Avenir",
		"Century Gothic",
		"Candara",
		"Gadugi",
		"Calibri",
		"Helvetica Neue Light",
		"Helvetica Neue",
		"Helvetica",
		"Trebuchet MS",
		"Lucida Grande",
		"Arial",
		sans-serif;
	color: var(--text-color);
	position: relative;
	line-height: 2em;
}

a { text-decoration: none; font-weight: bold; }
a, a:visited { color: var(--link-color); }
a:hover { color: var(--link-hover); }
a:active { color: var(--link-active); }

#container {
	display: flex;
	flex-wrap: wrap;
}

#header {
    display: flex;
}

#header figure {

}

#header figure img {
	border: .25em solid var(--img-border);
	border-radius: 0.5em;
	width: 4em;
	height: 4em;
}

#header figure a:hover img {
	border-color: var(--link-hover);
    transition: all 0.25s ease;
}

#header #text {
	margin-left: 0.5em;
	margin-right: 0.5em;
}

#header #text h1 {
    font-size: 1.4em;
}

#header #text h2 {
    font-size: 1.4em;
    font-weight: 100;
    color: var(--highlight-color);
}

#thumbnails {
    display: grid;
    grid-column: span 1; /* important to prevent row/column gap overflow */
}

#thumbnails figure {
    position: relative;
    aspect-ratio: 7 / 9;
    overflow: hidden;
}

#thumbnails figure img {
	border: .25em solid var(--img-border);
	border-radius: 0.5em;
	width: 100%;
	height: 100%;
    object-fit: cover;
}

#thumbnails figure a figcaption {
	color: white;
	padding: 1em 1.5em;
	position: absolute;
	bottom: 0;
	right: 0;
	opacity: 0;
	transition: all 0.25s ease;
	text-align: right;
	font-weight: normal;
	line-height: 1.25em;
}

#thumbnails figure a:hover figcaption {
	text-shadow: 0 1px 2px #000;
	opacity: 1;
	transition: all 0.25s ease;
}

#thumbnails figure a:hover img {
    border-color: var(--link-hover);
    transition: all 0.25s ease;
}

/* ABOUT SECTION (AKA FOOTER) */

footer {
	width: 100vw;
	height: 100vh;
	display: block;
	cursor: pointer;
	background: var(--lightbox-color);
}

footer section {
	margin: 0 auto;
	max-width: 100vw;
	max-height: 100vh;
	aspect-ratio: 7 / 9;
	background: var(--bgcolor);
	box-sizing: border-box;
	overflow-y: scroll;
}

footer.lightbox {
	opacity: 0;
	transition: all 0.5s ease;
}

footer.lightbox:target {
	opacity: 1;
	transition: all 0.5s ease;
}

footer section img {
	width: 100%;
}

footer p {
	margin: 0 1em 0.5em;
	text-align: left;
}

footer nav {
	margin: 1em;
}

footer ul {
	list-style: none;
}

footer ul li {
	margin: 0 0.5rem 0.5rem 1rem;
	display: inline-block;
}

footer ul li a {
	display: block;
	width: 50px;
	height: 50px;
	background-color: white;
	background-size: cover;
	border-radius: 25px;
	background-position: top left;
}

footer ul li a.artstation {
	background-image: url(logos/artstation.png);
}
footer ul li a.bluesky {
	background-image: url(logos/bluesky.png);
}
footer ul li a.github {
	background-image: url(logos/github.png);
}
footer ul li a.instagram {
	background-image: url(logos/instagram.png);
}
footer ul li a.mastodon {
	background-image: url(logos/mastodon.png);
}
footer ul li a.tumblr {
	background-image: url(logos/tumblr.png);
}
footer ul li a.twitter {
	background-image: url(logos/twitter.png);
}
footer ul li a.youtube {
	background-image: url(logos/youtube.png);
}

footer ul li a:hover {
	background-position: top right;

}
footer p.microscopic {
	font-size: 2px;
}

footer .footer {
	margin-bottom: 1em;
}

footer .footer p {
	text-align: center;
}

footer h3 {
	margin: 0.5em 0;
}

footer h3, footer section .footer p span {
    color: var(--highlight-color);
}

/*** LIGHTBOX ***/

/* full window black background with centered content */
.lightbox {
    visibility: hidden;
    text-align: center;
    position: fixed;
    z-index: 99999;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: var(--lightbox-color);
    opacity: 0;
}

/* enable lightbox visibility */
/* don't fade this or it will fade the bg color */
.lightbox:target {
	visibility: visible;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* fade out artwork */
#artwork a.lightbox figure {
	position: relative;
	display: flex;
    opacity: 0;
    transition: all 1s ease;
}

/* fade in artwork */
#artwork a.lightbox:target figure {
	opacity: 1;
    transition: all 1s ease;
}

/* constrain image to available dimensions */
#artwork a.lightbox figure img {
	margin: 0 auto;
	width: auto;
	align-self: center;
	max-height: 100vh;
	max-width: 100vw;
}

/* position figure caption in lower right corner of image */
#artwork a.lightbox figure figcaption {
	position: absolute;
	color: #fff;
	bottom: 0;
	right: 0;
	padding: 1em;
	text-shadow: 0 1px 2px #000;
	opacity: 0;
	transition: all 0.5s ease;
	font-weight: normal;
}

/* display figure caption on mouse hover */
#artwork a.lightbox figure img:hover + figcaption {
	opacity: 1;
	transition: all 0.5s ease;
}

/*** MEDIA QUERIES ***/

@media (min-width: 1000px) {
    /* DESKTOP */
    #header {
        width: 25%;
    }
    
    #header h1, #header h2 {
        display: block;
    }
    
    #thumbnails {
        width: 75%;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 0.75em; /* must be a fixed value, not a percent */
    }
}

@media (max-width: 999px) {
    /* TABLET AND MOBILE */
}

@media (min-width: 600px) and (max-width: 999px) {
    /* TABLET ONLY */
    #thumbnails {
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 0.75em; /* must be a fixed value, not a percent */
    }
}

@media (max-width: 599px) {
    /* MOBILE ONLY */
    #thumbnails {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 0.75em; /* must be a fixed value, not a percent */
    }
    footer section {
    	aspect-ratio: unset;
    }
}