*, *::before, *::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 1.2em;
margin: 0; padding: 0;
background: #2d4150;
background: linear-gradient(115deg, rgba(220, 200, 120, .1) 0%, rgba(160, 150, 100, .1) 10%, rgba(70, 120, 145, .9) 60%, rgba(160, 200, 220, .1) 100%), radial-gradient( ellipse closest-side, rgba(40,100,110,1) 0, rgba(25,35,50,1) 80%);
background-attachment: fixed;
color: #b6c39c;
max-width: 100vw;
overflow-x: hidden;
}

img {max-width: 100%; height: auto;}

a {
text-decoration: none;
color: #51a7a7; 
transition: .9s ease-in-out; transition-delay: 0s;
}
a:hover, a:focus { text-decoration: none; text-shadow: 0px 0px 5px rgba(110,235,235,0.9); transition: 0.5s; transition-delay: 0s;}
a.back { opacity: 0.7 }
a.back:hover { opacity: 1 }
a.light{color:#a5eae2;}
a.light:hover { color:#f8e8ce; text-shadow: 0 0 15px rgba(255,255,255,0.5), 0px 0px 2px rgba(235,180,180,0.9);}
a.subtle {color:#877d6c;}
a.subtle:hover { color:#5c9693; text-shadow: 0 0 10px #877d6c;}

p {
margin: 0 0 5px 0;
padding: 0;
text-shadow: 0px -1px 1px #b6c39c;
transition: .9s; transition-delay: 0s;
}
p:hover, p:focus {
text-shadow: 0 0 1px #d6e6b7, 0 0 10px rgba(255,255,255,.5), 0px -1px 1px #b6c39c;
}

h2, h3, h4 {
font-family: "Open Sans", sans-serif;
line-height: 100%;
text-align: center;
margin: 0;
}
h1 {
font-family: "Lora", serif;
display: block;
color: transparent;
letter-spacing: -.1vw;
line-height: 90%;
text-align: center;
margin: 20px 0 0 0;
color: #467896;
text-shadow: 0 .2em .5em #6aa8a8, -.1em .5em .5em #b5fffa, 0 2px 13px #ededa7, 0px -2px 1px #96aadc;
}
h1 span {
background-color: #786e96;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
text-shadow: 0 .2em .5em #6aa8a8, -.1em .5em .5em #b5fffa, 0 2px 13px #ededa7, 0px -2px 1px #96aadc;
}
h2 {
color: #dbf1c7;
margin-bottom: 12px;
text-shadow: 0 .1em .2em #6aa8a8, -.05em .3em .2em #b5fffa, 0 4px 7px #ededa7, 0px -1px 1px #96aadc;
}
h3 {
margin-top: 10px;
font-size: 1.6em;
font-weight: 500;
color: #7dc3c3;
text-shadow: 0 -1px 0 #b1b368, 0 -1px 1px #ccf4f4, 0 0 2px #acc098, 0 .1em .2em #6aa8a8;
}
.set h3 { margin: 20px 0 10px 0;}
h4, h4 a {
margin-top: 5px;
font-size: 1.3em;
font-weight: 500;
color: #68b3ab;
text-shadow: 0 -1px 0 #70a9e1, 0 -1px 1px #ccf4f4, 0 0 2px #acc098, 0 .1em .2em #205b5b;
}

.center {text-align: center}
.medium {font-size: 1.2em}
.large {font-size: 2em}
.larger {font-size: 2.5em}
.lora {font-family: "Lora", serif;}
.small {font-size: .8em}
.smaller {font-size: .6em}

hr {
  background-color: rgba(0,0,0,.1);
  padding: 0;
  margin: 10px;
  border: 0;
  height: 1px;
}

.bc {
background: rgba(0,0,0,.5); font-size: .8em; line-height: 2em; text-align: center; box-shadow: 0 2px 30px rgba(255,255,255,.3),0 1px 10px rgba(80,167,167,.4); margin: 0 0 1em 0;
}
.bc>span {
display: inline-block;
line-height: 1em;
}

#buttons{
    float:right;
    position:relative;
    left:-52%;
    text-align:left;
}
#buttons ul{
    list-style:none;
    position:relative;
    left:50%;
}
#buttons li {float:left; position:relative;}/* ie */

#buttons a{
  font-size: 1.2em;
  font-weight: 600;
  border-radius: 25px;
  display: inline-block;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
  height: 1.8em;
  line-height: 1.7em;
  text-transform: uppercase;
  padding: 0 1em;
  box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(110,80,20,.4),
              inset 0 -2px 5px 1px rgba(139,66,8,1),
              inset 0 -1px 1px 3px rgba(250,227,133,1);
  background-image: linear-gradient(160deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07);
  border: 1px solid #a55d07;
  color: rgb(120,50,5);
  text-shadow: 0 2px 2px rgba(250, 227, 133, 1), 0 1px 0 rgba(250, 250, 240, 1), 0 -1px 0 rgba(100, 120, 50, .5);
  transition: all .2s ease-in-out;
  background-size: 100% 100%;
  background-position:center;
  margin: 0 5px;
  text-align:center;
  white-space:nowrap;
}
#buttons li a:hover, #buttons li a:focus{ 
  transform: translateY(-1px);
  background-size: 150% 150%;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23),
                inset 0 -2px 5px 1px #b17d10,
                inset 0 -1px 1px 3px rgba(250,227,133,1);
  border: 1px solid rgba(165,93,7,.6);
  color: rgba(120,50,5,.8);
}
#content {overflow:hidden}/* hide horizontal scrollbar*/

.button-info {
position: absolute; 
top: 20px; right: 20px; 
width: 50px; height: 50px; 
border-radius: 50%; 
background: rgba(45,65,80,.1);
color: #7dc3c3; 
font-size: 30px; 
font-weight: 600;
text-align: center; 
line-height: 45px; 
box-shadow: inset -5px .2em .5em #6aa8a8, -.1em .5em .5em #b5fffa,0 .2em .5em #6aa8a8, -.1em .5em .5em #b5fffa, 0 2px 13px #ededa7, 0px -2px 1px #96aadc;
animation: pop-in-bounce 2s ease-out 3s 1;
}
.button-info a {
display: block;
border-radius: 50%; 
width: 50px; height: 50px;
}
.button-info a:hover, .button-info a:focus {
border-radius: 50%; 
box-shadow: inset 5px -.2em .5em #6aa8a8;
}

@keyframes pop-in-bounce {
  0%   { opacity: 1; transform: scale(1); }
  15%   { opacity: .5; transform: scale(0.1); }
  25%  { opacity: 1; transform: scale(1.3); }
  40%  { opacity: .7; transform: scale(0.6); }
  65%  { opacity: 1; transform: scale(1.2); }
  100% { transform: scale(1); }
}

header, footer {
  width: 100%;
  text-align: center;
  padding: 10px;
}
footer {  }

.set{
width: 100%;
margin-bottom: 5px;
}
.set:after, #buttons:after{
content: '';
display: block;
clear: both;
}

nav { width: 28%; height: 70%; position: middle; margin: 40px auto;}
.spine { position: relative; text-align: center; margin: auto;}
  
@media (width <= 999px) {
  article {
  width: 95%; float: none;
  margin: 0 2.5%;
  }
  h1 {font-size: 11vw;}
  h2 {font-size: calc(1.3vw + 1em);}
  h4>span {display: block; font-size: .6em; line-height: 90%}
  nav { width: 90%; height: 70%; }
  nav.keyed {visibility: hidden;}
  nav.keyed>.spine {visibility: hidden; opacity: 0;}
}
@media (width >= 1000px) {
  article {
  width: 37%;
  margin: 0 2.5%;
  }
  h1 {font-size: 7vw;}
  h2 {font-size: calc(1.5vh + 1.8em);}
  h4>span {display: block; font-size: .8em; line-height: 95%}
}

details {
background: rgba(0,0,0,.1);
border-radius: 20px;
margin: 0 0 2px 0;
}
details > summary {
  text-align: center;
  padding: 5px 5px 5px 15px;
  margin: 0 0 7px 0;
  width: 100%;
  background: rgba(20,25,40,.1);
  font-weight: 600;
  letter-spacing: normal;
  border: 3px double #467896; border-radius: 1em;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
  transition: .9s ease-in-out; transition-delay: 0s;
  list-style: none;
}
summary::-webkit-details-marker {
    display: none; /* Hides the arrow in WebKit browsers like Safari */
}

summary::after { content: ' +';}
details[open] summary:after { content: " -";}

details > summary:hover {
  background: rgba(70,120,150,.5);
  color: #96cfcc;
  letter-spacing: .5px;
  border: 3px double #467896; border-radius: 1em;
  cursor: pointer;
}

details > p {
  padding: 5px 20px;
  margin: 0 0 5px 0;
}
details::details-content { opacity: 0; transition: opacity 0.6s ease;}
details[open]::details-content { opacity: 1;}