@font-face{
	font-family: "Space Grotesk";
	src: url("/fonts/SpaceGrotesk-VariableFont_wght.ttf");
}

:root{
	--back: #ffffff;
	--fore: #252525;
	--href: #000000;
	--primary: #eeeeee;
	--secondary: #cccccc;
	--accent: #666666;
	--shadow: #aaaaaa 3px 3px 7px;
	--hover-shadow: #666666 4px 4px 7px inset;
	--br-rad: 0.5em;
}

html{
	
	padding: 0;
	margin: 0;
}

body{
	font-family: "Space Grotesk", sans-serif;
	background-color: var(--back);
	color: var(--fore);
	font-size: 1.2em;
}

header{ text-align:center; }

main{
	margin: 5vw auto 5vw auto;
	width: 60%;
}

footer .footer-body{
	display: grid;
	background-color: #eee;
	grid-template-columns: 1fr 1fr;
	padding: 1em;
	border-radius:  0.5em 0.5em 0 0;
}

footer .footer-bar{
	background-color: #ccc;
	text-align:center;
	padding: 0.125em;
	border-radius:  0 0 0.5em 0.5em ;
}

h1,h2,h3,h4{
	margin: 0;
	padding: 0;
}

h1::before{
	content: "~/ ";
}
h1::after{
	content: " >";
}

h1{
	margin-bottom: 0.5em;
	font-weight: bold;
}

h2::before{
	content: ": ";
}

p{
	line-height: 1.6;
}

a{
	color: var(--href);
	transition: all 0.5s ease-in-out;
}

nav ul{
	margin: 0;
	padding: 0;
}

nav ul li{
	display: inline-block;
}

pre{
	padding: 1em;
	background-color: #eeee;
	border-radius: 0  0.5em 0.5em 0;
	border-left: solid var(--accent) 0.35em; 
}

pre code{
	font-family: monospace;
	font-size: 1.1em;
}

.tag{
	padding-right: 0.125em;
	background-color: #eee;
	padding-top: 0.1em;
	padding-bottom: 0.1em;
	padding-right: 0.5em;
	border-radius: 1em;
	box-shadow: #ddd 3px 3px 3px;
	transition: 0.5s ease-in-out;
}

.tag i {
	z-index: -1;
	background-color: var(--accent);
	color: #fff;
	border-radius:  1em 0 0 1em;
	padding: 0.1em;
	padding-right: 0.25em;
}

.tag a{
	color: var(--fore);
	text-decoration: none;
}

.tag a::after{
	all: unset;
}

.tag:hover{
	box-shadow: var(--hover-shadow)
}

.tags{ padding: 0; }

.tags li{
	display: inline-block;
}

.post-gallery{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 1em;
}

.post-summary a {
	text-decoration: none;
	color: var(--fore);
}

.post-summary{
	border-radius: var(--br-rad);
	margin-top: 1em;
	box-shadow: var(--primary) 4px 4px 3px;
	transition: all 0.5s ease-in-out;
}

.post-summary-header{
	margin: 0;
	background-color: #ccc;
	border-radius: var(--br-rad) var(--br-rad) 0 var(--br-rad);
	padding-left: 0.25em;
	transition: all 0.5s ease-in-out;
}

.post-summary-header:hover{
	box-shadow: var(--hover-shadow);
}

.post-summary-text{
	padding: 0.25em;
}

.post-summary .tag{
	font-size: 0.75em;
}

.photo-gallery{
	margin-top: 1em;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 1em;
	grid-row-gap: 1em;
	columns: 1em 2;
}

.photo-card{
	box-shadow: var(--shadow);
	border-radius:  0.5em;
	transition: box-shadow 1s ease-in-out;
}

.photo-card:hover{
	box-shadow: #666 4px 4px 7px inset;
}

.photo-card img{
	width: 100%;
	display: block;
	z-index: -1;
	border-radius:  0.5em 0.5em 0 0;
	position: relative;
	transition: box-shadow 1s ease-in-out;
}

.photo-card img:hover{
	box-shadow: #666 4px 4px 7px inset;
}

.photo-card-caption{
	padding: 0.5em;
}

.profile-card{
	display: grid;
	grid-template-columns: 1fr 3fr;
	grid-column-gap: 1em;
}

.profile-image{
	border-radius: 0.5em;
	box-shadow: var(--card-shadow);
	display: block;
	margin-top: auto;
	margin-bottom: auto;
	z-index: 1;
}

.profile-summary{
	border-radius: 0.5em;
	background-color: #eee;
	padding: 2em;
	margin-left: -2.5em;
}

@media only screen and (max-width: 850px){
	main{ width: 90%; }
	.post-gallery{ grid-template-columns: 1fr; }
	.profile-card{ grid-template-columns: 1fr; }
	.profile-summary { margin-left: auto; }
	.profile-image{ margin-left: auto; margin-right: auto; margin-bottom: -1.5em;  }
}