:root {
    --primary-hs: 0 0%;
    --link-hs: 240 100%;
    --visited-link-hs: 271 68%;
    --l-0: 5%;
    --l-30: 30%;
    --l-80: 80%;
    --l-100: 95%;
    --l-link: 40%; }

@media (prefers-color-scheme: dark) {
    :root {
        --l-0: 95%;
        --l-30: 70%;
        --l-80: 20%;
        --l-100: 5%;
        --l-link: 75%; }
    img { filter: brightness(.85) contrast(1.1); }
}

@font-face {
font-family: 'Arapey Regular';
src: url('../fonts/Arapey-Regular.ttf') format('truetype');
font-weight: 1 999; }

@font-face {
font-family: 'Arapey Italic';
src: url('../fonts/Arapey-Italic.ttf') format('truetype');
font-weight: 1 999; }

html { vertical-align: baseline; }

body {
font-family: 'Arapey Regular', Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
line-height: 1.5; 
color: hsl(var(--primary-hs) var(--l-0));
background-color: hsl(var(--primary-hs) var(--l-100)); }

img {
display:  block;
max-width: 100dvw; }

section {
padding: 0 2em;
max-width: 35em; }

nav { padding:0 2em; }

@media (orientation: landscape) {
    body { 
        font-size: 2dvw;
        display: grid;
        grid-template-columns: calc((100dvh - 2.25em) * .67) 1fr;
        grid-template-rows: 2.25em 1fr;
    }
    
    nav {
        grid-column: 2 / span 1;
        grid-row: 1 / span 1;
        padding: 0 3em; }

    section {
        padding: 0 3em;
    }
    
    img.hero { height:calc(100dvh); }
    
    div#hero { 
        grid-column: 1 / span 1;
        grid-row: 1 / span 2;
        position: sticky;
        top: 0;
        height: 100vh; }
    
    div#wrapper { 
        grid-column: 2 / span 1;
        grid-row: 1 / span 2; }

    .tooltip .tooltipText { width: 20dvw; }
}

@media (orientation: portrait) {
    body { 
        font-size: 3dvh;
        line-height: 1.5; }
    
    img.hero { width:100dvw; }

    
    .tooltip .tooltipText { width: 20dvh; }
}


h1 { 
font-size: 1.5em;
margin: 0; }

h2 {
margin: 0;
text-transform: uppercase; }

h3 {
font-size: 2.5em; 
margin: .5em 0 0 0 }

h4 {
display: inline-block;
margin: 0; }

p, ol { margin-top:0 }

a { color: hsl(var(--link-hs) var(--l-link)); }

#lunarContainer p {
margin-top: 1.5em;
margin-bottom: 0;
}

.tooltip {
  font-size: .8em;
  position: relative;
  display: inline-block; }

.tooltip .tooltipText {
  visibility: hidden;
  background-color: black;
  color: #fff;
  padding: .5em;
  border-radius: 2px;
  position: absolute;
  z-index: 1; }

.tooltip:hover .tooltipText { visibility: visible; }