@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,500,700'); 
@import url('https://fonts.googleapis.com/css2?family=Petrona:ital,wght@0,100..900;1,100..900&display=swap');


/* reset */
html {box-sizing: border-box; font-size: 22px;}
*, *::before, *::after {-sizing: border-box;}
* {margin: 0; padding:0;}
img, picture, video, canvas, svg {display: block; height:auto; max-width: 100%;}
input, button, textarea, select {font: inherit;}
p, h1, h2, h3, h4, h5, h6 {overflow-wrap: break-word;}
p {text-wrap: pretty;}
h1, h2, h3, h4, h5, h6 {text-wrap: balance;}
a {color:currentColor; text-decoration: none;}
#root, #__next {isolation: isolate;}


/* layout */
body {
	background-color: white;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	color: black;
	font: inherit;
    font-family: Petrona, serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
	line-height: 1.4rem;
	margin: 0;
	max-width: 100%;
	padding: 0;
	text-align: left;
	text-shadow: 0;
	text-transform: none;
	}
body.details {
	background: rgba(111, 111, 166, .1);
	background: linear-gradient(180deg, rgba(111, 111, 166, .1) 0%, rgba(111, 111, 166, .3) 100%);
	}
div.pics-l, div.pics-p {margin: 0px; max-width: 100%} /* responsive layout  for vert/horz images and links */
@media (orientation: portrait) {body.zero, body.rc, body.pp{background-image: url('pics/back-fast-p.png')}} /* responsive backgrounds */
@media (orientation: landscape) {body.zero, body.rc, body.pp{background-image: url('pics/back-fast-l.png')}}
@media (orientation: portrait) {body.zero-outline, body.rc-outline, body.pp-outline{background-image: url('pics/back-outline-p.jpg')}} 
@media (orientation: landscape) {body.zero-outline, body.rc-outline, body.pp-outline{background-image: url('pics/back-outline-l.jpg')}}
@media (orientation: portrait) {div.pics-l {display: none} div.pics-p {display: block; position: relative}} /* v pics show for vertical screen */
@media (orientation: landscape) {div.pics-l {display: block; position: relative} div.pics-p {display: none}} /* h pics show for horz screen */
div.pics-l img, div.pics-p img {box-shadow: 2px 2px 8px; margin: 0 1% 0 1%; width: 98%} /* make vert/horz pics fill div */
div.pics-l > a > div, div.pics-p > a > div {background-color: rgba(0, 0, 0, 0);position: absolute} /* responsive image map on top of image */
audio {
	height: 26px;
	margin: 1%;
	opacity: .6;
	width: 98%;
	}
audio:hover {
	transform: scale(1);
	filter: drop-shadow(2px 2px 2px black);
	}

/* text */
h1 {
	font-size: 2rem;
	margin: 1rem 0 .5rem 1%;
	text-align: left;
	}
h2 {
	font-size: 1.3rem;
	font-weight: normal;
	margin: 1rem 0 .5rem 1%;
	text-align: left;
	}
h3 {
	font-size: 1rem;
	font-weight: 700;
	font-style: italic;
	margin: .5rem 0 0 0;
	text-align: left;
	}
h4 {
	font-size: 1rem;
	font-weight: 500;
	font-style: italic;
	margin: .5rem 0 0 0;
	text-align: left;
	}
hc { /* comment */
	display: block;
	font-size: 1rem;
	font-weight: 500;
	font-style: italic;
	margin-bottom: -.5rem;
	text-align: left;
	}
hc:before { /* comment */
	content: 'Comment'; 
	}

details {
	margin: 1rem 1% 0 2%;
	}
details[open] > summary {
	/* list-style-type: '-  '; /* 2039< 203A> 2190-3arrows 00AB<< 00BB>> 25B3-C3 B3up BDdown*/
	color:rgba(0, 0, 0, 1);
	}
summary {
	cursor: pointer;
	font-size: 1.3rem;
	font-weight: bold;
	/* list-style-type: '\25B9  '; */
	list-style-position: inside;
	margin: 0 0 .5rem 0;
	}
summary::marker {
	color:rgba(111, 111, 166, 1); 
	font-size: 1.5rem;
	}
details details > summary {
	font-size: 1rem;
	font-weight: bold;
	}
details details > summary::marker {
	color:rgba(111, 111, 166, 1); 
	font-size: 1rem;
	}
p {
	margin: .5rem 1% 0 1%;
	text-align: justify;
	text-indent: 3%;
	text-justify: inter-word;
	}
p.poem {
	font-style: italic;
	}
p.subtitle {
	font-style: italic;
	margin: .5rem 1% 0 1%;
	text-indent: 0;
	}
p.qt {
	margin: 0 0 .5em 0;
	}
p.qt:before {
	color: #F49D04;
	content: '\201C'; /* ldquo */
	display:inline;
	font-size: 2em;
	margin: 0;
	padding: 0 .1em 0 0;
	position: relative;
	top: .2em;
	}
b {
	font-weight: bold;
	}
u {
	text-decoration: underline;
	}
m {
	border: 2px solid black;
	background-color: black;
	color: white;
	display: inline;
	font-family: Montserrat, sans-serif;
	font-weight: bold;
	letter-spacing: .1em;
	position: relative;
	text-transform: uppercase;
	}
v {
	color:rgba(111, 111, 166, 1); 
	display: inline;
	font-size: .7rem;
	position: relative;
	top: -.3rem;
	}
	

/* special elements */
/* title */
div.title {
	background-image: url(pics/7pp-logo-color.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	margin: 5px 0 0 5px;
	}
div.title li { /* page title */
	font-size: min(8vw, 3rem);
	font-weight: 600;
	letter-spacing: -.05rem;
	line-height: 10vw;
	list-style: none;
	padding-left: max(15vw, 66px);
	text-align: left;
	}
div.title  p { /* page subtitle */
	font-size: 1rem;
	font-style: italic;
	margin: 0;
	padding-left: max(15vw, 66px);
	text-align: left;
	text-indent: 0;
	}
/* hr */
hrsvg { /* slide separators */
	background-image: url(pics/rule.svg);
	background-repeat: no-repeat;
	background-size: contain;
	border: 0; /* 1 solid black; */
	display: block;
	height: 5%;
	margin: 2% auto 2% auto;
	opacity: .3;
	width: 19%;
	}
hr {
	margin: 1em 1vw 1em 1vw;
	opacity: 0.5;
	}
/* links */
a > h2::after {
	color:rgba(111, 111, 166, 1); 
	content: ' \2197'; /* 2924 21D7 2197 nearrow  21A0 */
	font-size: 1em;
	font-weight: 900;
	}
p > a::after {
	color:rgba(111, 111, 166, 1); 
	content: ' \2197'; /* 2924 21D7 2197 nearrow  21A0 */
	font-weight: 900;
	}
/* index page "menu" */
div.fbox {
	display: flex;
	flex-wrap: wrap;
	margin: 1rem 0 1rem 0;
	justify-content: space-evenly;
	}
div.fbox div {
	background-color: rgba(255, 255, 255, .2);
	box-shadow: 2px 2px 8px black;
	flex-basis: 20%;
	flex-grow: 1;
	height: 100%;
	margin: 1vw;
	}
div.fbox div p {
	background-color: transparent;
	font-size: 4vw;
	font-weight: 700;
	letter-spacing: .1vw;
	line-height: 5vw;
	margin: 4vw auto 4vw auto;
	text-align: center;
	text-transform: uppercase;
	width: 100%;
	}
/* embedded video */
div.videobox {
	border: 1px solid black;
	margin: .5em 0 .5em 0;
	max-width: 100%;
	overflow: hidden;
	padding-top: 56.25%;
	position: relative;
	}
div.videobox iframe {
	border: 0;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	margin: 0;
	}
/* modal popup images */
.modal {
	align-items: center;
	background-color: white;
	bottom: 0;
	display: flex;
	justify-content: center;
	left: 0;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	visibility: hidden;
	}
.modal:target {
	visibility: visible;
	opacity: 1;
	}
img.popup {
	left: 50%;
	max-height: 96vh;
	max-width: 96vw;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	}