/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/

/* used for Press-Conference and I Summon You*/

/* * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  width: 90%;
  margin: 0.5vh 1vw;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--fnt-single-img);
  background: var(--bg-single-img);
} */

:root {
  --bg-single-img: hsl(240, 5%, 25%);
  --bg-black: black;

  --fnt-single-img: rgb(165, 165, 165);
  --font-color-links-sgl-img: rgb(214, 211, 205); /*  tone for links */
  --font-color-links-hover-sgl-img: rgb(255, 17, 17);

  --font-color-bg-black: rgb(156, 155, 155);
  --font-color-links-bg-black: rgb(172, 169, 169);
}

/* for page page with black background */
#bg-black {
  background-color: black;
  color: var(--font-color-bg-black);
}

#bg-black a {
  color: var(--font-color-links-bg-black);
}

#bg-black header {
  border-bottom: 2px solid var(--font-color-bg-black);
  opacity: 0.8;
}

#bg-black footer {
  border-bottom: 2px solid var(--font-color-bg-black);
}

/* I NO HAI REMEDIO + -I Summon You
keeping text area narrower*/
@media (min-width: 992px) {
  .blurb {
    width: 96vw;
    margin: 1vh auto;
    line-height: 1.5;
  }
}

.main-title {
  font-size: larger;
  font-weight: 800;
  text-align: left;
}

.bg-black {
  background-color: black;
}

/* Name heading: inline block to allow both in one line on large screens. could be changed to flex*/
h1 {
  display: inline-block;
  padding: 0 15px 0 0;
  font-size: calc(1.8rem + 0.8vw);
  line-height: 0;
  font-weight: 900;
  margin-bottom: 0.5vh;
  opacity: 0.8;
}

h2 {
  font-size: calc(0.9rem + 0.6vw);
  display: inline-block;
  /* margin-bottom: 0.6vw; */
  opacity: 0.8;
}

header {
  border-bottom: 2px solid var(--fnt-single-img);
  min-height: 5vh;
  /* margin-bottom: 0.5vh; */
  margin-top: 2vh;
}

/* not used  - but could make exra space under header nav - or enywhere else*/
.extra-space-bottom {
  padding-bottom: 1vw;
}

/* notes at bottom */
.notes {
  font-size: calc(0.5rem + 0.4vw);
}

/* puts Head name and Project title (h1 and h2) into two lines for smaller screens
styled for I no hai Remedio */
@media (max-width: 600px) {
  h1,
  h2 {
    display: block;
    text-align: left;
  }

  a.h2 {
    line-height: 1.2;
    margin: 0;
    padding-bottom: 1vh;
  }
}

/* for very small phone screens */
@media (max-width: 300px) {
  h1 {
    font-size: calc(0.9rem + 0.8vw);
  }
  h2 {
    font-size: calc(0.9rem + 0.5vw);
  }
}

a.header-link {
  outline: none;
  text-decoration: none;
  color: inherit;
}

ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-left: 0;
  line-height: 0;
  font-size: calc(0.3rem + 0.8vw);
}

ul > li {
  -webkit-box-flex: 1;
  -ms-flex: auto;
  flex: auto;
  padding: 0 1vw;
  text-align: right;
  margin-right: 0;
  list-style: none;
}

.thisPage {
  text-align: left;
  padding-left: 1vw;
}

a {
  text-decoration: none;
  color: var(--font-color-links-sgl-img);
}

a:hover {
  color: rgb(235, 235, 230);
}

a:active {
  color: black;
  font-weight: 900;
}

.body-links-xs {
  font-weight: lighter;
}

footer {
  border-top: 2px solid var(--fnt-single-img);
  font-size: calc(0.4rem + 0.3vw);
  text-align: left;
  margin-top: 0;
}

/* projects grid 
could this go into main index css??*/
/* main container: */
.navGrid {
  display: -ms-grid;
  display: grid;
  grid-gap: 1.5vh;
  justify-items: center;
  padding-top: 2vw;
}

.navGrid > div > a > img {
  max-width: 20vw;
}

/* this alone defines that four columns are made/needed! */
.blurb {
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 4;
  grid-area: 2 / 1 /3 / 5;
  text-align: justify;
  font-size: calc(1rem + 0.5vw);
}

@media (min-width: 1200px) {
  .blurb {
    padding-left: 1vw;
    padding-right: 4vw;
  }
}

h1 {
  font-size: calc(1.8rem + 0.3vw);
  line-height: 0.6;
  font-weight: 900;
}

/* Image and BU floated inside blurb text (here book cover)*/
.pic_BU {
  float: right;
  max-width: 250px;
  max-width: 30vw;
  padding: 2vh 1.5vw 1vh 2vw;
  text-align: left;
  font-size: calc(0.4rem + 0.4vw);
  margin-right: 3vw;
}

.inArticle {
  max-width: 250px;
  max-width: 30vw;
}

figcaption {
  font-size: calc(0.4rem + 0.4vw);
  padding-top: 0.5vh;
}

/* this keeps the floated image pic_BU small ? */
@media (min-width: 1600px) {
  .blurb {
    -ms-grid-row: 2;
    -ms-grid-row-span: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 6;
    grid-area: 2 / 1 /5 / 7;
  }
}
/* 
same as in wundercamera index */
.pic-bu-inset-landscape-right-isy {
  float: right;
  max-width: 42vw;
  padding: 1vh 0vw 1vh 2vw;
  text-align: left;
  font-size: calc(0.5rem + 0.4vw);
  margin: 0;
}

.img-pic-bu-inset-landscape-right-isy {
  max-width: 42vw;
  /* keeps it from going over right edge */
  padding-right: 2vw;
}

@media (max-width: 1025px) {
  .pic-bu-inset-landscape-right-isy {
    max-width: 52vw;
  }

  .img-pic-bu-inset-landscape-right-isy {
    max-width: 52vw;
  }
}

.pic-bu-inset-landscape-left-isy {
  float: left;
  max-width: 42vw;
  padding: 1vh 2vw 1vh 0;
  text-align: left;
  font-size: calc(0.5rem + 0.4vw);
  margin: 0;
}

.img-pic-bu-inset-landscape-left-isy {
  max-width: 42vw;
  padding-right: 2vw;
}

@media (max-width: 1025px) {
  .pic-bu-inset-landscape-left-isy {
    max-width: 52vw;
  }

  .img-pic-bu-inset-landscape-left-isy {
    max-width: 52vw;
  }
}