/*@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');*/

:root {
  --white: #fbfbfb;
  /*--white: #f9f9f9;*/
  --black: #36383F;
  --gray: #85888C;
}

body {
  font-family: "Fira Sans Condensed", sans-serif;
  font-weight: 300;
  font-style: normal;
}

h1 {
  font-family: "Fira Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
}

h2 {
    font-family: "Fira Sans", sans-serif;
    font-weight: 600;
    font-style: normal;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a, a:visited {
  color: rgb(0 0 148)
}

a:hover {
  text-decoration: underline;
}

label {
  font-weight: 400;
  font-size: 16px;

}
.search {
  font-family: "Fira Sans", sans-serif;
  font-size: 16px;
  font-weight: 300;
  width: 18em;
  padding: 4px;
  margin-left: 0.4em;
  border: solid 1px #f2eeee;
}
/*dl.cast-list div {*/
/*  !**/
/*    Setup the DT (character), DD (cast), and pseudo-element items as a*/
/*    flexible layout.*/
/*  *!*/
/*  display: flex;*/
/*  margin: 5px 0px 5px 0px;*/
/*}*/

/*dl.cast-list dt {*/
/*  !**/
/*    Setup the DT (character) element to shrink, allowing for the dots to fill*/
/*    up the free space.*/
/*  *!*/
/*  flex: 0 1 auto;*/
/*  margin: 0px 0px 0px 0px;*/
/*  order: 1;*/
/*}*/

/*dl.cast-list div:after {*/
/*  border-bottom: 2px dotted #787878;*/
/*  content: "";*/
/*  !**/
/*    Define the pseudo-element as a SIBLING to both the DT and DD elements.*/
/*    Configure it to grow, taking up all the free space with dots.*/
/*    --*/
/*    NOTE: We are using "order: 2" to place the ":after" element IN BETWEEN*/
/*    the DT and DD elements, VISUALLY, even through it is PHYSICALLY the last*/
/*    child in the flex container.*/
/*  *!*/
/*  flex: 1 1 auto;*/
/*  margin: 0 12px 5px 12px;*/
/*  order: 2;*/
/*}*/

.cast-list {
  /*font-family: monospace;*/
  width: 100%;
  /*border: solid 1px red;*/
}

.cast-list .cast-list-row,
.person .production-row {
  /*font-size: 1.2rem;*/
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: flex-end;
  column-gap: 5px;
  padding: 2px;
}

/* This is the ... between the rolename and people names */
.cast-list .cast-list-row span:nth-child(2),
.person .production-row  span:nth-child(2) {
  /*background: red;*/
  border-bottom: 2px dotted #787878;
  flex: 1 1 auto;
  margin: 4px;
  min-width: 5px;
}

.cast-list .cast-list-row:hover  {
  background: #fbfbfb;

}
.cast-list .cast-list-row .name:hover {
  cursor: pointer;
  text-decoration: underline;
}

.productions .decade {
  display: flex;
  flex-flow: row wrap;
  column-gap: 4px;
  row-gap: 4px;
}

.productions .year-group h2 {
  /*font-weight: lighter;*/
  font-size: 18px;
  margin-block-start: 0.2em;
  margin-block-end: 0.2em;

}

.productions .year-group {
  width: 100%;
  /*margin: 4px;*/
  background: #f9f9f9;
  border-radius: 4px;
  border: solid 1px #f2eeee;
  gap: 4px;
  padding: 4px;
}
@media(min-width: 376px ) {
  .productions .year-group {
    width: calc((100% * (1/2)) - 4px);
  }
}

@media(min-width: 600px ) {
  .productions .year-group {
    width: calc((100% * (1/3)) - 4px);
  }
}

@media(min-width: 800px ) {
  .productions .year-group {
    width: calc((100% * (1/4)) - 4px);
  }
}

@media(min-width: 1024px ) {
  .productions .year-group {
    width: calc((100% * (1/5)) - 4px);
    max-width: 300px;
  }
}


.productions .year-group a {
  display: block;
  text-decoration: none;
  line-height: 1.1em;
  margin-bottom: 0.2em;
  /*border-top: solid 2px #f2eeee;*/
  /*padding-bottom: 4px;*/
  /*padding-top: 4px;*/
}


.productions .year-group a:hover {
  text-decoration: underline;
}


.productions .decade > h1 {
  width: 100%;
}


@media (min-width: 600px) {
  .cast-list {
    width: 600px;
  }
}



.hidden, .productions .year-group a.hidden, .productions .decade.hidden, .person.hidden {
  display: none;
}

.person-productions {
  width: 100%;
  max-width: 600px;
}

.person-productions .row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: flex-end;
  column-gap: 5px;
  padding: 2px;
}

.person-productions .row span:nth-child(1){
  min-width: 1.8em;
}

.person-productions .row  span:nth-child(3) {
  /*background: red;*/
  border-bottom: 2px dotted #787878;
  flex: 1 1 auto;
  margin: 4px;
  min-width: 5px;
}



#photographs img {
  width: 50%;
}


/* 3 Columns of photos */
@media (min-width: 400px) {
  #photographs img {
    width: 33.3%;
  }
}

/* 5 Columns of photos */
@media (min-width: 600px) {
  #photographs img {
    width: 25%;
  }
}

/* 6 Columns of photos */
@media (min-width: 800px) {
  #photographs img {
    width: 20%;
  }
}

/* 6 Columns of photos */
@media (min-width: 1025px) {
  #photographs img {
    width: 16.6%;
  }
}