/* Better than the Fencraft version currently online! */
/* ADDITION
ch-unk.display:block
newspaper is wrong and uses chu-nks,
radio is right and uses sections. Section has display:block
*/

* {
    box-sizing: border-box;
}
    
body {
    padding: 2vw;
}

.page {
    border: black 2px solid;
    padding: 1vw;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.figcol {
    flex-basis: 50%;
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

.columns {
    flex-basis: 50%;
    flex-grow: 1;
}

figure { /*added to make Radio Times work, previously padding which didnt run at all */
    margin-left: auto;
    margin-right: auto;
}

img {
    max-width: 80vw;
    margin-left: auto;
    margin-right: auto;
}

.textarea {
    display: flex;
    flex-direction: row;
    gap: 2vw;
}

.words {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    flex-basis: 50%;
    font-family: 'Benne';
}

section,ch-unk {
    display: block;
}

    /* TEXT */

.date {
    font-size: 2em;
  margin-left: 0.3em;
  padding-bottom: 0;
  margin-bottom: 0;
  font-family: 'Roboto Condensed';
  font-weight: bold;
  text-align: left;
}

figcaption {
    text-align: center;
    font-style: italic;
    font-family: 'Benne';
}

h2 {
    text-align: right;
    font-family: 'Roboto Condensed';
    font-style: italic;
    font-size: 4em;
    margin: 0;
    margin-right: 4px;
    border-bottom: 4px black solid;
}

h3 {
    background-color: black;
    color: white;
    font-family: 'Roboto Condensed';
    text-align: right;
    padding-right: 2px;
}

h4 {
    font-family: 'Roboto Condensed';
    font-weight: bold;
    text-align: left;
    padding-left: 0.5vw;
}

p {
  text-align: justify;
  line-height: 1;
  font-family: 'Benne';
  line-height: 1;
  padding-left: 0.5vw;
  padding-right: 0.5vw;
}

dt {
    font-family: 'Benne';
}

.name, na-me {
    font-weight: bold;
}


ac-tor {
    text-transform: uppercase;
    font-size: small;
}

lis-ten {
    text-transform: uppercase; 
    text-align: center;
    display: block;
    margin-left:auto;
    margin-right: auto;
}

lis-ten::after {
    content: ' \1F56A';
}

lis-ten a {
    color: rgb(35, 64, 159);
}

    dl.cast-list {
        padding-left: 0.5vw;
        padding-right: 0.5vw;
        display: block;
    }

    dl.cast-list div {
        /* Setup the DT (character) and DD (cast) items as a flexible layout. */
        display: flex ;
        margin: -5px 0 0 0;
    }

    dl.cast-list dt {
        /*
            Setup the DT element as a NESTED flexible layout. This will control the
            IMPLICIT TEXT element (character) and the :after pseudo-element (dots)
            layouts.
        */
        display: flex ;
        /* Setup the DT (character) element to grow and take-up space. */
        flex: 1 1 auto ;
        margin: 0;
    }

    dl.cast-list dt:after {
        border-bottom: 2px dotted #787878 ;
        content: "" ;
        /*
            Setup the pseudo-element (dots) to grow and take-up space. This will fill
            the white-space with "dots" because it growing inside of another layout
            which is also growing.
        */
        flex: 1 1 auto ;
        margin: 0px 0px 10px 0px ;
    }

    dl.cast-list dd {
        /* Setup the DD (cast) element to shrink, allow for dots to fill space. */
        flex: 0 1 auto ;
        margin: 0px 0px 0px 0px ;
    }

    dd {
    text-transform: uppercase;
    font-size: smaller;
}



/* open and close */
details {
    width: 80ch;
    margin-left: auto;
    margin-right: auto;
}

tran-script p {
    text-indent: 1em;
    font-size: 1.5em;
    line-height: 1.5;
}

summary {
    text-align: right;
    font-family: 'Roboto Condensed';
    font-style: italic;
    margin: 0;
    margin-right: 4px;
    border-bottom: 4px black solid;
    display: block;
    width: 100%;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
}

@media screen and (max-width: 600px) {
    .textarea {
        flex-direction: column;
    }
}