/* =====================================================
   Global Reset
   ===================================================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-color: #000;
}

    /* =====================================================
   The Deep Dark Background
   ===================================================== */

    body.TDD {
        background-image: url("../images/Library.png");
    }

/* =====================================================
   Header / Branding
   ===================================================== */

#i6fn {
    background-color: #000000;
    color: #b085f3;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 36px;
    padding: 10px;
    text-align: center;
}

#iwm5 {
    font-size: 64px;
}

/* =====================================================
   Navigation Bar
   ===================================================== */

#im23-2-2,
#im23-2-2-2-3 {
    background-color: #000000;
    color: #9b6dff;
    font-size: 24px;
    padding: 10px;
    text-align: center;
    text-shadow: 2px 2px 2px #120020;
}

/* =====================================================
   Content Panel (Glass Effect)
   ===================================================== */

body.TDD #content {
    display: flex;
    justify-content: center;
    padding: 3rem 1.5rem;
}

body.TDD .component-panel {
    width: 100%;
    max-width: 1200px;
    background: rgba(15, 12, 20, 0.80);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 25px 80px rgba(0,0,0,0.85);
}