:root {
    /* Accent-1: Muted electric violet */
    --accent-1-hex: #21736A;
    --accent-1-25-hex: #75DEC8;
    --accent-1-50-hex: #A3E9DA;
    --accent-1-75-hex: #D1F4EC;
    /* Accent-2: Deep emerald glow */
    --accent-2-hex: #d4e470;
    --accent-2-25-hex: #21736A;
    --accent-2-50-hex: #45958C;
    --accent-2-75-hex: #79BDB5;
    /* Accent-4: Shadowy teal */
    --accent-4-hex: #144E57;
    --accent-4-25-hex: #276A72;
    --accent-4-50-hex: #4A8890;
    --accent-4-75-hex: #7FB2B8;
    /* Background gradient: dark forest to misty night */
    --background-1-hex: #0A0F0D; /* Bottom - Deep forest green-black */
    --background-2-hex: #1B2A27; /* Middle - Dim teal */
    --background-3-hex: #2F3F3C; /* Top - Foggy green-gray */
    /* Navigation (soft moonlit green) */
    --navigation-1-hex: #A5D5C2;
    /* Warning (mystery danger) */
    --warning-1-hex: #FF3D3D; /* urgent red glow */
    --warning-2-hex: #D12B2B; /* deeper red */
    --warning-3-hex: #9E1F1F; /* almost-blood */
    /* Optional: general text or highlights for spooky glow */
    --text-glow: #E0D1FF;
}

html, body {
    color: #ffffff;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

body {
    background: linear-gradient(180deg, var(--background-1-hex),var(--background-2-hex), var(--background-3-hex));
    background-attachment: fixed;
    background-repeat: no-repeat;
    font-family: Roboto;
}

#grid {
    height: 100%;
}

.margin-gutter {
    margin-top: 30px;
}

.chapter {
    font-size: 28px;
    color: var(--accent-1-25-hex);
}

.uppercase {
    text-transform: uppercase;
}

/* full size div */
.full-size {
    /*height: calc(100vh - 13rem);*/
    height: 100%;
    width: 100%;
}

.align-center {
    text-align: center;
}

.align-end {
    text-align: end;
}

.logo {
    margin-top: 100px;
    max-width: 300px;
}

.name {
    margin-top: 0px;
    max-width: 300px;
}

path.logo-color {
    fill: var(--accent-1-hex);
    fill-rule: evenodd;
}

/* navigation footer */
.footer {
    position: center;
    background-color: var(--background-1-hex);
    color: var(--accent-1-50-hex);
}

.copyright {
    position: absolute;
    right: 40px;
}

.version {
    position: absolute;
    left: 200px;
    bottom: 10px;
    color: var(--accent-1-hex);
}

#profile,
#profile:hover,
#profile.visited {
    color: var(--accent-1-50-hex) !important;
    text-decoration: none;
}

/*navigation header*/
.header {
    background-color: var(--background-1-hex);
    color: var(--accent-1-50-hex);
    height: 60px !important;
}

.mud-icon-root.mud-svg-icon {
    fill: var(--accent-1-50-hex) !important;
}

.mud-alert-icon > .mud-icon-root.mud-svg-icon {
    fill:#ffffff !important;
}

.mud-table {
/*    background-color: #d0fff9;*/
}

.mud-progress-linear-bars {
    background-color: var(--accent-1-50-hex) !important;
}

#members > div.mud-table-container > table > thead > tr:nth-child(2) > th > div > div > div,
.mud-progress-linear.mud-progress-linear-color-info {
    background-color: var(--accent-1-hex) !important;
}

.mud-breadcrumb-item > a {
    color: var(--navigation-1-hex);
}

.mud-breadcrumb-item.mud-disabled > a {
    color: var(--accent-1-hex);
}

.mud-info {
    color: var(--accent-1-hex) !important;
}

.mud-progress-linear-bars {
    color: var(--accent-1-hex) !important;
}