* { font-size: 100%; }

/* reset / initialize */
*, *:before, *:after {
  padding: 0; /* redundant with reset that comes later */
  margin: 0; /* redundant with reset that comes later */
  /* The following settings include element, padding, & border */
  /* For Safari/Chrome, Firefox, and other */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Define variables for colors */
:root {
  --bgnormal: black;
  --fgnormal: white;
  --bgmenubar: var(--bgnormal);
  --fgmenubar: lightskyblue;
  --bordercolor: gray;
  --headers: white;
  --bgtooltip: #262626;
  --redmenace: firebrick;
  --silverspecter: lightskyblue;
}

/* ****************************************** */
/* Eric Meyer's reset.css: http://meyerweb.com/eric/tools/css/reset/reset.css */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

/* alphabetized */
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video 
{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

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

body {
  font-size: calc(0.75em + 1vmin); /* was  62.5% which makes 1em = 10px */
  background-color: var(--bgnormal);
}

article,aside,div,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hr,li,main,nav,p,section,ul { 
  font-family: Helvetica, Verdana, "Lucida Sans", Tahoma, Arial, "Century Gothic", sans-serif; 
  font-weight: normal;
  font-size: 1em;
  font-size: 1rem;
  line-height: 140%;
  color: var(--fgnormal);
  background-color: var(--bgnormal);
  overflow-x: hidden;
}

a:link {
  color: var(--fgmenubar);
  text-decoration: none;
  }

a:visited {
  color: var(--fgmenubar);
  text-decoration: none;
  }

a:hover { 
  color: var(--fgmenubar);
  text-decoration: underline;
  }

a:active {
  color: var(--fgmenubar);
  text-decoration: none;
  }

a.headers {
  color: var(--headers);
  text-decoration: none;
}

.arrow {
  font-weight: bold; 
  font-size: 26px;
}

/* Artistname gets redefined in a desktop media breakpoint */
.artistname {
  font-size: 1em;
  font-size: 1rem;
  font-weight: bold;
  font-family: Papyrus, Helvetica, Verdana, 'Lucida Sans', Tahoma, Arial, 'Century Gothic', sans-serif;
}

/* Necessary because of the reset (???) */
b {
  font-weight: bold;
}

div.buttonborder {
  border: 1px solid var(--bordercolor);
  width: 75%;
  padding: .1em;
  padding: .1rem;
  text-align: center;
  background-color: var(--bgtooltip); /* dimgray */
  border-radius: 15px;
  margin-left: auto;
  margin-right: auto;
}

footer {
  display: block;
  width: 100%;
  text-align: center;
}

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

.grid-container {
  display: inline-grid;
  grid-template-columns: 20% 20% 10% 10% 20% 20%; /* "More" columns are smaller */
  grid-template-rows: auto auto auto auto auto auto;
  align-items: start; /* means align at top */
  grid-gap: 1em;
  padding-left: 1em;
  padding-right: 8em;
}

/* All the grid items get redefined in a desktop media breakpoint */
/* header */
.grid-item-1 {
  grid-row: 1;
  grid-column: 1 / span 6;
}

/* 2-column top text */
.grid-item-2 {
  grid-row: 2;
  grid-column: 1 / span 6; /* 6 on mobile, 3 on desktop */
}

.grid-item-3 {
  grid-row: 3; /* new row on mobile, same row on desktop */
  grid-column: 1 / span 6;
}

/* column of figures/figcaptions */
.grid-item-4 {
  grid-row: 4;
  grid-column: 1 / span 6;
  white-space: pre-line; /* Mysteriously required so whitespace is observed. See 
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space */
}

/* prev more next pix */
.grid-item-5 {
  grid-row: 5;
  grid-column: 1 / span 2;
}

/* prev more next pix */
.grid-item-6 {
  grid-row: 5;
  grid-column: 3 / span 2;
}

/* prev more next pix */
.grid-item-7 {
  grid-row: 5;
  grid-column: 5 / span 2;
}

/* prev more next text */
.grid-item-8 {
  grid-row: 6;
  grid-column: 1 / span 2;
  margin-top: -1.25em; /* for arrow and text below quilt */
}

/* prev more next text */
.grid-item-9 {
  grid-row: 6;
  grid-column: 3 / span 2;
}

/* prev more next text */
.grid-item-10 {
  grid-row: 6;
  grid-column: 5 / span 2;
  margin-top: -1.25em; /* for arrow and text below quilt */
}

/* footer */
.grid-item-11 {
  grid-row: 7;
  grid-column: 1 / span 6;
}

[class^='grid-item'] {
  display: grid;
  align-items: center;
  justify-content: center;
  font-size: 1em; /* rem */
  color: var(--fgnormal);
}

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

h1 {
  color: var(--headers);
  font-weight: bold;
  font-family: inherit;
  /* width: 100%; messes up the h1 on the phone */
  text-align: left;
  line-height: 200%;
  margin-left: 2em;
  margin-left: 2rem;
  padding-top: 4em;
  padding-top: 4rem;
  padding-left: 1em;
  padding-left: 1rem;
}

hr {
  width: 100%;
  color: var(--fgnormal);
}

/* Necessary because of the reset (???) */
i {
  font-style: italic;
}

/* Does RWD/dynamic resizing */
img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--bordercolor);
}

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

nav {
  position: fixed; /* Keeps menu from scrolling off the page */
  display: block;
  width: 100%;
  top: 0;
  padding-top: 1em;
  margin: 0%;
  z-index: 200;
  text-align: center;
  color: var(--fgmenubar);
  background: var(--bgmenubar); 
}

nav a {
  display: inline-block;
  padding: .5em .75em;
  padding: .5rem .75rem;
  text-decoration: none;
  vertical-align: bottom;
  text-align: center;
  color: var(--fgmenubar);
}

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

.tooltip {
  text-decoration: none;
  position: relative;
}
 
.tooltip span {
  display: none;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  color: var(--fgnormal);
  background: var(--bgtooltip); 
}
 
.tooltip span img {
  /* float: left; */
  margin: 0px 8px 8px 0;
}
 
.tooltip:hover span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  width: auto;
  max-width: 320px;
  min-height: 150px;
  border: 1px solid var(--bordercolor);
  margin-top: 12px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  padding: 8px;
}

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

/* For simple cell phones and small smartphones */
@media screen and (max-width: 31.25em) /* 500  px */ {
}

/* pixels / 16 = em (Formula from  
   https://www.w3schools.com/css/css_font_size.asp) 
   For bigger smartphones and smaller tablets 501-1200px 
   code from https://www.w3schools.com/cssref/css3_pr_mediaquery.asp 
   large display=horizontal, small display=vertical
*/
@media screen and (min-width: 31.3125em) and (max-width: 75em) {
}

/* For larger tablets, desktops. iPhone 12 mini is 2340. */
@media screen and (min-width: 1201px) /* 1201 */ {
  .artistname {
    font-size: 1.5em;
    font-size: 1.5rem;
    font-weight: bold;
    font-family: Papyrus, Helvetica, Verdana, 'Lucida Sans', Tahoma, Arial, 'Century Gothic', sans-serif;
  }

  /* 2-column top text */
  .grid-item-2 {
    grid-row: 2;
    grid-column: 2 / span 2; /* 1 / span 3;  */
  }

  .grid-item-3 {
    grid-row: 2; 
    grid-column: 4 / span 2; 
  }

  /* column of figures/figcaptions */
  .grid-item-4 {
    grid-row: 3;
    grid-column: 1 / span 6;
    text-align: center; 
    white-space: pre-line; /* Mysteriously required so whitespace is observed. See 
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space */
  }

  /* prev more next pix */
  .grid-item-5 {
    grid-row: 4;
    grid-column: 1 / span 2;
  }

  /* prev more next pix */
  .grid-item-6 {
    grid-row: 4;
    grid-column: 3 / span 2;
  }

  /* prev more next pix */
  .grid-item-7 {
    grid-row: 4;
    grid-column: 5 / span 2;
  }

  /* prev more next text */
  .grid-item-8 {
    grid-row: 5;
    grid-column: 1 / span 2;
    margin-top: -1.25em;
  }

  /* prev more next text */
  .grid-item-9 {
    grid-row: 5;
    grid-column: 3 / span 2;
  }

  /* prev more next text */
  .grid-item-10 {
    grid-row: 5;
    grid-column: 5 / span 2;
    margin-top: -1.25em;
  }

  /* footer */
  .grid-item-11 {
    grid-row: 6;
    grid-column: 1 / span 6;
  }
}

/* For Retina devices (any size). iPhone 12 mini is 476 dpi */
@media only screen and (-webkit-min-device-pixel-ratio: 2), 
  only screen and (min-resolution: 192dpi) and 
  (max-resolution: 476dpi) {
/* looks good on iphone, SADLY, THIS AFFECTS MY LAPTOP, too */
/*
  a { 
    font-size: 2.5em; 
    font-size: 2.5rem;
  }
  .artistname {
    font-size: 3em; 
    font-size: 3rem;
  }
*/
}

/* For printers. Save toner and ensure links are discernible */
@media print {
  body { background-color: white; color: black; }
  a:link { 
    color: black; 
    text-decoration: underline; 
  } 
}