html
{
    background-color: #E23C00;
}

body
{
    height: 99vh;
    margin: 0;
    overflow: hidden;
}

input,
textarea,
select,
#status_output
{
    font-size: 1.25em;
    font-family: 'EB Garamond', 'serif';
    line-height: 1.5;
}

#logo
{
    height: 2rem;
    float: left;
    margin-left: 0.25rem;
}

#save,
#options,
#status
{
    font-size: 1.5rem;
    float: right;
    margin-right: 0.25rem;
    margin-left: 0.75rem;
    cursor: pointer;
}

#options,
#status
{
    display: none;
}

#debug_expand
{
    display: none;
}

#modals
{
    display: none;
}

.modal_bg
{
    background-color: rgba(0, 0, 0, 0.5);
    width: 100vh;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
}

.modal
{
    position: fixed;
    left: calc(12.5vw - 1rem);
    background-color: #E23C00;
    width: 75vw;
    border-radius: 5%;
    text-align: center;
    padding: 1rem;
}

.modal input
{
    margin: 0.5rem;
    width: 100px;
}

/*
@media only screen and (max-width: 480px)
{
    input, textarea
    {
        font-size: 32px;
    }
}
*/

#output
{
    display: block;
    width: calc(100% - 2rem);
    height: calc(100vh - 6rem);
    white-space: pre-line;
    text-align: justify;
    padding: 1rem;
    clear: both;
    background-color: #FFFFFF;
    overflow-y: scroll;
    font-size: 1.25em;
    font-family: 'EB Garamond', 'serif';
    line-height: 1.5;
}

.tab
{
    width: 2rem;
    display: inline-block;
}

.output__input
{
    padding: 1rem 0;
    color: #c274b9;
}

#output.output_with_debug
{
    height: calc(100vh - 14rem) !important;
}

#output.output_with_status
{
    height: calc(100vh - 16rem) !important;
}

#status_output
{
    display: none;
    clear: both;
    height: 12rem;
    padding-top: 1rem;
    font-size: 0.9rem;
    height: 9rem;
}

.status_output__col
{
    width: 50%;
    float: left;
}

#input_form
{
    margin: 0;
}

#input_1,
#input_2
{
    width: calc(50% - 38px);
}

#submit
{
    width: 75px;
}

#input_1,
#input_2,
#submit
{
    height: 2rem;
    line-height: 1;
}