html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background: url("../images/background.png") center center / cover no-repeat fixed;
    font-family: Georgia, "Times New Roman", serif;
    color: #fff4cf;
}

/* Main table layout */
.page-shell {
    width: 980px;
    min-height: 100vh;
    margin: 0 auto;
    border-collapse: collapse;
    position: relative;
    overflow: hidden;
}

/* One global page-wide fade */
.page-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;

    background: linear-gradient(
        90deg,
        rgba(0,0,0,0) 0%,
        rgba(40,90,180,0.035) 25%,
        rgba(80,70,80,0.07) 50%,
        rgba(160,50,40,0.035) 75%,
        rgba(0,0,0,0) 100%
    );
}

.page-shell > tbody > tr > td {
    position: relative;
    z-index: 2;
}

/* Rows */
.top-fade-row td {
    height: 220px;
    padding: 20px 30px;
    text-align: center;
    position: relative;
    background: transparent;
}

.bottom-fade-row td {
    height: 95px;
    background: transparent;
}

.main-content-row {
    min-height: calc(100vh - 320px);
}

/* Left and right halves */
.content-panel {
    width: 50%;
    vertical-align: top;
    padding: 24px;
    position: relative;
}

.content-panel-blue,
.content-panel-red {
    background: transparent;
}

/* Shared text styling */
h1,
h2,
h3 {
    margin-top: 0;
    text-shadow: 2px 2px 5px #000;
    letter-spacing: 1px;
}

p {
    line-height: 1.55;
    text-shadow: 1px 1px 3px #000;
}

/* Mostly transparent pennants */
.blue-pennant {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(180, 220, 255, 0.35);
}

.red-pennant {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 190, 160, 0.32);
}

/* Large horizontal banner */
.site-header {
    width: 700px;
    margin: 0 auto 20px auto;
    padding: 18px 30px;
}

.pennant-large {
    clip-path: polygon(
        4% 0,
        96% 0,
        100% 50%,
        96% 100%,
        4% 100%,
        0 50%
    );
}

/* Navigation pennants */
.main-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 26px;
}

.top-nav {
    justify-content: center;
}

.main-nav a {
    display: inline-block;
    padding: 12px 22px;
    min-width: 90px;
    text-align: center;
    color: #fff4cf;
    text-decoration: none;
    font-weight: bold;
    text-shadow: 1px 1px 4px #000;

    clip-path: polygon(
        8% 0,
        100% 0,
        92% 50%,
        100% 100%,
        8% 100%,
        0 50%
    );

    transition: background-color 0.2s ease, transform 0.2s ease;
}

.main-nav a:hover {
    background: rgba(255, 220, 120, 0.18);
    transform: translateY(-2px);
}

/* Content pennants */
.content-box,
.feature-box {
    margin-bottom: 24px;
    padding: 24px 28px 34px;
    background: transparent;
    box-shadow: none;
}

.pennant-panel {
    clip-path: polygon(
        3% 0,
        97% 0,
        100% 50%,
        97% 100%,
        3% 100%,
        0 50%
    );
}

.pennant-small {
    clip-path: polygon(
        5% 0,
        100% 0,
        90% 50%,
        100% 100%,
        5% 100%,
        0 50%
    );
}

/* Responsive adjustment */
@media (max-width: 1000px) {
    .page-shell {
        width: 94%;
    }

    .content-panel {
        padding: 16px;
    }

    .site-header {
        width: auto;
    }

    .main-nav a {
        min-width: auto;
        padding-left: 14px;
        padding-right: 14px;
    }
}