@view-transition {
    navigation: auto;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--Sub-BG-color);
    container-type: inline-size;
    container-name: fullglass;
}

/* ---------------------------------------------------------------------------------------------------------------------------
Content window - General Page --> */

main {
    display: grid;
    grid-template-columns: 1fr;
    background-image: url(https://www.hachimanmiata.com/img/Site_Components/Mitsudomoe.png);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;

    & .BackgroundOverlay {
        background: var(--Content-Gradiant-OffWhite-Transparent00);
        grid-column: 1 / 2;
        min-height: calc(100vh - 60px);
    }
}

.TitleBar {
    grid-column: 1 / 2;
    text-align: center;

    & h1 {
        padding-top: .25rem;
        padding-inline: .5rem;
        font-size: 2.5rem;
        text-decoration: none;
        text-shadow: 1px 1px 2px var(--Content-Red);
    }
}

.PageNav {
    grid-column: 1 / 2;
    padding-inline: var(--Content-padding-Cell);
}

.hidden {
    display: none;
}

.border {
    grid-column: 1 / 2;
    padding-inline: var(--Content-padding-Cell);
}

section {
    margin: 1rem;
    padding: 1rem;
    border: var(--Content-Border-Gold);
    border-radius: var(--Content-Border-Rounding);
    background-color: var(--Content-White);
}

.secHead,
.secFoot {
    display: none;
}

@container fullglass (width > 767px) {

    main {
        grid-template-columns: 1fr 5fr 5fr 1fr;

        & .BackgroundOverlay {
            background: var(--Content-Gradiant-OffWhite-Transparent40);
            grid-column: 1 / 5;
        }
    }

    .TitleBar {
        grid-column: 2 / 4;
        border: var(--Content-Border-Gold);
        border-radius: var(--Content-Border-Rounding);
        box-shadow: 0 12px 12px;
        margin: 3rem 16% 0 16%;
        background-color: var(--Content-White);

        & h1 {
            padding-top: 0;
            margin-inline: 1rem;
        }
    }

    .PageNav {
        grid-column: 2 / 4;
        background: var(--Content-Gradiant-RedTrim);
        border-radius: var(--Content-Border-Rounding);
        box-shadow: 0 12px 12px;
        margin: 4rem 8%;
        padding: .5rem;
    }

    .border {
        grid-column: 1 / 5;
        border-radius: var(--Content-Border-Rounding);
        box-shadow: 0 12px 12px;
        position: relative;
        margin: 4rem 4%;
        padding: 1rem .5rem .5rem .5rem;
        background: var(--Content-Gradiant-RedTrim);
    }

    section {
        margin: 0;
        border-radius: var(--Content-Border-Rounding-Tight);
    }
}

@container fullglass (width > 2000px) {

    main {
        grid-template-columns: 2fr 2fr 2fr 2fr 2fr 2fr;

        & .BackgroundOverlay {
            background: var(--Content-Gradiant-OffWhite-Transparent80);
            grid-column: 1 / 7;
        }
    }

    .TitleBar {
        margin-inline: 25%;

        & h1 {
            padding: .5rem;
        }
    }

    .PageNav {
        margin-inline: 20%;
        padding: .7rem;
    }

    .border {
        margin-inline: 15%;
    }
}

/* <-- Content Window - General Page 
------------------------------------------------------------------------------------------------------------------------------- */