html, body{
    margin: 0;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

header{
    width: 100%;
    height: 60px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    overflow: auto hidden;
    scrollbar-width: thin;
}

#file-input{
    display: none;
}

#fox-docs {
    margin-right: auto;
}

main{
    display: grid;
    width: 100%;
    height: calc(100% - 60px);
}

textarea {
    resize: none;
    @media (orientation: portrait) {
        order: 1;
    }
}

body.fullscreen:not(.duowindow) textarea{
    display: none;
}

body.duowindow :is(#fox-toggle-fullscreen, output){
    display: none;
}

body.duowindow main{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

@media (orientation: landscape) {
    main{
        grid-template-columns: 1fr 1fr;
    }
    body.fullscreen main{
        grid-template-columns: 1fr;
    }
}

@media (orientation: portrait) {
    main{
        grid-template-rows: 1fr 1fr;
    }
    body.fullscreen main{
        grid-template-rows: 1fr;
    }
    body:not(.duowindow) #fox-duowindow{display: none;}
}

@supports (width: 100vw){
    html, body{
        width: 100vw;
        height: 100vh;
    }
    main{
        height: calc(100vh - 60px);
    }
}

@supports (width: 100dvw){
    html, body{
        width: 100dvw;
        height: 100dvh;
    }
    main{
        height: calc(100dvh - 60px);
    }
}

.accent-body::selection, .accent-body ::selection {
    background-color: #0000;
}