body {
  background: linear-gradient(to bottom right, #004444, #006666, #3333cc, #111144);
  color: #e5af37;
  font-family: sans-serif;
  font-size: 4vmin;
  margin: 0;
  padding: 0;
  text-align: center;
} 
:focus {
  outline: 2px solid #ffffff;
}
nav ul {
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style-type: none;
  font-family: Dragonbones, sans-serif;
  background-color: #4d3b1f;
  border-top: 2px solid #d4af37;
  border-bottom: 2px solid #d4af37;
  max-height: 2em;
}
nav li a {
  display: block;
  color: #e5af37;
  padding: 0 5vmin;
  padding-top: .5em;
  height: 100%;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
  text-decoration: none;
}
@font-face {
  font-family: 'Dragonbones';
  src: url("DragonbonesBB_reg.otf") format('opentype');
  font-weight: normal;
  font-style: normal;
}
h1 {
  margin: 1rem 0;
  display: inline-block;
  padding: 0.4em 2.3em;
  border: 3px solid #e5af37;
  background: linear-gradient(to right, #003333, #005555, #003333);
  font-family: Dragonbones, sans-serif;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.9);
  color: #11eeee;
}
h2::before {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 1.2em;
  /* The URL-encoded SVG string below */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='16 15 2 4'%3E%3Cpath d='M 18 19 L 17 19 A 1 1 0 0 0 16 18 L 16 16 A 1 1 0 0 0 17 15 L 18 15' fill='%23cc9937'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  /*background-size: contain;*/
  vertical-align: middle;
}
h2{
  display: inline-block;
  border: 2px solid #d4af37;
  /*background: linear-gradient(to right, #cc9937, #ffffaa, #cc9937);*/
  font-family: Dragonbones, sans-serif;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
  color: #554437;
}
h2::after {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 1.2em;
  /* Flipped Path: X coordinates mirrored across the center of 16-18 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='16 15 2 4'%3E%3Cpath d='M 16 19 L 17 19 A 1 1 0 0 1 18 18 L 18 16 A 1 1 0 0 1 17 15 L 16 15' fill='%23cc9937'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  /*background-size: contain;*/
  vertical-align: middle;
}
p {
  margin-top: 0;
  margin-bottom: 0;
}
a:active {
  color: #ffffff;
}
img {
  width: auto;
  max-width: 90vmin;
  height: auto;      
  display: block;
  border: 3px solid #4d3b1f;
  outline: 3px solid #cc9937;
  margin: 1em auto;
  box-shadow: 0 4px 4px rgba(0,0,0,0.9);
  border-radius: 4px;
}
.gallery-grid{
  display: flex;       /* Turns on the flex layout */
  flex-wrap: wrap;     /* Allows images to drop to the next line */
  align-items: center;
  justify-content: center; /* Centers the images on the page */
}
.gallery-grid img{
  width: 30vmin;
}
#hiddenportal li a {
  color: rgba(255,255,255,0.3)
}
footer ul {
  display: flex;
  justify-content: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
footer li a {
  display: block;
  color: #e5af37;
  padding: 14px 20px;
  text-decoration: none;
  font-family: Dragonbones, sans-serif;
}
footer li {
  display: block;
  color: #e5af37;
  padding: 14px 20px;
  text-decoration: none;
  font-family: Dragonbones, sans-serif;
}