:root {--background-color:#fff;--body-color:#000;--link-color:#222;--pin:#d32a27;} /* set colour vars */
*{ margin:0;box-sizing: border-box;text-decoration: none;font-family: sans-serif} /* fit page better */
*::selection { color:var(--background-color);background-color:var(--body-color) } /* nice highlights */
html {background-color: var(--background-color);color:var(--body-color);}
a {color:var(--link-color);}
a:not(nav *) {text-decoration: underline; font-style: italic;}

nav {width:100%;display:flex;justify-content: center;padding: 20px; border-bottom: 1px solid #222; }
nav ul { display: flex;flex-flow: row wrap;justify-content: space-between;width: 60%;margin: 2% auto;padding: 0;z-index: 999} 
nav li { list-style-type: none;font-size:45px;font-weight:bold;}
a:hover, a:active{color:var(--background-color);background-color:var(--body-color)}

header { position:absolute; left:0;top:0; padding:15px;}
header:hover {cursor:pointer;}

main { padding: 45px 27.5vw 45px 27.5vw; float:left; max-width:100vw;}
main img { width:100%; max-width: 45vw;}
main > * { max-width: 45vw; margin-bottom: 30px }
main > h1 { font-size:45px;}
main > h2 { font-size:30px;text-decoration: underline;}
main > h3 { font-size:20px;}
main > h4 { font-size:35px;}
main p { line-height: 25px; font-size:16px; margin-top: 0px;text-align: justify;}
main > ul { line-height: 25px;}

blockquote {font-style:italic;font-family: serif;font-size: 20px}
.author {text-align: right;font-family: serif;}

.ocean {width:100vw;height:100vh;background-color: #c6ecff}

.map {height:90vh;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin:auto;}
@namespace svg url(http://www.w3.org/2000/svg);
svg|a:link, svg|a:visited {
  cursor: pointer;
}

.gallery {display:flex;flex-flow:column;padding:0px;max-width: 100%;}
.row {display: flex;flex-flow: row nowrap;align-items: center;justify-content: space-around;}
.w1 {height:auto;object-fit: contain; padding:7.5px 7.5px;max-width: 40%;}
.w2 {height:auto;object-fit: contain; padding:7.5px 7.5px;max-width: 60%;}

@media only screen and (max-width: 1000px) {
main { padding: 45px 5vw 45px 5vw; float:left; max-width:100vw;}
main img { width:100%; max-width: 90vw;}
main > * { max-width: 90vw; margin-bottom: 30px }
nav li {font-size: 27px}
.map {width:90vw;height:auto;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin:auto;}
footer {font-size: 1.5em}
}

@media only screen and (max-width: 600px) {
nav li {font-size: 25px;}
}


details > summary { font-size:30px;font-weight: bold;}

/* Light styling for presentation */
details {
  border-block-end: 1px solid #000;
  margin-block: .5em;
  padding-block: 1em;
  width: 110%;
}