#text-window p{
    font-family: monospace;
    margin: 12px;
}

 summary {
    font-family: monospace;
    margin: 12px;
}

#text-window details p {
    text-align: justify;
}

/* #text-window p {
    font-size: 2em;
}

#text-window summary {
    font-size: 1.3em;
} */

@media (min-width: 769px) {

    #picture-window .title-bar-text {
        display: flex;
        width: 12vw;
    }
    
    #picture-window .title-bar-text span {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #title-window {
        width: 40%;
        z-index: 1;
        top: 10%;
        left: 50%;
        transform: translate(-50%, -10%);
    }
    
    #picture-window.main-speaker {
        max-width: 20%;
        top: 45%;
        left: 15%;
        transform: translate(-15%, -45%);
        z-index: 2;
    }
    
    #picture-window.cospeaker {
        max-width: 20%;
        top: 80%;
        left: 30%;
        transform: translate(-30%, -80%);
        z-index: 3;
    }

    #picture-window.speaker {
        max-width: 20%;
        top: 45%;
        left: 25%;
        transform: translate(-25%, -45%);
        z-index: 2;
    }

    #picture-window.extra-speaker {
        max-width: 20%;
        top: 80%;
        left: 2%;
        transform: translate(-2%, -80%);
        z-index: 3;
    }

    #picture-window.main-triple {
        max-width: 20%;
        top: 15%;
        left: 5%;
        transform: translate(-5%, -15%);
        z-index: 1;
    }
    
    #picture-window.cotriple {
        max-width: 20%;
        top: 55%;
        left: 25%;
        transform: translate(-25%, -55%);
        z-index: 2;
    }

    #text-window {
        width: 40%;
        z-index: 1;
        top: 75%;
        left: 80%;
        transform: translate(-80%, -75%);
        z-index: 3;
    }

}

@media (max-width: 768px) {

    #picture-window.main-speaker, #picture-window.cospeaker, #picture-window.speaker, #picture-window.extra-speaker {
        width: 70%;
        margin: auto;
        margin-top: 5%;
    }

    #picture-window.cospeaker, #picture-window.speaker {
        margin-bottom: 6em !important;
    }

}