:root {
  --main-color: #39f;
  --visited-links: #205893;
  --text-color: #333;
  --dark-gray: #354144;
  --med-gray: #999;
  --lt-gray: #ccc;
  --post-width: 51rem;
}

*, *::before, *::after {
  box-sizing: border-box;
}

.outer {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* clamp(minimum, preferred, maximum); */

body {
	margin:0;
	/*  font size 16px to 22.08 */
	font-size: clamp(100%, 2.5vw, 138%);
	font-family: system-ui, sans-serif;
	color: var(--text-color);
	background-color: white;
	line-height: 1.4;
	animation: fadeInAnimation ease 2s;
}

header img {
	max-width: 1.5em;
}
header {
	padding: 2vw;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

@media only screen and (min-width: 800px) {
	header {padding: 3vw 10vw;}
}

footer {font-size:90%;}
footer .copyright {text-wrap: nowrap;}
footer {
	padding: 2vh;
	background-color: #eee;
}

@media only screen and (min-width: 800px) {
	footer {padding: 2vw 10vw;}
}

@keyframes fadeInAnimation { 
	0% { 
		opacity: 0; 
	} 
	100% { 
		opacity: 1; 
	 } 
} 

main {
	flex-grow: 1;
	padding: 0 2vw;
}

:focus {
	outline: 1px solid var(--main-color);
}

/* typography section */

h1, h2, h3, h4, h5, h6 {
	margin: .5em 0 .1em;
	text-wrap: balance;
}
h1 {}
h2 {}
h3 {}
h4 {}
	
p {margin-top:0; text-wrap: pretty}

.post .text>p:first-of-type {
	font-size: 120%;
}

.post p, .post ul, .post ol, .post table, .post .meta {
	max-width: var(--post-width);
	margin: 0 auto 1em;
}

.post h1, .post h2, .post h3, .post h4, .post h5, .post h6 {
	max-width: var(--post-width);
	margin-left: auto;
	margin-right: auto;
}   

.post pre {
	max-width: var(--post-width);
	margin: auto;
	overflow: auto;
}

.post .meta {
	color: var(--med-gray);
} 

.post table {}
.post table th {text-align: left; padding: 0 .5em;}
.post table td {padding: 0 .5em;}

.meta, .caption {
	color: var(--med-gray);
	margin: 1em 0;
}

.caption {
	text-align: center;
}

ul, ol {margin: .25em 0 1em;}

a { color: var(--main-color);
	transition: all .5s ease;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
	text-decoration-style: dotted;
}
a:visited {
	color: var(--visited-links);
}	
a:hover {
	color: var(--main-color);
}

.home .work, .portfolio .work, .writing .posts, .about a.about {
	color: var(--text-color);
	font-weight: bold;
}

.dark {
    background-color: var(--dark-gray);
    color: white;
	padding-top: 1em;
	padding-bottom: 1em;
}

.dark h2:first-of-type {margin-top: 0;}

.dark a, .dark a:visited, .dark a:hover {color: white;}

header a, footer a {
	margin-right: .5em;
}

/* images section*/

img.full-width {
	max-width: 100%;
	display: block;
	margin: 0 auto .25em;
}
img.retina, img.shrink, img.inline {
	max-width: 100%;
}
img.border {
	border: 1px var(--lt-gray) solid;
}
img.float {
	float: left;
	margin: .25rem 1rem .5rem 0;
}
img.round {
	border-radius: 50%;
}
img.rounded {
	border-radius: 10%;
}

img.center {
	display: block;
	margin: 0 auto;
}

.mom {
	max-width: 50rem;
	margin: 0 auto 1em;
}

.mom .shrink {
	max-width: 20vw;
}