/** Screenplay Styles */
html, body {
  margin:0;
  padding:0;

  /** Safari is currently the only browser which renders
      IBM Plex as intended. This adjusts Chrome/Firefox
      to match. */
  -webkit-text-stroke-width: 0.3px;
  -moz-text-stroke-width: 0.3px;
}

.screenplay {
  --screenplayfont: "Georgia", serif;
  --screenplayfontsize: 25px;
  --screenplaysectionbodyspacing: 0.9em;
  --screenplaysectionspacing: 1.5em;
  --screenplaysectioncloserspacing: 1.0em;
  --screenplayprimarycolor: black;
  --screenplaysecondarycolor: white;
}

@media screen and (min-width: 701px) {
  .screenplay {
    --screenplaytitlesize: 140px;
    --screenplaysectiontabspacing: 1.0em;
  }

  .screenplay-vfx-terminal {
    font-size: 0.75em;
    color: RGBA(0,224,31,0.7);
    border-radius: 15px;
    padding: 50px 40px !important;
    position: relative;
    left: -7.5px;
  }
}

@media screen and (max-width: 700px) {
  .screenplay {
    --screenplaytitlesize: 80px;
    --screenplaysectiontabspacing: 0em;
  }

  .screenplay-vfx-terminal {
    font-size: 0.75em;
    color: RGBA(0,224,31,0.8);
    border-radius: 15px;
    width: 100%;
    margin-left: -95px;
    padding: 50px 100px !important;
  }
}

.screenplay-cover {
  position: relative;
  width: 100%;
  height: 100%;
  background: black;
  overflow: hidden !important;

  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.screenplay-title {
  font-size: var(--screenplaytitlesize);
  pointer-events: none;
  font-family: "Baskerville", serif;
  text-shadow: 0px 0px 40px rgba(0,0,0,0.0);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  letter-spacing: 0.6em;
  padding-left: 0.6em;
  color: var(--screenplaysecondarycolor);
  opacity: 1.0;
}

body[phase=M0] .screenplay-title {
  animation-name: fade;
  animation-duration: 3.5s;
  animation-delay: 1.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

body[phase=M1] .screenplay-title {
  color: var(--screenplaysecondarycolor);;
  opacity: 1.0;
}

.negative .screenplay-title {
  animation: none !important;
  color: red !important;
}

.screenplay-section-closer {
  width: 100%;
  opacity: 0.1;
  margin: 0 auto;
  margin-top: 2.0em;
  position: relative;
  height: 1px !important;
  background: linear-gradient(to right, transparent 0%, black 40%, transparent 100%);
}

.screenplay-subtitle {
  font-family: "Baskerville", sans-serif;
  font-size: 26px;
  position: absolute;
  bottom: 17.5%;
  left: 50%;
  transform: translate(-50%);
  font-weight: 200;
  text-align: center;
  width: 100%;
  opacity: 0.75;
  transition: opacity 0.5s;
  cursor: pointer;
  color: var(--screenplayprimarycolor);
  letter-spacing: 0.05em;
}

.initialized .screenplay-subtitle {
  animation-name: fade;
  animation-duration: 3s;
  animation-delay: 5.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  font-style: italic;
}

.screenplay-subtitle:hover {
  opacity: 1.0 !important;
}

.screenplay-subtitle span {
  font-style: italic;
}

@keyframes fade {
  100% {
    color: var(--screenplaysecondarycolor);;
  }
}

@keyframes dissolve {
  100% {
    opacity: 1.0;
  }
}


.screenplay-body {
  position: relative;
  top: 0px;
  background: rgb(255,255,255);
  padding-top: 2.0em;
  overflow: hidden !important;
}

.screenplay-section {
  font-size: var(--screenplayfontsize);
  width: 90%;
  max-width: 650px;
  font-family: var(--screenplayfont);
  margin: 0 auto;
  padding-top: var(--screenplaysectionspacing);
  text-indent: var(--screenplaysectiontabspacing);
}

.screenplay-section-header {
  text-indent: 0.0em;
}

.screenplay-section-header opener {
  font-size: 0.75em;
}

.screenplay-section-header letterhead {
  font-size: 1.25em;
}

.screenplay-section-body {
  padding-top: var(--screenplaysectionbodyspacing);
}

/** VFX */
.screenplay-vfx-terminal {
  font-family: "Courier", monospace;
  text-indent: 0.0em;
  margin-top: 1.25em;
  margin-bottom: 0.5em;
  background: rgb(0,0,0);
  opacity: 1.0
}

.screenplay-vfx-terminal span {
  color: RGBA(0,224,31,1.00);
  font-weight: bolder;
}

.screenplay-vfx-quote {
  font-style: italic;
}