/* index  */
@media (max-width: 768px) {
    body {
        font-size: var(--font-size-sm);
    }

    h1 {
        font-size: var(--font-size-xl);
    }

    h2 {
        font-size: var(--font-size-lg);
    }

    table th,
    table td,
    pre {
        font-size: var(--font-size-xs);
    }

    .project-overview table th,
    .project-overview table td,
    .project-overview pre {
        font-size: var(--font-size-xs);
    }

    .inlinetext {
        font-size: var(--font-size-base);
    }

    main {
        max-width: 1000px;
        margin: var(--spacing-lg) auto;
        padding: 0 var(--spacing-md);
    }
}

/* header */
@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
    }

    .hmenu-hcon {
        display: none;
    }

    .mbnav-menu {
        --mbnav-font-size: 0.875rem;
        --mbnav-line: 1.35;
        --mbnav-item-gap: 0.25rem;
        --mbnav-section-gap: 0.3rem;
        --mbnav-pad-x: 1rem;
        --mbnav-pad-top: 3.5rem;
        --mbnav-pad-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
        --mbnav-border: 1px solid var(--color-secondary);
        --mbnav-radius: 6px;
        padding: var(--mbnav-pad-top) var(--mbnav-pad-x) var(--mbnav-pad-bottom);
    }

    .mbnav-inner {
        width: 100%;
        max-width: 24rem;
        margin: 0 auto;
    }

    .mb-acc-toggle {
        margin-bottom: var(--mbnav-section-gap);
        font-size: calc(var(--mbnav-font-size) + 0.05rem);
        line-height: var(--mbnav-line);
        border: var(--mbnav-border);
        border-radius: var(--mbnav-radius);
    }

    .mbnav-list li {
        margin: var(--mbnav-item-gap) 0;
    }

    .mbnav-list a {
        font-size: var(--mbnav-font-size);
        line-height: var(--mbnav-line);
    }


    .hdropdown-hmenu {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-top: calc(10rem + var(--spacing-md));
        max-height: 100vh;
    }

    .hmenu-content {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }

    .hmenu-hcol {
        min-width: 100%;
    }

    #top-home {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }


    #ccr-header {
        height: 35vh;
    }

    #ccr-con {
        height: auto;
    }

    .banner {
        width: 100%;
        height: auto;
        margin-bottom: var(--spacing-sm);
    }

    .caption-container,
    .caption-container_sec {
        width: 98%;
        font-size: var(--font-size-xxs);
    }

    .imge-box::after {
        width: 97%;
    }
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        right: auto;
        left: 24px;
        transform: none;
    }

    .uifab {
        --fab-size: 3.85rem;
        right: 6%;
        bottom: 0.42em;
    }

    .uifab .uifab-icon {
        font-size: 2.6rem;
    }
}

/* footer  */
@media (max-width: 420px) {
    .pfoot-logo {
        width: 70px;
        height: 70px;
    }

    .pfoot-social {
        gap: 0.5rem;
    }
}

#footgap {
    min-height: 40px;
}

/* codebox */
@media (max-width: 768px) {
    .codebox pre {
        margin: 0;
        padding: var(--spacing-xs) var(--spacing-sm);
        white-space: pre;
        overflow: visible;
        width: max-content;
        min-width: 100%;
        line-height: 0.2;
    }

    .codebox code span {
        display: block;
        counter-increment: line;
        padding-left: 2.5em;
        position: relative;
        line-height: 1.3;
        font-size: var(--font-size-xxs);
    }

    .codebox code span::before {
        font-size: var(--font-size-xxs);
    }
}

/* cosmicswipe */
@media (max-width: 768px) {
    .cswipe-title {
        font-size: var(--font-size-xs);
    }

    .cswipe-btn {
        font-size: var(--font-size-xxs);
        padding: 2px 6px;
    }

    .cswipe-handle::before {
        width: 26px;
        height: 26px;
    }

    .cswipe-handle::after {
        font-size: 16px;
    }
}

/* elx */
@media (max-width:768px) {

    .elx-duo,
    .elx-duo.is-reverse,
    .elx-duo.is-right {
        grid-template-columns: 1fr;
        grid-template-areas:
            "media"
            "body";
    }
}

@media (max-width:480px) {

    .elx-duo-imgA,
    .elx-duo-imgB {
        width: 74%;
    }

    .elx-duo-frame {
        width: 100%;
        aspect-ratio: -1;
    }
}

@media (max-width:768px) {

    .elx-side,
    .elx-side.is-reverse,
    .elx-side.is-right {
        grid-template-columns: 1fr;
        grid-template-areas:
            "media"
            "body";
    }
}

@media (max-width:900px) {

    .elx-balance,
    .elx-balance.is-right-strong,
    .elx-balance.is-reverse {
        grid-template-columns: 1fr;
        grid-template-areas:
            "left"
            "right";
    }
}

/* timeline */
@media (max-width: 640px) {
    .tline-wrap::before {
        left: calc(var(--tline-pad-x) + 8px);
    }

    .tline-item {
        grid-template-columns: 36px 1fr;
    }

    .tline-gimgs {
        grid-template-columns: 1fr;
    }
}