body {
	background-color: #233D4D;
	color: #F4FFF8;
	font-family: "halyard-text", sans-serif;
	font-size: 24px;
	margin: 4rem;
	text-align: center;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "rival", serif;
	font-weight: 700;
}

a {
	color: #8AEA92;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	background: transparent;
	transition: all .2s ease-in-out
}

ul {
	text-align: left;
	display: inline-block;
}

header {
	font-size: 100%;
}

header img.profile {
	width: 40%;
	max-width: 300px;
	border-radius: 100%;
	border: 6px solid #F4FFF8;
}

header h1 {
	font-size: 400%;
	font-weight: 900;
	line-height: 1;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}
header h2 {
	font-size: 125%;
	font-weight: 300;
	font-style: italic;
}


main {
	position: relative;
	margin: 0px;
}
main h1 {
	border-top: 8px dotted #357266;
	display: inline-block;
	margin-top: 4rem;
}


main section h2:first-child {
	margin-top: 0px;
}

/* SOCIAL ICONS */

main section section.icon-list {
	display: grid;
	grid-column-gap: 1rem;
	grid-row-gap: 0rem;
}
main section section.icon-list a {
	text-decoration: none;
	color: white;
	width: 100%
	height: 100%;
	display: block;
	border-radius: 1rem;
}

main section section.icon-list div i, main section section.icon-list div span {
	display: block;
	width: 100%;
}

main section#social-links > a {
	display: inline-block;
	text-decoration: none;
	padding: 1rem 1.5rem;
	color: white;
	border-radius: 1rem;
}
main section#social-links > a:hover , main section section.icon-list a:hover {
	background-color: #071013;
	color: #F173AC;
}



main section section.gallery {
	background: repeating-linear-gradient(
		45deg,
		#071013,
		#071013 10px,
		#0B191E 10px,
		#0B191E 20px
	);
	padding: 2rem;
	box-shadow: inset 0.25rem 0.25rem 2rem rgba(0,0,0,1);
	border-radius: 1rem;
	overflow: auto;
}

main section section.gallery.grid {
	display: grid;
	grid-column-gap: 2rem;
	grid-row-gap: 2rem;
}

main section section.gallery.list ul li {
	margin-bottom: 1rem;
}

main section section.gallery.list ul li span {
	display: block;
	font-size: 0.8em;
}

main section section.gallery figure {
	width: 100%;
	height: 100%;
	margin: 0px;
}

main section section.gallery figure figcaption {
	display: none;
}


main section section.gallery figure a {
	/* Only doing this so that the pages have a solid background, 
	   so the stripes from the panel background don't bleed through */
	display: block;
	width: 100%;
	height: 100%;
	background-color: #000;
}

main section section.gallery figure a img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.cols2 {
	grid-column: span 2;
}

.cols3 {
	grid-column: span 3;
}


/* Smallest mobile sizes */
@media (min-width: 200px) {
	main section section.icon-list {
		grid-template-columns: repeat(4, 1fr);
	}
	main section section.gallery {
		grid-template-columns: repeat(2, 1fr);
	}
	/* Small social icons, no labels. Padding above and below icon only. */
	main section section.icon-list div i {
		font-size: 2.5rem;
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
	main section section.icon-list div span {
		display: none;
	}
}

/* Medium sizes */
@media (min-width: 680px) {
	main section section.icon-list {
		grid-template-columns: repeat(8, 1fr);
	}
	/* Enlarge social icons, restore labels. Padding above icon and below label. */
	main section section.icon-list div i {
		font-size: 3rem;
		padding-top: 1.5rem;
		padding-bottom: 0px;
	}
	main section section.icon-list div span {
		display: block;
		width: 100%;
		font-size: 1rem;
		padding-bottom: 1rem;
		padding-top: 0px;
	}

	/* Image galleries */
	main section section.gallery {
		grid-template-columns: repeat(4, 1fr);
	}
	main section section.gallery figure a img {
		opacity: 0.6;
		transition: all .2s ease-in-out
	}
	main section section.gallery figure a img:hover {
		opacity: 1;
		transform: scale(1.1);
	}
	/* Add hover effect to paragraphs */
	p a:hover, ul a:hover {
		color: #F173AC;
	}
}

/* Large desktop sizes */
@media (min-width: 1280px) {
	main section section.gallery {
		grid-template-columns: repeat(8, 1fr);
	}
	main section section.icon-list {
		max-width: calc( 1280px - 8rem );
		margin-left: auto;
		margin-right: auto;
	}
	main section section.icon-list div i {
		font-size: 3rem;
	}
}

/* Small, mobile sizes */
@media (max-width: 640px) {
	/* Set body and headline sizes smaller. Reduce margin */
	body {
		font-size: 18px;
		margin: 2rem;
	}
	header h1 {
		font-size: 300%;
	}
	/* Make galleries full-width of the site */
	main section section.gallery {
		border-radius: 0;
		margin-left: -2rem;
		margin-right: -2rem;
	}
}