@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

      @import url('https://fonts.googleapis.com/css2?family=Butcherman&family=Creepster&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

      body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        background-color: #cbc8c8;
        margin: 0 3rem; 
        color: #222;
      }

      .movie-title {
        text-align: center;
        margin: 20rem 0;
      }

      h1 {
        color: rgb(11, 129, 0);
        font-size: 3rem;
        font-family: 'Creepster', cursive, sans-serif;
        text-shadow: 2px 2px 4px #000;
      }

      .curved-quotes {
        fill: none;
      }

      p {
        margin: 0.5em 0;
      }
      
      .line{
        display: flex;
        flex-direction: row;
        display: grid;
        grid-template-columns: 30% 70%;
        column-gap: 0.5rem;
        align-items: start;
      }

      .line p:first-child {
        font-weight: bold;
        margin-right: 0.5em;
      }

      .line p:last-child {
        font-style: italic;
      }

      .main {
        display: flex;
        justify-content: space-between;
      }

      .inhuman {
        font-family: Butcherman, cursive;
        margin-right: 0.5em;
      }

      .peter{
        color: rgb(0, 13, 132);
      }

      .mayor{
        color: rgb(98, 0, 189);
      }

      .ray {
        color: rgb(0, 98, 255);
      }

      .egon {
        color: rgb(0, 114, 61);
      }

      .winston {
        color: rgb(196, 127, 0);
      }

      .dana { position: relative; color: transparent; }
      .dana::before, .dana::after {
        position: absolute; inset: 0 auto auto 0; font-weight: bold; color: rgb(189,35,0);
        animation: 4s linear infinite; opacity:0;
        content: ""; /* set individually below */
      }
      .dana::before { content: "Dana Barrett:"; animation-name: fadeDana; }
      .dana::after  { content: "Zuul Barrett:"; animation-name: fadeZuul; }
      @keyframes fadeDana { 0%,40% {opacity:1;} 50%,90% {opacity:0;} 100% {opacity:1;} }
      @keyframes fadeZuul { 0%,40% {opacity:0;} 50%,90% {opacity:1;} 100% {opacity:0;} }

      .god {
        color: #cecece;
        font-size: 1.2rem;
        text-shadow: 0 0 6px #ad0000, 0 0 6px #ad0000, 0 0 6px #ad0000, 0 0 6px #ad0000, 0 0 6px #ad0000, 0 0 6px #ad0000;
      }

      .fire {
        text-shadow: 0 -6px 5px #ad0000, 0 -12px 8px #d36d00, 0 -15px 10px #f0a500, 0 -18px 12px #f9d100;
      }

      .boiling {
        text-shadow: 0 -10px 2px #222, 0 -20px 5px #555, 0 -30px 10px #888, 0 -40px 15px #bbb;
      }

      .darkness {
        margin: 10px;
        padding: 7px;
        background-color: #000;
        transition: all 0.3s ease;
        box-shadow:0 -10px 5px #000, 0 10px 5px #000, -10px 0 5px #000, 10px 0 5px #000, -10px -10px 5px #000, -10px 10px 5px #000, 10px 10px 5px #000, 10px -10px 5px #000;
      }
      
      .darkness:hover {
        color: #cecece;
      }

      .a {
        text-shadow: 0 0 5px #000, 2px -5px 5px #6a3802;
      }

      .c {
        text-shadow: 0 0 5px #000, 6px -10px 5px #3d2206, 2px -5px 5px #6a3802;
      }

      .n {
        text-shadow: 0 0 5px #000, -6px -10px 5px #3d2206, -2px -5px 5px #6a3802, -10px -15px 5px #b02600;
      }

      .v {
        text-shadow: 0 0 5px #000, 6px -10px 5px #3d2206, 2px -5px 5px #6a3802, 10px -15px 5px #b02600;
      }

      .o, .l {
        text-shadow: 0 0 5px #000, 6px -10px 5px #3d2206, -2px -5px 5px #6a3802, 10px -15px 5px #b02600;
      }

      .o2, .e, .s {
        text-shadow: 0 0 5px #000, -6px -10px 5px #3d2206, -2px -5px 5px #6a3802, -10px -15px 5px #b02600;
      }