@charset "utf-8";
:root{
--header-color: #223;
--header-color2: #543;
--header-hover-color: #a51;
--header-bgcolor: white;
--header-bgcolor2: #002233}
html{height: 100vh}
html, body{
width: 100vw;
overflow-x: clip}
html{
scroll-behavior: smooth}
header{
background: var(--header-bgcolor);
position: sticky;
top:0;
width: 100vw;
z-index: 10}
header a{
color: var(--header-color);
text-decoration: none}
header a[hreflang]{
color: #555;
font-variant: all-small-caps}
#nav{
padding: 1em;
display: grid;
grid-template-columns: 4fr 1fr;
align-items: center}
#nav a[rel="home"]{
font-variant: small-caps;
font-size: 1.6em;
line-height: .9;
background: url('../images/logo.svg') left/contain no-repeat;
padding-left: 2.5em}
#nav a[rel="home"] span{
font-size: .77em}
#nav ul{
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
position: absolute;
margin: 0;
top: 100%;
right: 0;
width: 100vw;
padding-top: 2em;
font-size: 1.3em;
background: white;
border-bottom: 8px solid black;
border-top: 1px solid black;
transform: scaleY(0);
transform-origin: top center;
transition: transform .1s ease}
#nav li{
margin: 1em;
width: 100%}
#nav li.icon{max-width: 20%}
#nav .icon img{
max-height: 2em}
#nav ul a:hover{
color: var(--header-hover-color)}
#nav ul :where(.active a){
font-weight: 600}
#nav li:has(.featured){
margin-top: 0;
margin-bottom: 0}
#nav .featured{
display: inline-flex;
flex-direction: row}
#nav .featured:before{
content: '★';
margin-right: .5em;
color: darkgoldenrod}
#menu-toggle{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-grid;
place-content: center;
color: var(--header-color);
border: 0;
border-radius: 10px}
#menu-toggle::before{
content: '☰';
font-size: 30pt}
#menu-toggle:checked{
background: black;
color: white}
#menu-toggle:checked::before{
content: '✕'}
#menu-toggle:checked + ul{
transform: scaleY(1)}
footer{
line-height: var(--footer-height);
color: dimgrey;
text-align: right;
padding: 0 2em;
font-size: small}
main{
padding: 1em}
main p{
hyphens: auto;
text-align: justify}
main img{
margin: auto;
max-width: 100%;
max-height: 90vh}
main a{
color: maroon;
font-weight: 600}
main :where(a:hover){
filter: brightness(300%)}
:where(main a:hover img){
filter: brightness(38%)}
main h1,
main h2,
main h3{
font-weight: normal}
.signature{
background: var(--flourish-icon) center no-repeat;
clear: both;
margin: 5vh auto;
height: 3em}
li{ break-inside: avoid}
iframe{
max-width: 100%;
display: block;
margin: 1em 0}
iframe[src*="youtube"]{ max-height: 50vw}
#gallery img{
display: block;
padding-top: 3vh;
margin-top: 10vh;
max-height: 97vh}
#gallery:target img{
object-fit: cover;
width: 100%;
height: 40vh}
#gallery > div{
position: relative}
#gallery .img-buttons,
#gallery .cover{
position: absolute;
display: flex;
width: 100%;
height: 100%;
margin-top: 2vh}
#gallery .img-buttons{z-index: 2}
#gallery:target .cover{z-index: 3}
#gallery .img-buttons a{
display: block;
flex-grow: 1}
#gallery .img-buttons a:nth-child(1){cursor: w-resize}
#gallery .img-buttons a:nth-child(2){cursor: all-scroll}
#gallery .img-buttons a:nth-child(3){cursor: e-resize}
blockquote{
background: floralwhite;
padding: .5em 1.5em .3em 1.6em;
border: 1px solid grey}
blockquote:before{
content: '‟';
color: maroon;
font-size: 30pt;
float: left;
padding-right: .1em;
text-indent: -.4em}