:root {
  --color-black: #202020;
  --color-grey: #CCCCCC;
  --color-secondary: #A8687D; /*pink*/
  --color-secondary-light: #BE8E9E;
  --color-primary: #68A893; /*mint*/
  --color-primary-light: #8EBEAE;
  --color-white: #E9E9E9;
  --padding-page: 12vh 20vw 2vh 10vw;
  --padding-mobile: 12vh 4vw 2vh 4vw;
  --padding-content: 1.4vh 0;
  --header-height: 12vh;
  --header-height-max: 140px;
}

@font-face {
	font-family: myDefaultFont;
	src: url(fonts/Pianaforma.ttf);}
	
html, body {
	height: 100%;
	background-color: var(--color-black);
}
body {	
	font-family: myDefaultFont, "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: var(--color-white);
	display: flex;
	flex-direction: column;
	margin: 0;
	font-size: 24px;
	overflow-y: scroll;
	overflow-x: hidden;
}
a {
	color:var(--color-primary-light);
	text-decoration:none;
}
a:hover {
	color:var(--color-secondary-light);
}
a div {
  	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease; /* Safari */
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}
nav {
	position:absolute;
	right:0;
	margin: 0;
	padding: 1vw;
	background-color:var(--color-black);
}
nav a {
	text-decoration:none;
	margin:0;
}
nav a:hover {
	font-family: myDefaultFont, "Trebuchet MS", Arial, Helvetica, sans-serif;
	border-bottom: 2px solid var(--color-secondary-light);
	}
nav a.selected {
	color:var(--color-secondary-light);
	font-family: myDefaultFont, "Trebuchet MS", Arial, Helvetica, sans-serif;
	border-bottom: 2px solid var(--color-secondary-light);
}
nav a.home {
    background-image: url(/images/logo-bun-mint.png);
    background-size: contain;
    background-repeat: no-repeat;
	background-position: right;
	height: 1.8em;
}
nav a.home:hover {
	background-image: url(/images/logo-bun-pink.png);
    background-size: contain;
    background-repeat: no-repeat;
}
nav a.home.selected {
	background-image: url(/images/logo-bun-pink.png);
    background-size: contain;
    background-repeat: no-repeat;
}
h1 {
	font-family: myDefaultFont, "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: var(--color-primary-light);
	margin: 0;
	padding: 6vh 0 2vh 0;
	text-transform:uppercase;
}
h2 {
	font-family: myDefaultFont, "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 1.5em;
	font-weight: normal;
	margin: 0;
	padding: var(--padding-content);
}
h3 {
	margin: 0;
	font-size: 1.25em;
	font-weight: normal;
	padding: var(--padding-content);
}
label {
	cursor: pointer;
}
p {
	margin: 0;
	padding: 3vh 0;
	line-height: 1.35em;
	font-size: 1.2em;
}
footer {
	flex-shrink: 0;
	padding: 0;
	padding: 2vh 4vw 2vh 4vw;
}
footer a {
	text-decoration: none;
	color: var(--color-primary-light);
}
footer a:hover {
	color: var(--color-secondary-light);
	
}
footer p {
	font-size:1em;
	padding: 0.5vh 0;
	text-align:right;
}
footer span {
	color: var(--color-white);
	padding: 0 1vw;
	font-size: 1.1em;
}


/* width */
::-webkit-scrollbar {
  	width: 1vw; 
	background: transparent;}
/* Track */
::-webkit-scrollbar-track {
	background: transparent;
}
/* Handle */
::-webkit-scrollbar-thumb {
  	background: var(--color-primary);}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  	background: var(--color-secondary); }


/* MOBILE */
@media screen and (max-width: 800px) {
	div.content img {
		width: 95%;
	}
	#label-menu {
		height: var(--header-height);
		width: 20vw;
		background-image: url(images/icon-menu.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 10vh;
		background-color: transparent;
		right: 0;
		position: fixed;
		z-index: 99;		
	}
	#input-menu:checked ~ #header {
		height: 100%;
		overflow: auto;
	}
	#input-menu:checked + #label-menu {
		background-image: url(images/icon-close.png);
		background-color: var(--color-primary-light);
	}
	div#header {
		overflow:hidden;
	}
	div#header a.home {
		width: 78vw;
		height: var(--header-height);
	}
	div.home-cover {
		display:none;
	}
	nav {
		top: var(--header-height);
		width: 100%;
		font-size: 2.5em;
		text-align: center;
	}
	nav a {
		display: block;
		padding: 3vh;
	}
	div.content,
	div.intro	{
		padding: var(--padding-mobile);
	}
	div.float-50 {
		padding: 2vh 0;
	}
	div.float-50 img {
		width: 95%;
	}
	img.index {
		display: none;
	}
	p.tagline {
		font-size: 1.75em;
	}
	div.blockquote {
		padding: var(--padding-mobile);
		background-position: 2vw 3vh;
		background-size: 16vh;
	}
	a.post-link {
		width: 96%;
		height: 18vh;
	}
}

/* DESKTOP */
@media screen and (min-width: 801px) {
	div.content {
		padding: var(--padding-page);
	}	
	div.content img {
		max-width: 800px;
		max-height: 800px;
	}
	div#header {
		max-height: var(--header-height-max);
	}
	div#header a.home {
		width: 60vw;
		margin-left: 2vw;
	}
	div.home-cover {
		background-color: var(--color-black);
		position:absolute;
		width: 62vw;
		height: var(--header-height);
	}
	div#header a.home.index {
		display:none;
	}
	nav {
		top:0;
		font-size: 1.5em;
	}
	nav a {
		padding: 0.25em;
	}
	img.index {
		width: 100%;
	}
	p.tagline {
	}
	div.intro {
		background-color: var(--color-black);
		z-index:99;
		margin-top: var(--header-height);
		padding: 2vh 12vw 6vh 10vw;
	}
	div.intro h1 {
		padding-top: 0;
	}
	div.float-50 {
		width: 50%;
		display: table-cell;
		vertical-align: middle;
	}
	div.float-50 img {
		width: 85%;
		float: left;
	}
	div.blockquote {
		z-index: 99;
		background-position: 10vw 3vh;
		background-size: 10%;
		padding: 4vh 0;
	}
	div.blockquote p {
		padding: 2vh 12vw 2vh 18vw;
	}
	div.blockquote p.link {
		padding: 0 10vw;
		font-size: 1.2em;
	}
	a.post-link {
		height: 18vh;
		min-height:100px;
		width: 20vw;
		min-width: 300px;
		max-width: 500px;
	}
	a.post-link span {
	}
}

/* DEFAULT STYLES */
#input-menu {
	display: none;
}
div.blockquote p {
	color: var(--color-black);
	font-size: 1.4em;
	line-height: 1.5em;
}
div.blockquote p.credit {
	font-size: 1em;
	line-height: 1em;
	padding-top: 0;
}
div.blockquote {
	background-color: var(--color-primary-light);
	background-image: url(images/pullquote.png);
	background-repeat: no-repeat;
}
div.blockquote a {
	color: var(--color-black);
}
div.blockquote a:hover {
	color: var(--color-white);
}
div.content {
	flex: 1 0 auto;
}
div.content img {
	margin: 2vh 4vw 2vh 0;
}
div.content img,
.border {
	border: 2px var(--color-primary) solid;
}
div.content p {
	max-width:650px;
}
div#header {
	color:var(--color-white);
	position:fixed;
	width:100%;
	height: var(--header-height);
	background-color: var(--color-black);
}
div#header2::after {
	content: "";
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	top: 12vh;
	background-image: linear-gradient(to top, 
		transparent, 
		var(--color-black) 90%);
	width: 100%;
	height: 1em;
}
div#header a.home {
	position: absolute;
	height: var(--header-height);
	background-image: url(images/logo-header.png);
	background-repeat: no-repeat;
	background-position: left;
	background-size: contain;
}
div#header img {

}
div#header img.home {
	height:90%;
	padding: 3vw 0 0 4vw;
}
p.tagline {
	text-align:right;
	font-size: 2em;
}
a.post-link {
	background-size: cover;
	overflow: hidden;
	float:left;
	margin: 2vh 2vw 2vh 0;
	padding: 6vh 2vw 2vh 0;
	border: 2px solid var(--color-primary);
}
a.post-link span {
    background-color: var(--color-primary);
    padding: 3% 7% 2% 6%;
    color: var(--color-black);
	font-size: 1.3em;
}
a.post-link:hover {
	filter: brightness(110%);
	border: 2px solid var(--color-primary);
}
a.post-link:hover span {
	filter: brightness(110%);
}
p.sig {
	text-align:right;
}
p.sig img {
	margin:0;
	padding:0;
	border: none !important;
	width: 20vw;
	min-width: 275px;
	max-width: 350px;
}
div.divider {
  position: relative;
  margin-top: 10vh;
}
div.divider:before {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
}
div.divider:after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -7px;
  left: calc(50% - 7px);
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  background-color: var(--color-black);
  border-bottom: 2px solid var(--color-primary);
  border-right: 2px solid var(--color-primary);
}
div.divider2:after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -5px;
  left: calc(50% - 10px);
  width: 20px;
  height: 12px;
  background-color: var(--color-black);
  border-left: 2px solid var(--color-primary);
  border-right: 2px solid var(--color-primary);
}
div.scallop-down {
	height:30px;
	width:100%;
	margin-top: 12vh;
	background: -webkit-gradient(radial, 50% 0, 10, 50% 0, 40, from(var(--color-black)), color-stop(0.49, var(--color-black)), color-stop(0.51, transparent), to(transparent));
	-webkit-background-size: 33px 100%;
}
div.fade {
	position: absolute;
	top: 12vh;
	background-image: linear-gradient(to top, 
		transparent, 
		var(--color-black) 90%);
	width: 100%;
	height: 1em;
}

/*FORMAT CLASSES*/
.clear {clear: both;}
.floatright {float: right;}
.floatleft {float: left;}
.hide {display: none;}