@keyframes section-transition-in {
  from {
    opacity:0.5;
  }
  to {
    opacity:1;
  }
}

@keyframes page-transition-in {
  from {
    opacity:0.1;
  }
  to {
    opacity:1;
  }
}

html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: url(/img/judith_photo_sm.png);
  background-color: #171613;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  background-attachment: fixed;
}

body {
  margin: 0;
  padding: 0;
  text-align: center;
  width: 100%;
  height: 100%;
  background: url(/img/judith_photo.png);
  background-color: #171613;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  background-attachment: fixed;
  text-shadow: 1px 1px #000000;
  animation-name: page-transition-in;
  animation-duration: 3s;
  font-family: Georgia, Serif;
  overflow-y: scroll;
  overflow-x: hidden;
  position: relative;
}

header {
  width: 80%;
  margin: 0 auto 0 auto;
  padding: 1em 5em 0 5em;
}

.title {
  text-align: center;
  font-size: 48pt;
  color: white;
}

.title a {
  color: white;
  text-decoration: none;
}

.subtitle {
  text-align: center;
  font-size: 18pt;
  color: white;
}

.heading {
  background-color: rgba(0,0,0,.8);
  border-radius: 5px;
  padding: 1em 1em 1em 1em;
  overflow-y: hidden;
}

input[name="nav-menu"],
input[name="cast-menu"] {
  display: none;
}

div.heading,
section {
  max-width: 200vh;
  display: none;
  margin: 3em 0 1em 0;
  padding: 1em;
  color: white;
  width: 80%;
  animation-name: section-transition-in;
  animation-duration: 0.4s;
}

label {
  display: inline;
}

label:hover {
  cursor: pointer;
}

nav {
  margin: 0 auto 0 auto;
  width: 75%;
  color: white;
  padding: 0.05em;
  text-align: center;
}

@media screen and (max-width: 768px) {
  nav {
    margin: initial;
    width: 100%;
    padding: initial;
  }
}

nav > ul {
  margin: 0;
  padding: 0;
  text-align: center;
  display: inline;
}

nav > ul > li {
  display: inline;
  text-align: center;
  line-height: 2em;
}

nav > ul > li:first-of-type {
  border-left: none;
}

header label {
  background-color: initial;
  padding: 0.35em 1em;
}

#menu-home:checked ~ #section-home,
#menu-frwd:checked ~ #section-frwd,
#menu-strk:checked ~ #section-strk,
#menu-mmry:checked ~ #section-mmry,
#menu-prsn:checked ~ #section-prsn,
#menu-cnfb:checked ~ #section-cnfb,
#menu-more:checked ~ #section-more,
#menu-cast:checked ~ #section-cast,
#menu-team:checked ~ #section-team {
  display: inline-block;
}

#menu-home:checked ~ header label[for="menu-home"],
#menu-frwd:checked ~ header label[for="menu-frwd"],
#menu-strk:checked ~ header label[for="menu-strk"],
#menu-mmry:checked ~ header label[for="menu-mmry"],
#menu-prsn:checked ~ header label[for="menu-prsn"],
#menu-cnfb:checked ~ header label[for="menu-cnfb"],
#menu-more:checked ~ header label[for="menu-more"],
#menu-cast:checked ~ header label[for="menu-cast"],
#menu-team:checked ~ header label[for="menu-team"] {
  border: 1px solid #444444;
  background-color: rgba(1,1,1,0.8);
}

div.heading {
  margin: 3em auto;
  width: 75%;
  color: #ffffff;
  display: block;
  font-size: 14px;
}

#notice {
  display: none;
}
input.rsrc:checked ~ #notice {
  display: block;
}

#section-home > h1 {
  width: 60%;
  text-align: center;
  margin: 1em auto 1em auto;
}

#section-cast {
  text-align: left;
  vertical-align: top;
}

#section-cast > p:first-of-type {
  font-weight: bold;
}

#section-cast > section {
  display: inline-block;
  vertical-align: top;
}

nav.cast-menu {
  display: inline;
  text-align: left;
  position: relative;
  left: 0;
  top: 0;
}
nav.cast-menu > ul {
  display: inline-block;
  text-align: left;
}
nav.cast-menu > ul > li {
  display: block;
  text-align: left;
}
nav.cast-menu > ul > li > label {
  display: block;
  text-align: left;
  margin: 0.25em 1em 0.25em 1em;
  color: #888888;
  text-shadow: 2px 2px #000000;
}
nav.cast-menu > ul > li > label:before {
  content: '→ ';
}

@media screen and (max-width: 768px) {
  nav.cast-menu > ul > li {
    display: inline-block;
  }
  nav.cast-menu > ul > li > label {
    margin: 0.1em;
  }
  nav.cast-menu > ul > li > label:before {
    content: initial;
  }
  nav.cast-menu > ul > li > label:after {
    content: ', ';
  }
  nav.cast-menu > ul > li:last-of-type > label:after {
    content: '.';
  }
}

#section-cast-content {
  width: 100%;
  padding: 0;
  margin: 0;
  text-align: center;
}
#section-cast-content > h1 {
  text-align: left;
}
#section-cast-content div {
  vertical-align: top;
  text-align: center;
}

#section-cast-content div div p:first-of-type {
  font-weight: bold;
}

#content-cast {
  display: inline-block;
  width: 60%;
}

div.content-cast {
  text-align: center;
  display: none;
  margin: 1em;
  padding: 1em;
  color: white;
}

@media screen and (max-width: 768px) {
  #content-cast {
    display: inline-block;
    width: 100%;
  }

  div.content-cast {
    margin: 0.1em;
    padding: 0.1em;
  }
}

#cast-h:checked ~ div div#section-cast-h,
#cast-0:checked ~ div div#section-cast-0,
#cast-1:checked ~ div div#section-cast-1,
#cast-2:checked ~ div div#section-cast-2,
#cast-3:checked ~ div div#section-cast-3,
#cast-4:checked ~ div div#section-cast-4,
#cast-5:checked ~ div div#section-cast-5,
#cast-6:checked ~ div div#section-cast-6,
#cast-7:checked ~ div div#section-cast-7,
#cast-8:checked ~ div div#section-cast-8,
#cast-9:checked ~ div div#section-cast-9,
#cast-10:checked ~ div div#section-cast-10,
#cast-11:checked ~ div div#section-cast-11,
#cast-12:checked ~ div div#section-cast-12,
#cast-13:checked ~ div div#section-cast-13,
#cast-14:checked ~ div div#section-cast-14,
#cast-15:checked ~ div div#section-cast-15 {
  display: inline-block;
}

#cast-0:checked ~ nav label[for="cast-0"],
#cast-1:checked ~ nav label[for="cast-1"],
#cast-2:checked ~ nav label[for="cast-2"],
#cast-3:checked ~ nav label[for="cast-3"],
#cast-4:checked ~ nav label[for="cast-4"],
#cast-5:checked ~ nav label[for="cast-5"],
#cast-6:checked ~ nav label[for="cast-6"],
#cast-7:checked ~ nav label[for="cast-7"],
#cast-8:checked ~ nav label[for="cast-8"],
#cast-9:checked ~ nav label[for="cast-9"],
#cast-10:checked ~ nav label[for="cast-10"],
#cast-11:checked ~ nav label[for="cast-11"],
#cast-12:checked ~ nav label[for="cast-12"],
#cast-13:checked ~ nav label[for="cast-13"],
#cast-14:checked ~ nav label[for="cast-14"],
#cast-15:checked ~ nav label[for="cast-15"] {
  color: white;
}

@media screen and (min-width: 768.1px) {
  #cast-0:checked ~ nav label[for="cast-0"]:before,
  #cast-1:checked ~ nav label[for="cast-1"]:before,
  #cast-2:checked ~ nav label[for="cast-2"]:before,
  #cast-3:checked ~ nav label[for="cast-3"]:before,
  #cast-4:checked ~ nav label[for="cast-4"]:before,
  #cast-5:checked ~ nav label[for="cast-5"]:before,
  #cast-6:checked ~ nav label[for="cast-6"]:before,
  #cast-7:checked ~ nav label[for="cast-7"]:before,
  #cast-8:checked ~ nav label[for="cast-8"]:before,
  #cast-9:checked ~ nav label[for="cast-9"]:before,
  #cast-10:checked ~ nav label[for="cast-10"]:before,
  #cast-11:checked ~ nav label[for="cast-11"]:before,
  #cast-12:checked ~ nav label[for="cast-12"]:before,
  #cast-13:checked ~ nav label[for="cast-13"]:before,
  #cast-14:checked ~ nav label[for="cast-14"]:before,
  #cast-15:checked ~ nav label[for="cast-15"]:before {
    content: '⇨ ';
  }
}

#section-team {
  color: white;
  text-align: left;
}

#section-team p {
  width: 60%;
  margin: 0.5em auto 0.5em auto;
}

@media screen and (max-width: 768px) {
  #section-team p {
    width: 100%;
  }
}

#section-team p > span,
#section-team a {
  color: white;
  text-decoration: none;
}

#section-team p > span:before,
#section-team a:before {
  content: '⌘ ';
}

#section-team a:hover {
  text-decoration: underline;
  cursor: pointer;
}

section.rsrc {
  color: white;
  text-align: left;
}

section.rsrc p,
section.rsrc ul,
section.rsrc ol,
section.rsrc blockquote {
  width: 60%;
  margin: 0.5em auto 0.5em auto;
}

@media screen and (max-width: 768px) {
  section.rsrc p,
  section.rsrc ul,
  section.rsrc ol,
  section.rsrc blockquote {
    width: initial;
  }
}

section.rsrc ul li,
section.rsrc ol li {
  margin: 5px 0;
}

section.rsrc ul.extra-space li {
  margin-top: 1em;
  margin-bottom: 1em;
}

section.rsrc blockquote {
  text-align: center;
}

section.rsrc a {
  color: white;
  text-decoration: underline dotted;
}

section.rsrc a:hover {
  text-decoration: underline;
  cursor: pointer;
}

footer {
  display: block;
  color: white;
}