/***** PAT'S ART PATH HOMEPAGE *****/
/***** GLOBAL VARIABLES & STYLES */
:root {
   --color-background-html: rgba(254, 234, 199, .47);
   --color-background-footer: rgba(123, 121, 143, .5);

   --color-background-jungquote: rgba(123, 121, 143, .7);
   --color-text-jungquote: #fff;

   --color-background-gallery-stripe: rgb(171, 192, 200);
   --color-hover: rgb(142, 0, 0);

   --color-text-headings: rgb(76, 67, 65);
   --color-text-copy: rgb(142, 0, 0);

   --drop-shadow-sm-lt: 0 3px 10px 0 rgba(0, 0, 0, .19);
   --drop-shadow-lg-dk: 0 8px 15px 0 rgba(0, 0, 0, .24);
   --border: 1px solid rgb(76, 67, 65);
}

html {
   box-sizing: border-box;
   background-color: var(--color-background-html);
}
*, *::before, *::after {
   box-sizing: inherit;
}
body {
   max-width: 1200px;
   margin: 0 auto;
   line-height: 1.5;
   color: var(--color-text-copy);
   font-family: 'Cantarell', sans-serif;
}
.page-content {
   width: 90%;
   margin: 0 auto;
}
a:active, a:hover {
    outline: 0;
}
img {
   max-width: 100%;
}

/***** HEADER *****/
.header {
   background: url(_images/patPink&Yellow1200x450.jpg) no-repeat;
   display: flex;
   flex-direction: column;
   margin-bottom: 30px;
}
.header-logo-group {
   padding: 15px;
}
.header-h1 {
   font-family: 'Kaushan Script', cursive;
   font-size: 3.5em;
   font-weight: lighter;
   color: var(--color-text-headings);   
   margin-top: 10px;
   margin-bottom: 0;  /* so the tagline will snug up under it */
   margin-left: 10px;
   line-height: 1em;
}
.header-tagline {
   font-size: 1em;
   line-height: 1em;  /* to tuck the tagline up under "Art Path" more */
   margin-left: 35px;
   margin-top: 1px;
   margin-bottom: 50px;
   color: var(--color-text-headings);
}
.header-contact-group {
   padding: 15px;
   align-self: flex-end;
}

/*** THE NEW METHOD ****/
.header-a {
   display: inline-block;
   text-decoration: none;
   color: black;
   font-size: 18px;
   background-color: #ffe8f191;
   padding: 8px 16px;
   border-radius: 15px;
   margin-bottom: 15px;
   box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .19);

}
.header-a:hover {
   box-shadow: 0 5px 15px 0 rgba(0, 0, 0, .33);
   background-color: #789cbc;
   color: white;
}

/* the old method */
/* delete once new method is on the server and working */
/* .header-contactPat {
   font-size: .9em;
   line-height: 1em;
   text-align: right;
   color: var(--color-text-headings);
}
.header-el {
   margin-top: -10px;
   font-size: 1.2em;
   line-height: 1.5em;
   letter-spacing: 1.2px;
   text-align: right;
}
#addr {
   color: var(--color-email-link);
}
#addr:hover {
   color: var(--color-email-hover);
} */

.header-jungquote {
   font-style: italic;
   font-size: .8em;
   line-height: 1.35;
   color: var(--color-text-jungquote);
   background-color: var(--color-background-jungquote);
   margin-bottom: 0;
   padding: 0 15px;
}

/***** MAIN ART EXPLORATIONS *****/
.explore {
   margin-bottom: 30px;
}
.explore-main-title {
   margin-top: 0;
   color: var(--color-text-headings);
   font-size: 2.0em;
   font-family: 'Kaushan Script', cursive;
   font-weight: lighter;
   text-align: center;
}
.explore a:link {
   text-decoration: none;
}
.explore-section-title {
   margin-bottom: 12px;
   color: var(--color-text-headings);
}
.explore-img {
   padding-bottom: 15px;
   border-bottom: var(--border);
}
.explore-img:hover {
   box-shadow: var(--drop-shadow-lg-dk);
}

/***** PAT *****/
.pat-andres {
   margin: 10px auto 30px;
   width: 90%;
}

/* clearfix hack */
/* the single-column layout is floated */
/* this makes a bottom margin before the gallery */
.pat-andres::after {
   content: " ";
   display: block;
   clear: both;
}
.pat-andres-h2 {
   margin-top: 0;
   color: var(--color-text-headings);
   font-size: 1.5em;
   font-family: 'Kaushan Script', cursive;
   font-weight: lighter;
   text-align: center;
}
.pat-andres-img {
   border-radius: 15px;
   width: 50%;
   height: auto;
   max-width: 200px;
   float: left;
   margin-right: 15px;
}
.pat-andres-p {
   line-height: 1.35;
   font-size: .9em;
}

/***** PHOTO GALLERY *****/
.gallery {
   text-align: center;
   margin-bottom: 30px;
}
.gallery-h2 {
   color: var(--color-text-headings);
   font-size: 1.5em;
   font-family: 'Kaushan Script', cursive;
   font-weight: lighter;
   margin-top: 0;
}
.gallery-mandala {
	margin-top: 0;
	border-radius: 50%;
	border: var(--border);
	max-width: 50%;
}
.gallery-list {
   /* border around the outer box */
   border: var(--border);
   padding-left: 0;
   margin-top: 0;

   /* allows list to be centered */
   display: inline-block;
   list-style: none;
   width: 65%;
}
.gl-item {
   line-height: 2.5em;
   border-bottom: var(--border);
}
.gl-item-link {
   color: var(--color-text-headings);
	outline: 0;
}
.gl-item-link:link {
   text-decoration: none;
}
.gl-item-link:hover {
   color: var(--color-hover);
	text-decoration: underline;
}
.even {
   background-color: var(--color-background-gallery-stripe);
}
.your-ideas {
   border-bottom: none;
}

/***** TESTIMONIALS *****/
.testimonials {
   margin-bottom: 30px;
}
.testimonials-h2 {
   color: var(--color-text-headings);
   font-size: 1.5em;
   font-family: 'Kaushan Script', cursive;
   font-weight: lighter;
   margin-top: 0;
   text-align: center;
}
.testimonial-quote {
   margin-left: 20px;
   margin-top: .8em;
   margin-bottom: .8em;
   line-height: 1.25;
}
.testimonial-quotedBy {
   font-size: .7em;
   display: inline-block;
   margin-left: 30px;
}

/***** FOOTER *****/
.notices {
   padding: 10px 20px;
   text-align: center;
   background-color: var(--color-background-footer);
   color: var(--color-text-headings);
}
.litgeeks {
   font-size: 10px;
}

/***** RESPONSIVE LAYOUTS *****/
/* make the photo gallery 3 equal width columns */
@media screen and (min-width: 450px) {
   .gallery-list {
      display: grid;
      grid-template-columns: repeat(3, 33.33333%);
      border: none;
      width: 90%;
      margin: 0 auto;
   }
   .gl-item {
      /* get rid of borders from mobile layout */
      border: none;
   }
   .tblr {
      border: var(--border);
   }
   .tb {
      border-top: var(--border);
      border-bottom: var(--border);
   }
   .lrb {
      border-left: var(--border);
      border-right: var(--border);
      border-bottom: var(--border);
   }
   .bot {
      border-bottom: var(--border);
   }
   .even {
      background-color: var(--color-background-gallery-stripe);
   }
   .your-ideas {
      grid-column: 3 / 4;
      background-color: transparent;
   }
}

/* The jung quote is getting too long below the header */
/* move it into the column on the right of header */
/* put Pat and the photo galleries side-by-side */
@media screen and (min-width: 700px) {
   /* rearrange header */
   .header {
      display: grid;
      grid-template-columns: 2fr 1fr;
   }
   .header-logo-group {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
   }
   .header-contact-group {
      grid-column: 1 / 2;
      grid-row: 2 / 3;
      justify-self: end;
   }
   .header-jungquote {
      grid-column: 2 / 3;
      grid-row: 1 / 3;
      margin: 0;
      padding: 20px;
      font-size: 14px;
      line-height: 1.5;
   }
   /* rearrange footer */
   .notices {
      display: flex;
      justify-content: space-between;
      align-items: center;
   }
}

/* the quote has reached a good width in the header */
/* don't let it get any wider */
@media screen and (min-width: 850px) {
   .header {
      grid-template-columns: 1fr 300px;
   }
}

/* switch whole page to two-column layout */
@media screen and (min-width: 900px) {
   .page-content {
      display: grid;
      grid-template-columns: 2fr 1fr;
      grid-template-rows: repeat(5, content);
      grid-column-gap: 5%;
   }
   .explore {
      grid-column: 1 / 2;
      margin-bottom: 30px;
   }
   .pat-and-gallery {
      grid-column: 2 / 3;
      grid-row: 1 / 6;
   }
   .pat-andres {
      display: flex;
      flex-direction: column;
   }
   .pat-andres-h2 {
      align-self: center;
   }
   .pat-andres-img {
      margin-right: 0;
      align-self: center;
      width: 60%;
      height: auto;
      max-width: 200px;
   }
   .pat-andres-p {
      margin-left: 20px;
   }

   /* reset gallery to single column */
   .gallery-mandala {
      width: 35%;
   }
   .gallery-list {
      /* put back border around the outer box */
      border: var(--border);
      padding-left: 0;
      margin-top: 0;
   
      /* allows list to be centered */
      display: inline-block;
      list-style: none;
      width: 65%;
   }
   .gl-item {
      line-height: 2.5em;
      border: none;
      border-bottom: var(--border);
   }
   .gl-item-link {
      color: var(--color-text-headings);
      outline: 0;
   }
   .gl-item-link:link {
      text-decoration: none;
   }
   .gl-item-link:hover {
      color: var(--color-hover);
      text-decoration: underline;
   }
   .even {
      background-color: var(--color-background-gallery-stripe);
   }
   .your-ideas {
      border-bottom: none;
   }
   .testimonials {
      grid-column: 1 / 2;
      padding: 15px;
   }
}