html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    background: #000;
    overflow: hidden;
}

body {
    background-image: url('/images/dac-background.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
}

.page {
    position: relative;
    width: 100%;
    height: 100vh;
}

/* =========================
   MENU
========================= */

.side-menu {
    position: absolute;

    /* halfway down page */
    top: 70%;

    /* 30% inward from left */
    left: 30%;

    transform: translate(-50%, -50%);

    width: 240px;
    z-index: 10;
}

.menu-title {
    display: block;
    margin-bottom: 18px;

    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;

    font-size: 38px;
    font-weight: bold;
    letter-spacing: 2px;

    white-space: nowrap;

    text-shadow:
        0 0 8px #000,
        0 0 12px #000;
}

.side-menu {
    position: absolute;

    top: 70%;
    left: 30%;

    transform: translate(-50%, -50%);

    width: 320px;

    z-index: 10;
}

.submenu a {
    display: block;

    width: 240px;

    margin: 12px 0;
    padding: 13px 30px;

    border-radius: 999px;

    color: #6d6d6d;
    text-decoration: none;
    text-transform: uppercase;

    font-size: 24px;
    letter-spacing: 1px;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.15s ease;

    text-shadow:
        0 0 6px #000,
        0 0 10px #000;
}

/* Hover + selected state */
.submenu a:hover,
.submenu a.active {
    color: #ffffff;

    background:
        radial-gradient(
            ellipse at center,
            #06131a 0%,
            #10232d 28%,
            #214556 55%,
            #3d6e87 78%,
            #5d97b5 100%
        );

    box-shadow:
        inset 0 0 14px rgba(255,255,255,0.14),
        0 0 16px rgba(61,110,135,0.85),
        0 0 30px rgba(61,110,135,0.50);

    transform: translateX(4px);
}

/* =========================
   CONTENT PANEL
========================= */

.content-panel {
    position: absolute;
    left: 70px;
    bottom: 70px;

    max-width: 650px;

    padding: 24px 28px;

    border-radius: 18px;

    background: rgba(0,0,0,0.45);

    border: 1px solid rgba(61,110,135,0.4);

    box-shadow:
        0 0 18px rgba(0,0,0,0.75),
        inset 0 0 12px rgba(255,255,255,0.04);

    backdrop-filter: blur(2px);
}

.content-panel h1 {
    margin: 0 0 14px 0;

    font-size: 34px;
    font-weight: bold;
    letter-spacing: 2px;

    text-shadow:
        0 0 8px #000,
        0 0 16px #000;
}

.content-panel p {
    margin: 0;

    color: #d0d0d0;

    line-height: 1.6;
    font-size: 16px;

    text-shadow:
        0 0 6px #000;
}

/* =========================
   FOOTER
========================= */

.site-footer {
    position: absolute;

    bottom: 18px;
    left: 0;

    width: 100%;

    color: #b0b0b0;

    font-size: 14px;
    line-height: 1.6;

    text-shadow:
        0 0 6px #000,
        0 0 10px #000;
}

.site-footer a {
    color: #7faec7;
    text-decoration: none;
}

.site-footer a:hover {
    color: #b7d7ea;
    text-shadow:
        0 0 8px rgba(61,110,135,0.9);
}

.footer-brand {
    color: #ffffff;
    letter-spacing: 1px;
}