.atkinson-hyperlegible-regular {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.atkinson-hyperlegible-bold {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.atkinson-hyperlegible-regular-italic {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.atkinson-hyperlegible-bold-italic {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-weight: 700;
  font-style: italic;
}


.play-regular {
  font-family: "Play", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.play-bold {
  font-family: "Play", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.nunito-regular {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200 1000;
  font-style: normal;
}

.roboto-mono-regular {
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100 700;
  font-style: normal;
}


body {
    background-color: #000;
    color: #EEE;
    font-family: 'Atkinson Hyperlegible';
    font-size: 1.2em;
    margin:auto;
    max-width: 64ch;
    width: 100%;
}

em {
    font-style: italic;
}

strong {
    font-weight: 800;
}

.gray {
    color: #BBD;
}
.oll {
    color: #EC0;
    font-family: 'Nunito';
}
.pasc {
    color: #E99;
    font-family: 'Play';
}
.mc {
    color: #922;
    font-family: 'Roboto Mono';
}

.angry {
    font-weight: 500;
    text-shadow:
        0 0 1em red,
        0 -0.2em 0.25em #900,
        0 0.2em 0.25em #400;
}
.dream {
    color: white;
    font-style: italic;

    filter:blur(0.035em) grayscale(60%) hue-rotate(-12.5deg);
}
.dream.gray {
    text-shadow:
        0 0 1em #BBD,
        0 0 0.9em #BBD,
        0 0 0.05em black;
}
.dream.oll {
    text-shadow:
        0 0 1em #EC0,
        0 0 0.9em #EC0,
        0 0 0.05em black;
}
.muffled {
    text-shadow:
        0 0 1.2em,
        0 0 1em,
        0 0 0.5em;
}
.scared {
    text-shadow:
        0.15ch -0.15em 0.1em slategray,
        -0.15ch 0.15em 0.1em slategray;
}
.scared.muffled {
    text-shadow:
        0 0 1.2em,
        0 0 1em,
        0 0 0.5em,
        0.75ch -0.25em 0.1em slategray,
        -0.75ch 0.25em 0.1em slategray;
}
.whisper {
    filter:blur(0.04em);
}

p {
    margin: 1.25em 4ch;
    text-align: justify;
}

q{
    padding-left: 1ch;
    padding-right: 1ch;
    quotes: '“  ' '' '‘  ' '';
    text-align:left;
}
q.punc{
    quotes: '“' '' '‘' '';
}

.dlg>q{
    display: block;
    margin-bottom: 0.3em;
    max-width: 65%;
    padding: 1px;
}

.dlg .gray, .dlg.gray {
    margin-left: 5%;
}
.dlg .oll, .dlg.oll {
    margin-left: 15%;
}
.dlg .pasc, .dlg.pasc {
    margin-left: 25%;
}

@media (max-width: 780px) {
    p {
      margin: 1.25em 2ch;
    }
}

@media (max-width: 720px) {
    body {
      max-width:100%;
      margin:0;
    }
    
    p {
      margin: 1em;
    }
}