移动端适配

注意：这是本网站使用的组件页面

组件页面一般通过[[include]]方式使用。

请不要随意编辑此页面以免造成不必要的崩溃。

如果你需要报告错误，请前往页面讨论区。

---

+ 显示代码

@media only screen and (max-width: 56.25rem) {
    :root {
        overflow:-moz-scrollbars-none;
        scrollbar-width: none
    }
    ::-webkit-scrollbar {
        width: 0;
        background: transparent
    }
    ::-webkit-scrollbar-thumb {
        background: rgb(var(--undertone));
    }
}
/* = SIDEBAR = */
@media (max-width: 767px) {
    #side-bar > .side-block > .menu-item > a:hover {
        color: rgb(var(--title-shadow));
        background: rgb(var(--highlight-primary-color)) !important;
        text-decoration: none;
    }
    #side-bar a:hover {
        color: rgb(var(--title-shadow));
        background: rgb(var(var(--scale-0),0)) !important;
        text-decoration: none;
    }
    .close-menu {
        display: none;
    }
    .open-menu a {
        position: absolute;
        top: 0.32175em;
        left: 0.325em;
        z-index: 15;
        font-family: var(--UI-font);
        font-size: 30px;
        font-weight: 900;
        color: rgb(var(--mobile-topmenu-sidebar-button-color)) !important;
        text-shadow: 0 0 2px rgb(var(--scale-8)),0 0 4px rgb(var(--scale-0));
        width: 30px;
        height: 30px;
        text-align: center;
        transition: all .2s var(--standard-curve);
    }
    .open-menu a::before {
        --clip-path: polygon(0 0,0 0,0 0,0 0);
        -webkit-clip-path: var(--clip-path);
        z-index: -1;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(var(--dropdown-links-bg-color));
        content: " ";
        clip-path: var(--clip-path);
        opacity: 1;
        pointer-events: none;
        transition: -webkit-clip-path .2s var(--standard-curve);
        transition: clip-path .2s var(--standard-curve);
        }
    .open-menu a:hover::before {
        --clip-path: polygon(0 0, 0 0, 200% 0, 0 200%);;
    }
    .open-menu a::after {
        --clip-path: polygon(0 0,0 0,0 0,0 0);
        -webkit-clip-path: var(--clip-path);
        z-index: -2;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(0,0,0,.65);
        content: " ";
        clip-path: var(--clip-path);
        opacity: 1;
        pointer-events: none;
        transition: -webkit-clip-path .45s var(--standard-curve);
        transition: clip-path .45s var(--standard-curve);
    }
    .open-menu a:hover::after{
        --clip-path: polygon(0 0, 0 0, 200% 0, 0 200%);;
    }
    .open-menu a:hover {
        text-decoration: none !important;
        color: rgb(var(--mobile-topmenu-sidebar-button-hover-color)) !important;
        text-shadow: 0 0 2px rgb(var(--scale-0)),0 0 4px rgb(var(--scale-8));
        -webkit-box-shadow: 0 0 10px 3px rgb(var(--bright-secondary-color)) inset;
        -moz-box-shadow: 0 0 10px 3px rgb(var(--bright-secondary-color)) inset;
        -ms-box-shadow: 0 0 10px 3px rgb(var(--bright-secondary-color)) inset;
        -o-box-shadow: 0 0 10px 3px rgb(var(--bright-secondary-color)) inset;
        box-shadow: 0 0 10px 3px rgb(var(--bright-secondary-color)) inset;
        transition: all .2s var(--standard-curve);
    }
    #header div.open-menu {
        display: flex;
        width: var(--topbar-height-on-mobile);
        height: var(--topbar-height-on-mobile)
    }
    #header div.open-menu>p {
        display: inline-flex;
        align-content: stretch;
        align-items: stretch;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        font-size: 2.5em
    }
    #header div.open-menu>p,#header div.open-menu>p>a {
        justify-content: center
    }
    #header div.open-menu>p>a {
        display: flex;
        flex: 2 0 100%;
        align-items: center;
        justify-content: center;
        border: none !important;
        background-color: initial !important;
        letter-spacing: .016em;
        text-align: center;
        text-decoration: none;
        position: sticky;
        position: -webkit-sticky;
        height: auto;
    }
    #side-bar {
        display: block;
        position: fixed;
        top: 0;
        left: -25em;
        width: var(--sidebar-width-on-mobile);
        height: 100%;
        background-color: rgb(var(--sidebar-bg-color));
        z-index: 10;
        padding: var(--sidebar-padding-width);
        -webkit-transition: left 0.5s ease-in-out 0.1s;
        -moz-transition: left 0.5s ease-in-out 0.1s;
        -ms-transition: left 0.5s ease-in-out 0.1s;
        -o-transition: left 0.5s ease-in-out 0.1s;
        transition: left 0.5s ease-in-out 0.1s;
    }
    #side-bar:after {
        content: "";
        position: absolute;
        top: 0;
        width: 0;
        height: 100%;
        background-color: rgb(0, 0, 0, 0.2);
    }
    #side-bar:target {
        display: block;
        left: 0;
        margin: 0;
        z-index: 12;
        overflow-x: hidden;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }
    #side-bar:target + #main-content {
        left: 0;
    }
    #side-bar .close-menu, #skrollr-body:target .close-menu {
      display: block;
      visibility: hidden;
      z-index: -1;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(var(--scale-0),.3) .0625rem .0625rem repeat;
      opacity: 0;
      pointer-events: none;
      transition: all .5s var(--standard-curve) .1s;
  }
#side-bar:target .close-menu, #skrollr-body:target .close-menu {
    display: block;
    position: fixed;
    width: calc(100% - var(--sidebar-final-width-on-mobile));
    height: 100%;
    top: 0;
    left: 0;
    transform: translateX(calc(var(--sidebar-final-width-on-mobile) - var(--scrollbar-width)));
    background: rgb(0,0,0,0.1) 1px 1px repeat;
    z-index: -1;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}
    #side-bar:target a.close-menu:is(:hover,:focus) {
        background: rgb(0,0,0,.1) 1px 1px repeat !important;
}
    a.close-menu:before {
        content: "";
        display: block;
        position: absolute;
        height: 100%;
        width: 100%;
        -webkit-backdrop-filter: blur(.2em);
        backdrop-filter: blur(.2em);
        mask: var(--feather-mask);
        -webkit-mask: var(--feather-mask);
        z-index: -1
}
}
/* HEADER ON MOBILE */
@media (max-width: 767px) {
    #header {
    --size: calc(var(--final-header-height-on-mobile) - 0.875rem);
    --y-offset: 4em;
        position: -webkit-sticky;
        position: sticky;
        top: calc(var(--header-height-on-mobile)*-1);
        width: var(--header-width-on-mobile,100vw);
        height: calc(var(--final-header-height-on-mobile) - 3rem);
        margin: 0;
        background-image: var(--logo-image);
        background-position: center calc(((var(--size)*-1) + var(--header-height-on-mobile) + var(--y-offset))/2);
        background-size: var(--size),100% var(--header-height-on-mobile);
        background-repeat: no-repeat,repeat;
    }
    #header, #top-bar {
        --wght: var(--ui-wght);
        max-width: var(--header-width-on-mobile,61.25rem);
        margin: 0 auto;
        font-weight: var(--wght)
    }
    #header {
        z-index: 10;
        padding-bottom: 0px;
        display: grid;
        align-items: center;
        justify-items: start;
    }
    #header h1, #header h2 {
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        position: absolute;
        margin: 0;
        z-index: 2;
    }
    #header h1 a, #header h1 a:before {
        color: rgb(var(--headerh1-color));
    }
    #header h1 a {
        --wght: 900;
        display: block;
        z-index: 10;
        margin: 0;
        padding: 0;
        font-weight: var(--wght);
        font-size: var(--header-h1-font-size);
        line-height: 1;
        font-family: var(--header-font), serif;
    }
    #header h1 a, #header h2 span {
        color: inherit;
        text-shadow: inherit;
    }
    #header h1 a>span, #header h2 {
        pointer-events: none;
    }
    #header h1 a>span {
        display: none;
    }
    #header h1 a:after {
        content: var(--header-title);
    }
    #header h2 {
        clear: left;
        float: left;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        height: var(--header-height-on-mobile);
        width: 100%;
        align-items: center;
    }
    #header h2 span {
        color: transparent;
        text-shadow: none;
        height: 100%;
        width: 100%;
        position: absolute;
        top: calc(var(--final-header-height-on-mobile) / 2 - 1rem);
    }
    #header h2 span:before {
        content: var(--header-subtitle);
        color: rgb(var(--scale-8));
        text-shadow: 0 0 3px rgb(var(--scale-0));
        font-family: var(--title-font), serif;
        mix-blend-mode: difference;
        -webkit-text-stroke: .1px rgb(var(--scale-8));
        font-size: 1rem;
        display: inline-flex;
        width: 100vw !important;
        height: 1rem;
        justify-content: center;
    }
    #header > h2 > span:not(::before) {
        display: none
    }
    div#extra-div-1 {
        height: var(--banner-height);
        width: 100%;
        top: 0px;
        background: url("http://arknights.wdfiles.com/local--files/theme%3Asami/banner_left") left top no-repeat, url("http://arknights.wdfiles.com/local--files/theme%3Asami/banner_right") right top repeat-x;
        z-index: 0 !important;
        box-shadow: 0 1px 4px 0.5px rgb(var(--frame-shadow));
        position: fixed;
        overflow: visible;
    }
}
/* = TOPBAR = */
@media (max-width: 767px) {
 #header div#top-bar {
        --wght: var(--ui-wght);
        display: inline-flex;
        z-index: 50;
        position: static;
        flex-wrap: nowrap;
        width: 100%;
        height: var(--topbar-height-on-desktop);
        margin: var(--header-height-on-desktop) 0 1.75rem 0;
        padding: 0;
        font-weight: var(--wght);
        font-size: calc(var(--base-font-size)*.85);
        font-family: var(--UI-font,var(--header-font))
    }
 
    #header div[class*=top-bar]>ul {
        display: flex;
        z-index: 20;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        width: 90vw;
        max-width: 60rem;
        height: 100%;
        margin: 0;
        padding: 0;
        line-height: 0;
        letter-spacing: .0625rem;
        text-align: center
    }
    #header div[class*=top-bar]>ul>li {
        display: inline-flex;
        position: relative;
        flex-grow: 2;
        flex-shrink: 2;
        width: auto;
        margin: 0;
        padding: 0;
        list-style: none outside none;
        cursor: pointer;
        transition: background-color .15s var(--standard-curve)
    }
 
    #header div[class*=top-bar]>ul>li>a {
        --wght: calc(var(--ui-wght) + 100);
        display: inline-flex;
        position: relative;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: calc(100% - .6em);
        padding: .3em;
        overflow: hidden;
        border: none;
        background-color: initial;
        color: rgb(var(--topmenu-category-color));
        text-shadow: none;
        font-weight: var(--wght);
        line-height: 1;
        text-decoration: none;
        white-space: normal;
        transition: color .15s var(--standard-curve)
    }
    #header div[class*=top-bar]>ul>li:active>a,#header div[class*=top-bar]>ul>li:hover>a, #header div[class*=top-bar]>ul>li:focus-within>a {
        --wght: var(--ui-hvr-wght);
        color: rgb(var(--topmenu-category-hover-color));
        text-shadow: none;
    }
    #header div[class*=top-bar]>ul>li>a:after,#header div[class*=top-bar]>ul>li>a:before {
        position: absolute;
        width: 100%;
        height: .1875rem;
        background-color: rgb(var(--topmenu-hover-border-color));
        content: " ";
        transition: -webkit-clip-path .2s var(--standard-curve);
        transition: clip-path .2s var(--standard-curve);
        transition: clip-path .2s var(--standard-curve),-webkit-clip-path .2s var(--standard-curve)
    }
    #header div[class*=top-bar]>ul>li>a:before {
        --clip-path: polygon(0 0,0 0,0 100%,0 100%);
        -webkit-clip-path: var(--clip-path);
        top: 0;
        left: 0;
        clip-path: var(--clip-path)
    }
    #header div[class*=top-bar]>ul>li>a:after {
        --clip-path: polygon(100% 0,100% 0,100% 100%,100% 100%);
        -webkit-clip-path: var(--clip-path);
        right: 0;
        bottom: 0;
        clip-path: var(--clip-path)
    }
    #header div[class*=top-bar]>ul>li:active>a:before,#header div[class*=top-bar]>ul>li:hover>a:before {
        --clip-path: polygon(-15% 0,115% 0,100% 100%,0 100%)
    }
    #header div[class*=top-bar]>ul>li:focus-within>a:before {
        --clip-path: polygon(-15% 0,115% 0,100% 100%,0 100%)
    }
    #header div[class*=top-bar]>ul>li:active>a:after,#header div[class*=top-bar]>ul>li:hover>a:after {
        --clip-path: polygon(-15% 0,115% 0,100% 100%,0 100%)
    }
    #header div[class*=top-bar]>ul>li:focus-within>a:after {
        --clip-path: polygon(-15% 0,115% 0,100% 100%,0 100%)
    }
    #header div[class*=top-bar]>ul>li:active>a,#header div[class*=top-bar]>ul>li:hover>a {
        --wght: calc(var(--ui-hvr-wght) + 100);
        background-color: rgb(var(--topmenu-category-hover-bg));
        font-weight: var(--wght)
    }
    #header div[class*=top-bar]>ul>li:focus-within>a {
        --wght: calc(var(--ui-hvr-wght) + 100);
        background-color: rgb(var(--topmenu-category-hover-bg));
        font-weight: var(--wght)
    }
    #header div[class*=top-bar] li ul {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: 0;
        padding: 0;
        border-collapse: collapse;
        opacity: 0;
        transition: opacity .2s var(--standard-curve),transform .2s var(--standard-curve)
    }
    #header div[class*=top-bar]>ul li:active,#header div[class*=top-bar]>ul li:hover {
        background-color: rgb(var(--undertone),.05)
    }
    #header div[class*=top-bar]>ul li:focus-within {
        background-color: rgb(var(--undertone),.05)
    }
    #header div[class*=top-bar] li a {
        transition: font-weight .2s var(--standard-curve),font-variation-settings .2s var(--standard-curve)
    }
    #header div[class*=top-bar] li:active a,#header div[class*=top-bar] li:hover a, #header div[class*=top-bar] li a:focus-within {
        text-decoration: none
    }
    #header div[class*=top-bar]>ul>li>ul {
        --box-shadow: rgb(var(--dropdown-border-color));
        box-sizing: border-box;
        display: flex;
        visibility: visible;
        z-index: 20;
        position: absolute;
        left: 0;
        flex-direction: column;
        flex-wrap: nowrap;
        align-self: flex-start;
        width: auto;
        min-width: 100%;
        max-width: var(--header-width-on-desktop,61.25rem);
        margin-top: var(--topbar-height-on-desktop);
        border-top: none;
        background: rgb(var(--dropdown-bg-color));
        box-shadow: 0 .125rem .375rem var(--box-shadow),inset 0 0 0 .0625rem var(--box-shadow);
        pointer-events: none;
        border-color:rgb(var(--topmenu-border-color));
    }
    #header div[class*=top-bar]>ul>li:active>ul,#header div[class*=top-bar]>ul>li:hover>ul, #header div[class*=top-bar]>ul>li:focus-within>ul {
        opacity: 1;
        pointer-events: all
    }
    #header div[class*=top-bar]>ul:first-of-type>li:last-of-type>ul {
        right: 0;
        left: auto
    }
    #header div[class*=top-bar]>ul>li>ul li>a {
        --wght: var(--ui-wght);
        display: flex;
        position: relative;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 0 1em;
        overflow: hidden;
        border: 0 solid transparent;
        background: rgb(var(--dropdown-links-bg-color));
        color: rgb(var(--dropdown-links-color));
        text-shadow: none;
        font-weight: var(--wght);
        font-size: calc(var(--base-font-size)*.8);
        text-align: center;
        white-space: nowrap;
        transition: background-color .15s var(--standard-curve),color .15s var(--standard-curve),font-weight .2s var(--standard-curve),font-variation-settings .2s var(--standard-curve)
    }
    #header div[class*=top-bar]>ul>li>ul li>a:before {
        --clip-path: polygon(0 0,0 0,0 100%,0 100%);
        -webkit-clip-path: var(--clip-path);
        z-index: -1;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(var(--dropdown-links-hover-bg-color));
        content: " ";
        clip-path: var(--clip-path);
        opacity: 1;
        pointer-events: none;
        transition: -webkit-clip-path .2s var(--standard-curve);
        transition: clip-path .2s var(--standard-curve);
        transition: clip-path .2s var(--standard-curve),-webkit-clip-path .2s var(--standard-curve)
    }
    #header div[class*=top-bar]>ul>li>ul li:active>a,#header div[class*=top-bar]>ul>li>ul li:hover>a, #header div[class*=top-bar]>ul>li>ul li:focus-within>a {
        --wght: var(--ui-hvr-wght);
        color: rgb(var(--dropdown-links-hover-color));
        font-weight: var(--wght)
    }
    #header div[class*=top-bar]>ul>li>ul li:active>a:before,#header div[class*=top-bar]>ul>li>ul li:hover>a:before {
        --clip-path: polygon(-15% 0,115% 0,100% 100%,0 100%)
    }
    #header div[class*=top-bar]>ul>li>ul li:focus-within>a:before {
        --clip-path: polygon(-15% 0,115% 0,100% 100%,0 100%)
    }
    #header div[class*=top-bar]>ul>li ul>li {
        -moz-column-break-inside: avoid;
        box-sizing: border-box;
        display: flex;
        visibility: visible;
        position: relative;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 2rem;
        margin: 0;
        padding: 0;
        overflow: visible;
        border-collapse: collapse;
        box-shadow: inset 0 0 0 .0625rem var(--box-shadow);
        word-break: normal;
        break-inside: avoid;
        transition: background-color 80ms var(--standard-curve)
    }
    #header div[class*=top-bar]>ul>li>ul>li ul {
        box-sizing: initial;
        display: flex;
        z-index: 5;
        position: absolute;
        top: 0;
        left: calc(100% - .0625rem);
        flex-direction: column;
        flex-wrap: nowrap;
        width: auto;
        height: auto;
        margin: 0;
        background-color: rgb(var(--dropdown-bg-color));
        opacity: 0;
        pointer-events: none;
        transition: opacity 80ms var(--standard-curve),background-color 80ms var(--standard-curve)
    }
    #header div[class*=top-bar]>ul>li>ul>li:active ul,#header div[class*=top-bar]>ul>li>ul>li:active ul:active,#header div[class*=top-bar]>ul>li>ul>li:hover ul,#header div[class*=top-bar]>ul>li>ul>li:hover ul:hover, #header div[class*=top-bar]>ul>li>ul>li:focus-within ul,#header div[class*=top-bar]>ul>li>ul>li:focus-within ul:focus-within {
        opacity: 1;
        pointer-events: all
    }
    #header div[class*=top-bar]>ul>li>ul li>ul:before {
        --clip-path: polygon(0 0,100% 0,100% 100%,0 0);
        -webkit-clip-path: var(--clip-path);
        z-index: 5;
        position: absolute;
        top: 2rem;
        right: 100%;
        width: 50%;
        height: calc(100% - 2rem);
        content: " ";
        clip-path: var(--clip-path)
    }
    #header div[class*=top-bar]>ul>li>ul>li>img {
        position: static;
        padding: 0 .25rem 0 0
    }
    #header div[class*=top-bar]>ul>li>ul>li>a.topbar-link-w-img {
        justify-content: start;
        padding-left: 2.5rem;
        text-align: left
    }
    #header div[class*=top-bar]>ul>li>ul>li>a.topbar-link-w-img img {
        position: abslute;
        left: 0
    }
    @supports ((-webkit-backdrop-filter: blur(1rem)) or (backdrop-filter:blur(1rem))) {
        #header div[class*=top-bar] ul>li>ul {
            -webkit-backdrop-filter:blur(0);
            backdrop-filter: blur(0);
            transition: opacity .2s var(--standard-curve),transform .2s var(--standard-curve),-webkit-backdrop-filter .2s var(--standard-curve);
            transition: backdrop-filter .2s var(--standard-curve),opacity .2s var(--standard-curve),transform .2s var(--standard-curve);
            transition: backdrop-filter .2s var(--standard-curve),opacity .2s var(--standard-curve),transform .2s var(--standard-curve),-webkit-backdrop-filter .2s var(--standard-curve)
        }
        #header div[class*=top-bar] ul>li:active>ul,#header div[class*=top-bar] ul>li:hover>ul {
            -webkit-backdrop-filter: blur(.125rem);
            backdrop-filter: blur(.125rem)
        }
        #header div[class*=top-bar] ul>li:focus-within>ul {
            -webkit-backdrop-filter: blur(.125rem);
            backdrop-filter: blur(.125rem)
        }
    }
}
    @media only screen and (max-width: 56.25rem) {
 #header div#top-bar {
            height: var(--topbar-height-on-mobile);
            margin: calc(var(--header-height-on-mobile)) 0 1.75rem 0
        }
        #header div.top-bar {
            display: none
        }
        div.mobile-top-bar {
            display: flex;
            z-index: 9999;
            position: static;
            top: 0;
            right: 0;
            left: 0;
            align-items: center;
            width: var(--header-width-on-mobile,100vw);
            margin: 0;
            padding: 0;
            background: rgb(var(--topmenu-bg-color));
            box-shadow: inset 0px 1px 5px 0px rgb(var(--topmenu-inner-shadow)), 0 2px 5px 0px rgb(var(--topmenu-outer-shadow));
        }
        }
        #header div[class*=top-bar]>ul {
            width: calc(100% - var(--topbar-height-on-mobile))
        }
        #header div[class*=top-bar]>ul>li {
            position: inherit
        }
        #header div[class*=top-bar]>ul>li>a {
            background: none;
            font-size: 1.25em
        }
        #header div[class*=top-bar]>ul>li>ul {
            display: grid;
            left: 50%;
            grid-template-columns: repeat(2,50%);
            max-height: calc(100vh - 8rem);
            margin-top: var(--topbar-height-on-mobile);
            transform: translate(-50%)
        }
        #header div[class*=top-bar]>ul>li:active>ul,#header div[class*=top-bar]>ul>li:hover>ul,#header div[class*=top-bar]>ul>li>ul:active,#header div[class*=top-bar]>ul>li>ul:hover {
            transform: translate(-50%)
        }
        #header div[class*=top-bar]>ul>li:focus-within>ul,#header div[class*=top-bar]>ul>li>ul:focus-within {
            transform: translate(-50%)
        }
        #header div[class*=top-bar]>ul:first-of-type>li:last-of-type>ul {
            right: 0;
            left: 50%
        }
        #header div[class*=top-bar]>ul>li ul>li {
            max-width: calc(80vw + .0625rem);
            height: var(--topbar-height-on-mobile);
            max-height: calc(10vh - 1.5rem);
            text-align: center
        }
        #header div[class*=top-bar]>ul>li ul>li:nth-last-of-type(2):nth-of-type(2n) {
            box-shadow: inset 0 0 0 .0625rem var(--box-shadow),0 .0625rem 0 0 var(--box-shadow)
        }
        #header div[class*=top-bar]>ul>li ul>li:last-of-type:nth-of-type(odd) {
            box-shadow: inset 0 0 0 .0625rem var(--box-shadow),.0625rem 0 0 0 var(--box-shadow)
        }
        #header div[class*=top-bar]>ul>li>ul li>a {
            --min-font-size: 1rem;
            --max-font-size: 1rem;
            font-size: var(--base-font-size);
            line-height: 1;
            white-space: inherit
        }
        #header div[class*=top-bar]>ul>li>ul>li ul {
            top: 100%;
            width: 90%
        }
        #header div[class*=top-bar]>ul>li>ul>li:nth-of-type(odd) ul {
            left: 10%
        }
        #header div[class*=top-bar]>ul>li>ul>li:nth-of-type(2n) ul {
            left: 0
        }
/* READING AREA */
@media (max-width: 767px) {
 #content-wrap {
    position: initial;
    grid-area: content-wrap;
    grid-template-areas: "content";
    grid-template-columns: 1fr 0fr;
    height: fit-content;
    min-height: 100vh;
    margin: var(--topbar-height-on-mobile) auto 0;
    width: 100vw;
}
body {
    background: var(--mobile-bg-image) 100% 100% repeat;
}
#main-content {
    max-width: 100vw;
    width: 95%;
    height: fit-content;
    margin: 1rem auto;
    padding: 0;
    background-color: rgb(var(--mo-content-bg));
    box-shadow: none;
 
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-template-areas:
        "action-area-top action-area-top action-area-top action-area-top action-area-top"
        "page-title page-title page-title page-title page-title"
        "breadcrumbs breadcrumbs breadcrumbs breadcrumbs breadcrumbs"
        "page-content page-content page-content page-content page-content"
        "page-info-break page-info-break page-info-break page-info-break page-info-break"
        ". pwatch pwatch pwatch pwatch"
        ". pinfo pinfo pinfo pinfo"
        " page-tags page-tags page-tags page-tags page-tags"
        "options-1 options-1 options-1 options-1 options-1"
        "options-2 options-2 options-2 options-2 options-2"
        "pbottom pbottom pbottom pbottom pbottom"
        "action-area-btm action-area-btm action-area-btm action-area-btm action-area-btm";
    grid-auto-rows: min-content;
    grid-area: content;
}
#page-content {
    width: 100%;
    background: transparent;
    font-size: 0.875rem;
    grid-area: page-content;
    padding: 0;
    margin: auto;
    max-width: 90vw;
    box-shadow: none;
}
div#extra-div-1, div#extra-div-2, div#extra-div-3, div#extra-div-4, div#extra-div-5 {
    display: none;
}
#page-options-container {
    display: contents;
}
div[id*=page-options-bottom] {
    --wght: 500;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100vw;
    font-weight: var(--wght);
    text-align: center;
    white-space: nowrap;
}
#footer, #license-area {
    font-size: 80%;
}
#page-title {
    font-family: var(--UI-font);
    display: flex;
    align-items: center;
    margin: .5em 0 1em;
    border: none;
    min-height: 1em;
    line-height: 1;
    color: rgb(var(--mo-ti-color),1);
    font-weight: 700;
    text-shadow: 0 0 0px rgb(var(--title-shadow)), 0 0 0px rgb(var(--title-shadow));
    letter-spacing: -0.05em;
    font-size: 1.5em;
    text-align: center;
}
#page-title:after, .meta-title:after {
    content: "";
    flex-grow: 1;
    margin: auto 1rem;
    border: 1px solid rgb(var(--split-line));
}
@media (min-width: 480px) and (max-width: 580px) {
    td.name {
        width: 15em;
    }
    .content-panel.left-column, .content-panel.right-column {
        width: 99%;
        float: left;
    }
    #page-content div, #page-content div table {
        clear: both;
    }
  }
}