/* Responsive styles for mobile devices */

@media only screen and (max-width: 800px) {
    body {
        width: 100%;
        min-width: 320px;
        background-image: none !important; /* Disable background texture on small screens to load faster */
        background-color: #D9E3E3;
    }
    
    #art-main {
        width: 100%;
        overflow-x: hidden;
    }
    
    /* Container adjustment */
    .art-Sheet {
        width: 95% !important;
        max-width: 800px;
        min-width: 0 !important;
        margin: 10px auto !important;
        box-sizing: border-box;
        float: none !important;
    }
    
    /* Disable complex fixed graphic borders */
    .art-Sheet-tl, .art-Sheet-tr, .art-Sheet-bl, .art-Sheet-br,
    .art-Sheet-tc, .art-Sheet-bc, .art-Sheet-cl, .art-Sheet-cr {
        display: none !important;
    }
    
    .art-Sheet-cc {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background-color: #F9FBFB;
        border: 1px solid #A9C1C1;
        border-radius: 6px;
    }
    
    .art-Sheet-body {
        padding: 8px !important;
    }
    
    /* Header */
    div.art-Header {
        width: 100% !important;
        height: auto !important;
        min-height: 110px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #1C3F3B;
        border-radius: 4px;
        overflow: hidden;
    }
    
    div.art-Header-png, div.art-Header-jpeg {
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
        background-size: cover !important;
        background-position: center !important;
        opacity: 0.8;
    }
    
    .art-Logo {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        padding: 20px 10px !important;
        box-sizing: border-box;
        text-align: center !important;
        display: block !important;
    }
    
    h1.art-Logo-name, .art-Logo-text {
        text-align: center !important;
        display: block !important;
        width: 100% !important;
    }
    
    h1.art-Logo-name a, h1.art-Logo-name a:link {
        font-size: 26px !important;
        color: #FFFFFF !important;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    }
    
    .art-Logo-text {
        font-size: 14px !important;
        color: #BCE1DC !important;
        margin-top: 5px !important;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    }
    
    /* Navigation & Menu */
    .art-nav {
        height: auto !important;
        margin-top: 10px !important;
        background: #1C3F3B !important;
        border-radius: 4px;
        padding: 5px 0 !important;
    }
    
    .art-nav .l, .art-nav .r {
        display: none !important;
    }
    
    .art-menu {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .art-menu li {
        float: none !important;
        width: 100% !important;
        margin: 4px 0 !important;
    }
    
    .art-menu-separator {
        display: none !important;
    }
    
    .art-menu a {
        height: auto !important;
        line-height: 40px !important;
        display: block !important;
        text-align: center !important;
        background: #25544E !important;
        margin: 0 10px !important;
        border-radius: 4px;
        box-sizing: border-box;
    }
    
    .art-menu a .l, .art-menu a .r {
        display: none !important;
    }
    
    .art-menu a .t {
        line-height: 40px !important;
        color: #BCE1DC !important;
        font-size: 15px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        font-weight: bold !important;
    }
    
    .art-menu a:hover, .art-menu li:hover>a {
        background: #2D6B63 !important;
    }
    
    .art-menu a:hover .t, .art-menu li:hover>a .t {
        color: #FFFFFF !important;
    }
    
    .art-menu a.active {
        background: #479E93 !important;
    }
    
    .art-menu a.active .t {
        color: #FFFFFF !important;
    }
    
    /* Content Layout */
    .art-contentLayout {
        width: 100% !important;
        margin-top: 10px !important;
    }
    
    .art-contentLayout .art-content {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
    }
    
    .art-Post-body {
        padding: 10px 5px !important;
    }
    
    /* Content formatting */
    .art-article p, .art-article ul {
        font-size: 15px !important;
        line-height: 1.5em !important;
    }
    
    /* Footer */
    .art-Footer {
        width: 100% !important;
        height: auto !important;
        background: #1C3F3B !important;
        border-radius: 4px;
        margin-top: 15px !important;
        padding: 15px 10px !important;
        box-sizing: border-box;
    }
    
    .art-Footer .art-Footer-background {
        display: none !important;
    }
    
    .art-Footer .art-Footer-inner {
        padding: 0 !important;
        text-align: center !important;
    }
    
    .art-Footer-text {
        color: #BCE1DC !important;
        font-size: 12px !important;
    }
    
    .art-Footer-text a {
        color: #FFFFFF !important;
        text-decoration: underline !important;
    }
}