@media screen and (orientation:portrait) {

    hr{
        width: 100%;
    }
    body{
        /*        font-size: 0.9em;*/
        font-size: 14px;
        font-family: "Courier New", Courier, monospace, "ResourceHan";
        color: #000;
        margin: 12px;
        line-height: 18px;
        hyphens: auto;
        margin-top: 0;
    }
    #stickynav{
        padding-top: 14px;
    }
    h1 {
        height: auto;
        font-weight: normal;
        text-decoration: none;
        /*        margin-bottom: calc(2* 0.67em);*/
        /*        line-height: 1.4;*/
        line-height: 21px;
        font-size: 17px;
        hyphens: manual;
        position: relative;
    }
    #homeMedia pre{
        font-size: 7px;
        line-height: 12px;
    }

    .directory-item{
        padding-top: 1em;
    }

    #topnav .directory-list {
        display: flex;
        flex-direction: column;
    }
    #topnav .directory-item.labels.parent {
        order: -1; 
        padding: 0;
    }
    #topnav .directory-item.parent-directory {
        order: -2; 
    }
    #topnav .directory-item.labels.parent .indent {
        display: none;
    }

    .directory-item.labels:not(.directory-item.labels.parent){
        display: none;
    }   

    #topnav .directory-item.labels.parent > .info {
        display: grid;
        grid-template-columns: 0 0 0 1fr;
        grid-template-rows: auto;
        gap: 0px;
        grid-template-areas:
            "name modified size description";
        hyphens: auto;
        word-break: break-word;
    }

    .indent { grid-area: indent; }
    .icon { grid-area: icon; }
    .name { grid-area: name; width: 100%; }
    .modified { grid-area: modified; display: none;}
    .size { grid-area: size; text-align: right;}
    .description { grid-area: description;  width: 100%;}

    .modified, .size {
        width: auto;
        word-break: auto-phrase;
        font-size: 10px;
    }
    .name, .modified, .size, .description{
        margin: 0;
    }

    .icon {
        max-width: 13px;
        max-height: 13px;
        margin-right: 0;
    }

    .directory-item.pdf > .info, .directory-item.link > .info {
        display: flex; 
    }


    .directory-item > .info {
        display: grid; 
        grid-template-columns: 0px 13px 1fr auto; 
        grid-template-rows: auto auto; 
        gap: 2px 13px; 
        grid-template-areas: 
            "indent icon name size"
            "indent icon description description"; 
        hyphens: auto;
        word-break: break-word;
    }
    .directory-item.folder > .info, .directory-item.home > .info , .directory-item.about > .info , .directory-item.contact > .info {
        grid-template-columns: 0 auto 3fr auto; 
    }


    .directory-item.level-0 > .info {
        display: grid; 
        grid-template-columns: 13px 1fr auto; 
        grid-template-rows: auto auto; 
        gap: 2px 13px; 
        grid-template-areas: 
            "icon name size"
            "icon description description"; 
    }

    .directory-item.level-1 > .info {
        display: grid; 
        grid-template-columns: 0px 13px 1fr auto; 
        grid-template-rows: auto auto; 
        gap: 2px 13px; 
        grid-template-areas: 
            "indent icon name size"
            "indent icon description description"; 
    }
    .directory-item.level-2 > .info {
        display: grid; 
        grid-template-columns: 0px 0px 13px 1fr auto; 
        grid-template-rows: auto auto; 
        gap: 2px 13px; 
        grid-template-areas: 
            "indent indent icon name size"
            "indent indent icon description description"; 
    }
    .directory-item.level-3 > .info {
        display: grid; 
        grid-template-columns: 0px 0px 0px 13px 1fr auto; 
        grid-template-rows: auto auto; 
        gap: 2px 13px; 
        grid-template-areas: 
            "indent indent indent icon name size"
            "indent indent indent icon description description"; 
    }


    .directory-item.level-3 section.main-description{
        width: calc(100vw - (13px * 4));
    }
    .directory-item.level-3 #media{
        width: calc(100vw - (13px * 2));
    }

    .mail .directory-item > .info, .parent-directory.directory-item > .info {
        display: grid; 
        grid-template-columns: 13px 1fr 0; 
        grid-template-rows: auto  auto; 
        gap: 2px 13px; 
        grid-template-areas: 
            "icon name size"
            "icon description description"; 
    }
    #mail.directory-item .indent{
        display: none;
    }
    #mail .children-list.directory-list{
        max-height: unset !important;
    }

    .home-container {
        margin-top: 1em;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto auto auto auto;
        gap: 1em 1em;
        grid-auto-flow: row;
        grid-template-areas:
            "subject"
            "subject-content"
            "date"
            "date-content"
            "from"
            "from-content"
            "to"
            "to-content"
            "message"
            "message-content"
            "separator"
            "separator";
        text-transform: none;
        align-items: baseline;
        position: relative;
        width: calc(100vw - 24px);
    }
    .subject, .date, .from, .to, .separator, .message{
        margin-top: 1em;
    }
    .home-container > div{
        position: relative;
        width: calc(100vw - 24px);
    }



    .player .controls {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 1em;
    }
    .volume-slider,  .player .controls .volume-box{
        display: none !important;
    }
    .player .slider{
        width: 100%;
        margin: 1em 0;
    }

    .player .timer{
        flex: 1;
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: flex-end;
    }

    .player.audio .controls{
        flex-wrap: nowrap;
    }
    .player.audio .slider{
        width: 45vw;
        /*        flex: 1;*/
        margin: 1em 0 0 1em;
    }

    .player.audio .timer{
        flex: initial;
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: flex-end;
    }


    .player .play-button, .player .volume-button, .player .fullscreen-button{
        font-size: 12px;
    }
    .play-button{
        order: -2; 
    }
    .fullscreen-button{
        order: -1; 
    }

    figcaption{
        position: relative;
        float: left;
        margin: 1em 0;
    }

    button{
        background: none;
        color: black;
        border: none;
        padding: 0;
        font: inherit;
        outline: inherit;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: #e6e6e6;
        border: 1px solid #000;
        border-radius: 2px;
        width: auto;
        padding: 2px 4px;
        text-align: center;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
        margin: 0;
        cursor: pointer;
        user-select: none;
        z-index: 1;

    }
    #media{
        padding: 2svh 0;
    }

    .carousel-button .arrows{
        max-width: 7vw;
        max-height: 7vw;
    }
    .img-details p:not(.img-details p:first-child){
        padding-bottom: 2svh;
    }
    .img-details p.caption, .img-details p:not(p.counter){
        flex-direction: column;
    }


    .current-page #content{
        margin-top: 2em;
    }
    .current-page #media, .current-page #content{
        max-height: none !important;
    }

    .level-2.current-page #content, .level-2.current-page .description {
        margin-left: calc(-1 * (13px * 3));
    }
    .level-3.current-page #content, .level-3.current-page .description {
        margin-left: calc(-1 * (13px * 5));
    }



    .level-2.current-page #content, .directory-item.level-2 section.main-description{
        width: calc(100vw - (13px * 6));
        margin-left: 0;
    }
    .directory-item.level-2 #media{
        width: calc(100vw - (13px * 3));
    }

    .level-3.current-page #content, .directory-item.level-3 section.main-description{
        width: calc(100vw - (13px * 7));
        margin-left: 0;
    }
    .directory-item.level-3 #media{
        width: calc(100vw - (13px * 2));
    }

    .directory-item#mail{
        padding-top: 2rem;
    }



    /*    privacyWire  */

    .privacywire{
        border-width: 1.5px;
        border-style: inset;
        box-shadow: none !important;
        z-index: 1002 !important;
    }
    .privacywire *{
        font-size: 95%;
    }

    .show-banner .privacywire.privacywire-banner,
    .show-options .privacywire.privacywire-options,
    .show-message .privacywire.privacywire-message {
        display: block;
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        max-width: 350px;
    }
}