:root {
  --spacing: 20px;
  /* https://www.computerhope.com/cgi-bin/htmlcolor.pl?c=E1E1D2 */
  --background-color: #E1E1D2;
  --highlight-color: yellow;
  --link-color: red;
  --link-underline-color: rgba(0,0,0, 0.333);
  --image-shadow-color: rgba(0,0,0, 0.15);
  --image-border-color: rgba(0,0,0, 0.1);
  --overlay-color: rgba(0,0,0, 0.666);
}

/* Spectral font */
/* https://fonts.google.com/share?selection.family=Spectral */
@font-face {
  font-family: 'Spectral';
  src: url('./fonts/Spectral-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Spectral';
  src: url('./fonts/Spectral-Italic.ttf');
  font-weight: normal;
  font-style: italic;
}

* {
  margin: 0;
  padding: 0;

  font-family: 'Spectral', serif;
  font-size: 18pt;
  line-height: 1.3em;
  font-weight: 400;

  /* Don't jump past anchors in CV */
  /* (Seems like this only works here, boo) */
  scroll-margin-top: 2.6em;
}

body {
  max-width: 1400px;
  background-color: var(--background-color);
  
  margin: 0 auto;
  padding: 
    var(--spacing)
    var(--spacing)
    calc(var(--spacing) * 4)
    var(--spacing);
  
  /* (CAN PROBABLY REMOVE) */
  /* Ugh, make sure things render right on iOS */
  /* (And a few others just to be safe) */
  /* https://stackoverflow.com/a/4966556/1167783 */
  /* -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%; */
}

/* Links */
a, a:link, a:visited {
  color: black;
  text-decoration: underline solid var(--link-underline-color);

  /* Hack to get links not to be taller than the parent element */
  display: inline-block;
}
a:hover, a:active {
  color: var(--link-color);
  background: var(--highlight-color);
  text-decoration: underline;
}

/* Fancy highlight color that no one will ever see */
::-moz-selection, ::selection {
  color: var(--link-color);
  background: var(--highlight-color);
}

/* Top header */
#header {
  margin-bottom: var(--spacing);

  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
#header-links {
  /* Right align, why is this so hard? */
  justify-self: end;
}
#header-links a:not(:first-of-type) {
  margin-left: var(--spacing);
}
#cv #social-links {
  /* A hack to move the social links from the upper-right to below my info */
  display: none;
}

/* Gallery of image/video */
#gallery {
  display: grid;
  grid-template-columns: 
    /* Image min width of 300px wide, max of full width */
    repeat(
      auto-fit, 
      minmax(300px, 1fr)
    );
  column-gap: var(--spacing);
  row-gap: var(--spacing);

  /* Vert align for images (remove this to top-align) */
  align-items: center;
}
#gallery img, #gallery video {
  width: 100%;
  border: 1px solid var(--image-border-color);
  box-shadow: var(--image-shadow-color) 0.3em 0.3em 0.3em;
}
#gallery img:hover, #gallery video:hover {
  cursor: zoom-in;
}
/* (Try to) ensure controls are the width of the video */
#gallery video::-webkit-media-controls {
  width: 100%;
}

/* Don't accidentally highlight images or fullscreen nave */
/* https://www.w3schools.com/howto/howto_css_disable_text_selection.asp */
.noHighlight {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Fullscreen overlay */
#overlay {
  display: none;

  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: 100vh;
  text-align: center;

  background-color: var(--overlay-color);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
#overlay img, #overlay video {
  /* Center horiz/vert */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;

  /* Fill the screen */
  object-fit: contain;  /* Don't stretch the media */
  width: 100%;          /* But fill the screen */
  max-width: 95vw;      /* Well, almost... */
  max-height: 95vh;     /* (leave a little space around) */
}
#exit-x, #prev-media, #next-media {
  position: fixed;
  width: 2em;
  height: 2em;
  background-color: rgba(0,0,0, 0.9);
}
#exit-x {  
  top: 0;
  left: 0;
}
#exit-x p {
  font-size: 2em;
}
#prev-media {
  top: 50%;
  left: 0;
}
#next-media {
  top: 50%;
  right: 0;
}
#prev-media p, #next-media p {
  font-size: 1.5em;
}
#exit-x p, #prev-media p, #next-media p {
  color: white;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#exit-x:hover, #prev-media:hover, #next-media:hover {
  cursor: pointer;
  background-color: rgba(0,0,0, 0.666);
}

/* CV */
#cv {
  margin-top: -0.8em;
}
#cv h1 {
  text-decoration: underline;
  margin-bottom: 0.6em;
}
#cv ol, #cv dl {
  margin-bottom: calc(var(--spacing) * 2);
}
#cv li {
  list-style: none;
}
#cv dl {
  /* Show <dl> as grid w/ years in left column */
  display: grid;
  grid-template-columns: minmax(auto, 10%) 1fr;
  column-gap: var(--spacing);
}
#navigation li::before {
  /* Fancy down arrow on nav list */
  content: '\2193';
  margin-inline-end: 1ch;
}
#exhibitions br {
  /* A hack, but separates show listings that use <br> */
  /* https://stackoverflow.com/a/28310011/1167783 */
  content: "";
  margin: calc(var(--spacing) / 2);
  display: block;
}
#cv dd:not(:last-of-type) {
  /* Spacing b/w listings in section */
  margin-bottom: var(--spacing);
}
.columns {
  /* At most 3 columns, no smaller than 200px wide each */
  /* https://developapa.com/responsive-column-layout */
  columns: 3 200px;
}
.bullets li {
  list-style-type: disc !important;
  margin-left: 1em;
  break-inside: avoid;
}
.print-only {
  display: none;
}

/* 404 page */
[id='404'] {
  /* Center horiz/vert (basically works the
     same as the overlay code above) */
  position: fixed;
  top: 0;
  left: 0;
  z-index: -9999;  /* Not ideal but needed so we can click header links */

  width: 100%;
  height: 100vh;
  min-height: 400px;  /* So the text doesn't run into the header */

  text-align: center;
}
[id='404'] p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 80%;
  max-width: 600px;
}
[id='404'] br {
  margin-bottom: 0.6em;
}

/* Smaller screens... */
@media only screen and (max-width: 700px) {
  /* Vertical header */
  #header {
    display: block;
  }
  #gallery img {
    box-shadow: none;
  }
  /* Shift around header link location (on CV page only) */
  .cv-header #header-links {
    display: none;
  }
  #cv #social-links {
    display: block;
  }
  /* Years above shows, etc */
  #cv dl {
    display: block;
  }
  /* Tweak spacing b/w show listings (see CV section above) */
  #cv dd:not(:last-of-type) {
    margin-bottom: calc(var(--spacing) * 1.3);
  }
  #solo-exhibitions br, #exhibitions br {
    margin: 0.3em;
  }
}

/* Special for CV-to-PDF (or printing) */
@media print {
  @page {
    size: auto;
    margin: 1in 0.625in 1in 0.5in;
  }
  /* Fix weird top margin on first page */
  /* (Thanks ChatGPT for the hack) */
  @page:first {
    margin-top: 0.625in;
  }
  * {
    font-size: 14pt !important;
  }
  .print-only {
    display: inline-block;
  }
  a:link {
    text-decoration: underline black solid;
  }
  #header-links, #navigation {
    display: none !important;
  }
  #education dd:not(:last-of-type) {
    margin-bottom: 0;
  }
  #gallery img {
    box-shadow: none;
  }

  /* Control where page breaks can/can't happen */
  /* (Only works in Chrome, I think) */
  #cv h1 {
    page-break-after: avoid;
    break-after: avoid;
  }
  /* #teaching dd {
    page-break-inside: avoid;
    break-inside: avoid;
  } */
}