/*DEFAULTS*/

/*EFFECTS EVERYTHING*/

* {
  padding: 0px;
  margin: 0px;
  line-height: 1.5;
  box-sizing: border-box; 
}

/*THIS ZEROS OUT BROWSER DEFAULTS SO PAGE WILL LOOK THE SAME ON ALL BROWSERS*/

html, body {
  margin: 0px;
  padding: 0px;
}

html {
  overflow-y: scroll;
}

body {
     font-family: Microsoft JhengHei,Microsoft Sans Serif,Arial,sans-serif;/*web-safe font stack matched to Arial's length and line spacing*/
     font-size: 100%;
     text-align: center; /*DON'T CHANGE THIS!!! Combined with #layout below it makes the page centered in screen 
       but text is left-aligned by default*/
     color: ivory;
     font-weight: normal;
     background-color: #5e5e61;
}

#layout{
   /*max-width: 770px; */
   /*max-width: 1400px;*/
   /*max-width: 1800px;*/
   max-width: 95%;
   display: block;
   margin-left: auto;
   margin-right: auto;
   text-align: left; /*if something won't center using 'margin: 0 auto;' it's often bec. of this so change elements to 'text-align: center;' as needed*/
   margin-bottom: 20px;
}

ul,li,a {
  text-decoration: none;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 1.5rem;
}
/* NEVER DO THIS! */
/*li {float: left;} */

/*************************/

p {font-size: 1.2em; margin: 20px 40px 20px 40px;}

.fine-print {font-size: .85em;}

h1 {font-size: 3.75em; line-height: 1em; text-align: center; padding: 18px;}

h2 {font-size: 2em; text-shadow:5px 5px 40px purple; padding: 10px;}

h3{font-size: 1.5em; text-shadow:5px 5px 40px purple; margin-left: 0; margin-bottom: 10px; text-align: center;}

h4 {font-size: 1.2em;}

h5{font-size: 1.7em; color: #DDCCBA; text-shadow:0 0 1px black;}

h6 {font-size: .85em;}

}

h2.subheading {
    font-size: 1.25rem;
    font-weight: bold;
    margin-left: 32px;
}

.links {    
    color: ivory;
    text-align: left;
}

a.links:link { color: ivory; text-decoration:none; font-weight:normal; }
a.links:visited { color: ivory; text-decoration:none; font-weight:normal; }
a.links:hover { color: chartreuse; text-decoration:underline; font-weight:normal; }
a.links:active { color: blue; text-decoration:none; font-weight:normal; } 

.horiz-ctr {
    display: block; margin-left: auto; margin-right: auto;
} 

.longquote {
    width: 94%;
    padding-left: 35px;
    font-weight: normal;
    font-style: italic;
    font-family: arial;
    font-size: .8em;
}

.standard-margin {
     margin: 20px 0 20px 0;
 }

.indented {
    margin-left: 50px; }
 
.smallcapsbold {
    font-size: .77em;
    font-weight: bold; }
    
.nofloat {
    float: none; 
}

/***FOR TRANSLUCENT WHITENESS OVER DARKISH BACKGROUNDS***/
.whitish {
    background-color: rgb(255, 255, 255); 
    background-color: rgba(255, 255, 255, 0.5);
}
/*****/

.quotestyle {
    font-style: normal;
}

/***********FOOTER*****************/

#footercaption {
    text-shadow:5px 3px 4px black; font-weight: bold;
    margin-top: 125px;
} 

.footer {
    background: url(../images/noisenoise.jpg) center bottom no-repeat;
    margin-bottom: -32px; /*this got rid of an ugly bottom space under the footer background pic 2017-12-07*/
    width: 100%; 
    height: auto;
    color: #ddccba;
    padding: 10px 0;
}

   
/***********************PICTURE GALLERY**************************/

    .gallery {
      --gap: 16px;
      --min-width: 280px;     /* smallest size each photo is allowed to be */

      display: flex;
      flex-wrap: wrap;
      gap: var(--gap);
      padding: 16px;

      /* Optional: nice container styling */
      max-width: 1400px;
      margin: 0 auto;
      background: #0f0f0f;
    }

    .gallery figure {
      flex: 1 1 var(--min-width);   /* This is the magic line */
      margin: 0;
    }

    .gallery img {
      width: 100%;
      height: 100%;
      object-fit: cover;           /* or contain — your choice */
      display: block;
      border-radius: 8px;
    }

    /* Optional: make images same height in each row */
    .gallery figure {
      aspect-ratio: 4 / 3;         /* or 1/1, 3/2, 16/9 — whatever you like */
    }
}


.captionCtr {
  padding: 0.25rem 1rem 0.75rem 1rem; 
  text-align: center;
  font-size: 1.25rem;
  font-weight: bold;
}

.captionLft {
  padding: 0.25rem 1rem 0.75rem 1rem; 
  text-align: left;
  font-size: 1.25rem;
  font-weight: bold;
}

.top-row {
    height: 272px;
}

.top-row img {
  width: 100%;
  height: 100%;
  object-fit: scale-down; /* or 'contain', 'fill', 'none', 'scale-down' */
}

.middle-row {
    height: 544px;
}

.middle-row img {
  width: 100%;
  height: 100%;
  object-fit: scale-down; /* or 'contain', 'fill', 'none', 'scale-down' */
}

.bottom-row {
    height: 408px;
}

.bottom-row img {
  width: 100%;
  height: 100%;
  object-fit: scale-down; /* or 'contain', 'fill', 'none', 'scale-down' */
}

/*banner*/

.bg2 {
    position: fixed;
    inset: 0;
    background: url(../images/pangu_landscape.jpg) 
      center/cover no-repeat;
    /*50% 0 / auto 10% no-repeat fixed #A49180;*/
/*<img src="images/pangu_landscape.jpg" alt="Photo 3">                */
/*background: url(../images/john_henry_fuseli_nightmare_1781_small2.jpg) 50% 0 / auto 100% no-repeat fixed #A49180;*/
}