[contentEditable=true]:focus {
    outline-width: 0;
}


[contentEditable=true]:empty:not(:focus):before{
    content: "What do you want to do?";
    opacity: 0.5;
}

.header {
    margin-bottom: 0;
}

.leading-space {
    height: 75vh;
}

.output {
    background-color: #121212;
    display: block;
    flex-grow: 1;
    overflow-y: scroll;
    padding: 10px;
}

.output p {
    margin-bottom: 10px;
}

@media ( min-width: 821px ) {


    section {
        align-items: stretch;
        display: flex;
        flex-direction: column;
        height: calc( 100vh - 70px );
        justify-content: space-between;
        margin-top: 5px;
        padding: 10px;
    }


    .utterance {
        background-color: #44475a;
        border-radius: 10px;
        display: block;
        flex-grow: 0;
        padding: 5px 10px 5px 1.6rem;
        /* width: calc( 100% - 10px - 1.6rem ); */
    }

    .output {
        border-radius: 10px;
        height: 10vh;
        margin-bottom: 1vh;
    }

    .prompt {
        bottom: 18px;
        left: 15px;
        position: absolute;
    }

}

@media ( max-width: 820px ) {

    section {
        align-items: stretch;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: fixed;
        top: 50px;
        bottom: 0;
        left: 0;
        width: 100vw;
    }

    .output {
        border: none;
        box-sizing: border-box;
    }

    .prompt {
        display: none;
    }

    .utterance {
        background-color: #44475a;
        border-bottom: 1px solid #f8f8f2;
        border-top: 1px solid #f8f8f2;
        display: block;
        flex-grow: 0;
        padding: 5px 10px 5px 1.6rem;
        width: 100vw;
    }

}