body {
  background: 
  url('Starrybg.png'),
  url('Starrybg.png'), 
  linear-gradient(to bottom right, #004444, #006666, #3333cc, #111144);
  background-size: 100%;
  background-blend-mode: overlay;
  color: #e5af37;
  font-family: sans-serif;
  font-size: 4vmin;
  margin: 0;
  padding: 0;
  text-align: center;
} 
:focus {
  outline: 2px solid #ffffff;
}
@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;
}
nav ul {
  display: flex;                
  justify-content: center;      
  align-items: center;          
  padding: 0;             
  margin: 0;
  margin-bottom: 1em;
  list-style-type: none;
  font-family: Dragonbones, sans-serif;
  background-color: #4d3b1f;
  border-top: 2px solid #e5af37;
  border-bottom: 2px solid #e5af37;
}

nav li {
  margin: 0 1em;                
}

nav li a {
  display: block;
  color: #e5af37;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.9);
  text-decoration: none;
}
    h2 {
  position: relative; 
  display: inline-block;
  border: 2px solid #cc9937;
  padding: 0 0.6em;
  margin: 0.5em;
  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;
  line-height: 1.2;
}
h2::before, 
h2::after {
  content: "";
  position: absolute;
  top: -25px;
  bottom: -2px; 
  width: 10px;
  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-size: 140% 140%;
  background-repeat: no-repeat;
}
h2::before {
  left: -11px;
}
h2::after {
  right: -11px;
  transform: scaleX(-1);
}
section {
  margin: 1em auto;
  max-width: 40ch;
  border: 3px solid #4d3b1f;
  outline: 3px solid #cc9937;
  background: linear-gradient(to bottom, #ddb585, #d8c099, #ddb585);
  color: #554437;
}
section ul {
  display: flex;
  flex-direction: column; 
  align-items: center;    
  padding: 0;
  margin-top: 0;
  margin-bottom: 1em;          
  list-style-type: none;
}
section li {
  text-indent: 0;         
  line-height: 1.4;
  font-size: 18;
}
h3{
  margin-bottom:0.3em;
  padding-bottom:0;
}
p {
  text-align: left;
  text-indent: 2em;
  font-size: 18;
  line-height: 1.4;
  max-width: 65ch;
  margin: 0 0.5em 0.5em 0.5em;
  padding: 0 0.5em 0.5em 0.5em;
}
#latest {
  text-align: left;
  text-indent: 2em;
  font-size: 18;
  line-height: 1.4;
  max-width: 65ch;
  margin: 0 0.5em;
  padding: 0 0.5em;
}
#iosig {
  text-indent: 15em;
  margin: 0 0.5em 0.5em 0.5em;
  padding: 0 0.5em 0.5em 0.5em;
}  
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-button {
  position: relative;
  display: inline-block;
  border: 2px solid #9da1a4;
  padding: 0.2em 0.8em;
  margin: 1em;
  background: linear-gradient(
    to right, 
    #9da1a4 0%, 
    #e8ebed 45%, 
    #ffffff 50%, 
    #e8ebed 55%, 
    #9da1a4 100%
  );
  font-family: sans-serif;
  font-size: 1rem;
  color: #33333a;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  cursor: pointer;
}
.gallery-button::before, 
.gallery-button::after {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 10px;
  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='%239da1a4'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.gallery-button::before { left: -9px; }
.gallery-button::after { right: -9px; transform: scaleX(-1); 
}
.gallery-grid {
  display: flex;       
  flex-wrap: wrap;     
  align-items: center;
  justify-content: center; 
  /* This creates even spacing between all items */
  gap: 4vmin; 
}

.gallery-grid img {
  width: 45vmin;
  /* Remove any existing margins that might interfere */
  margin: 0; 
}

/*.gallery-grid{
  display: flex;       
  flex-wrap: wrap;     
  align-items: center;
  justify-content: center;
}
.gallery-grid img{
  width: 40vmin;
}*/
#hiddenportal li a {
  color: rgba(255,255,255,0.3)
}
footer ul {
  display: flex;                
  justify-content: center;      
  align-items: center;          
  padding: 0;             
  margin: 0;
  margin-top: 1em;
  list-style-type: none;
  font-family: Dragonbones, sans-serif;
  background-color: #4d3b1f;
  border-top: 2px solid #e5af37;
  border-bottom: 2px solid #e5af37;
}
footer li a {
  display: block;
  color: #e5af37;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.9);
  text-decoration: none;
  margin: 0 1em;
}
footer li {
  display: block;
  color: #e5af37;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.9);
  text-decoration: none;
  margin: 0 1em;
}