html {
        font-size: 100%;
        scroll-behavior: smooth;
}
body {
	  background: #fff;
        font: 1em/1.5 Arial, sans-serif;
        color: #333;
}
* {
        box-sizing: border-box;
}
a:link {
        text-decoration: underline;
}
a:active {
        color: purple;
}
a:visited {
        color: purple;
}
a:hover {
        text-decoration: none;
        color: purple;
}
a:focus {
        text-decoration: none;
        outline-offset: 2px;
}
main, header, footer, article {
        display: block;
}
.container {
	  padding: 1em;
        background: #fff;
	  max-width: 58em;
        border: none;
	  margin-top: 0;
	  margin-bottom: 0;
}
header {
        margin-bottom: 2.5em;
        text-align: center;
}
article p {
        font-size: 1.05em;
}
.contact {
        margin-top: 2.5em;
}
h1 {
        font-size: 2em;
        margin-top: 0;
}
h2, h3, legend {
        font-size: 1.3em;
}
h1, h2, h3, legend {
        font-family: "Gill Sans", "Trebuchet MS";
        font-weight: normal;
}
h2 {
        font-style: italic;
}
h2 span {
        display: none;
}
img {
        max-width: 100%;
        height: auto;
}
main ul {
        padding-left: 1.1em;
}
main ul li {
        margin-bottom: 1em;
}
footer ul li:first-of-type a img {
        position: relative;
        top: 2px;
        transition: 0.3s;
}
footer ul li:first-of-type a:hover img {
        opacity: 0.7;
}
footer {
        text-align: center;
	  border-top: thin solid #c0c0c0;
        padding-top: 1em;
}
footer ul {
	  margin: 0;
	  padding: 0;
}
footer ul li {
	  display: inline;
	  list-style: none;
}
footer li span {
	  padding: 0 0.1em 0 0.315em;
}
footer li span {
	  display: none;
}
footer li:last-child {
	  display: block;
	  margin-top: 1em;
}
span.story-intro {
        font-variant: small-caps;
}
fieldset { 
      padding: 0 0.5em 0.5em;
      border: thin solid #c0c0c0;
      border-radius: 0.25em;
      max-width: 25em;
      margin: 2em 0;
}
legend {
      padding: 0 0.5em;
      margin: 0 0 0.25em 0;
      border-bottom: none;
      width: auto;
}
fieldset img {
      display: block;
	float: left;
	margin-right: 0.75em;
      border-radius: 50%;
      filter: saturate(150%);
      shape-outside: circle(50%);
      border: medium solid #fff;
      box-shadow: 4px 2px 4px #e0e0e0;
      height: 125px; 
      width: 125px;
}
figure {
      display: none;
}
figure.figure-alt {
      display: block;
	width: auto;
	height: auto;
	text-align: center;
      margin: 2em 0;
}
figure.figure-alt img {
      border-radius: 4px;
}
figure.figure-alt figcaption {
      font-weight: bold;
      margin-top: -0.5em;
}
.modal {
      display: none; 
      position: fixed; 
      z-index: 1; 
      padding-top: 3.25em;
      left: 0;
      top: 0;
      width: 100%; 
      height: 100%; 
      overflow: auto; 
      background: rgb(0,0,0); 
      background: rgba(0,0,0,0.95); 
}
.modal img {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 50em;
}
.caption {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 31.25em;
      text-align: center;
      color: #ccc;
      padding: 0.625em 0;
      height: 9.375em;
}
a.close {
      position: absolute;
      top: 0.5em;
      right: 0.5em;
      font-size: 2.5em;
      font-weight: bold;
      transition: 0.1s;
      color: #f1f1f1;
      text-decoration: none;
}
a.close:hover {
      opacity: 0.8;
}
small {
      font-size: 0.95em;
}
.hide {
      display: none;
}
div.chronology {
      border-left: medium solid green;
      padding-left: 1em;
}
p.profile {
      font-size: 1.1em;
}
p.profile a img {
      height: 35px;
      width: 35px;
      border-radius: 50%;
      vertical-align: middle;
      transition: 1s;
      border: none;
}
p.profile a img:hover {
      opacity: 0.8;
}
span.little-star {
      font-family: Serif;
}


/* Large Screen */

@media only screen and (min-width: 700px) {
body {
        background: #f8f8f8;
}
.container {
	  margin: 1.5em auto;
	  border: thin solid #dcdcdc;
	  border-radius: 0.25em;
        padding-top: 1.5em;
}
footer li span {
	  display: inline;
}
footer li:last-child {
	  display: inline;
	  margin-top: 0;
}
main ul {
        padding-left: 2.5em;
}
fieldset { 
      max-width: 30em;
}
figure {
      display: block;
	width: auto;
	height: auto;
	text-align: center;
}
figure.rose, figure.warbler {
      float: right;
	margin: 0.75em 0 0 1em;
}
figure.nest, figure.grave {
      float: left;
	margin: 0.75em 1em 0 0;
}
figure.figure-alt {
      display: none;
}
figure img {
      cursor: pointer;
      border-radius: 4px;
      transition: 0.3s;
}
figure img:hover {
      transform: scale(1.05);
}
figcaption p:last-child {
	margin-top: -0.5em;
}
figcaption p:first-child {
	font-weight: bold;
}
figcaption {
	text-align: center;
	margin-top: -0.5em;
      font-size: 0.9em;
}
div.chronology {
      margin-left: 1.8em;
      margin-right: 3em;
}
h2 span {
        display: inline;
}
}

/* Extra Large Screens */

@media only screen and (min-width: 1600px) {
.container {
	  max-width: 60em;
}
}