html, body
{
    height: 100%;
    margin: 0;
    padding: 0;
}

body
{
    overflow: hidden;
}

header h1
{
    display: none;
}
header
{
   background-color:transparent;
   border:0;
   box-shadow:0;
   box-shadow:none;
   width:2em;
   right:0;
   left:auto;
}
#returnto svg
{
   fill: #fafae6;
}


.intro, .pane
{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.intro
{
    background: #ce5858;
    color: #fafae6;
    font-family: 'Roboto Slab', sans-serif;
    transition: top 1s, left 1s, opacity 1s;
    z-index: 1;
}

.intro-content
{
    font-size: 2.6vw;
    left: 10%;
    position: absolute;
    top: 10%;
    margin-right:10%;
}

.pane
{
    background-color: #ce5858;
    color: #ce5858;
    display: none;
    font: normal 14pt/1.72  'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    overflow-y: scroll;
    transition: all 2s;
}

.pane-content
{
    margin: 10em auto 5em;
    padding: 0 2em;
    max-width: 32em;
    color: #363636;
}

.footnotes
{
    font-size:87%;
    margin-top:3em;
}

figure {
   margin:2em auto;
   padding:0;
   width:80%;
}

figure img {
   width:100%;
   height:auto;
   margin:auto;
}

figurecaption
{
    font-size:85%;
    display:block;
}

.pane h2
{
    font-family: 'Roboto Slab', sans-serif;
    font-size: 2em;
}

.pane.visible
{
    background-color: #fafae6;
    color: #000;
}

.pane-link
{
    opacity: 0;
    position: absolute;
    text-indent: -9999em;
    transition: opacity 0.5s;
    z-index:15;
}

.pane-link.visible
{
    opacity: 1;
}

.pane-link::before, .pane-link::after
{
    background: #FFF;
    border-radius: 1.5em;
    content: '';
    display: block;
    height: 1.5em;
    text-indent: 0;
    transition: all 0.5s;
    position: absolute;
    width: 1.5em;
}

.pane-link::before
{
    opacity: 0.5;
}

.pane-link::after
{
    opacity: 0;
}

.pane-link:hover::after
{
    opacity: 0.1;
    transform: scale(2);
}

.pane-link:hover::before
{
    opacity: 0.8;
}

.pane-link-first
{
    top: 0;
    left: 50%;
}

.pane-link-first::before, .pane-link-first::after
{
    top: 1.5em;
}

.pane-link-second
{
    top: 50%;
    right: 0;
}

.pane-link-second::before, .pane-link-second::after
{
    top: 0;
    right: 1.5em;
}

.pane-link-third
{
    bottom: 0;
    left: 50%;
}

.pane-link-third::before, .pane-link-third::after
{
    bottom: 1.5em;
}

.pane-link-fourth
{
    left: 0;
    top: 50%;
}

.pane-link-fourth::before, .pane-link-fourth::after
{
    left: 1.5em;
    top: 0;
}

.pane-link-intro
{
    top: 1.5em;
    right: 3em;
    z-index: 2;
}

.pane-link-intro::before, .pane-link-intro::after
{
    background: #ce5858;
    top: 0;
    right: 0;
}
aside 
{
     font-size: 80%;
     background-color:#f6f6e2;
     padding:1em;
     margin-top:2em;
}

@media only all and (max-width: 1000px) {
     .intro-content {font-size: 3vw;}
}
@media only all and (max-width: 800px) {
    .intro-content {font-size: 3.5vw;}
}
@media only all and (max-width: 600px) {
    .intro-content {font-size: 4vw;}
}
@media only all and (max-width: 500px) {
    .intro-content {font-size: 4.5vw;}
}
@media only all and (max-width: 400px) {
    .intro-content {font-size: 5vw;}
}