@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap");

body {
    font-family: "Noto Sans", sans-serif;
}

a {
    font-weight: normal;
    text-decoration: none;
}

h1,
h2,
h3 {
    font-weight: 300;
}
table {
    border-collapse: collapse;
}
td,
th {
    text-align: left;
    vertical-align: top;
    padding: 5px;
}
th {
    border-bottom: 1px solid #999;
}
td:first-of-type {
    border-left: 1px solid #999;
}
td p:first-of-type {
    margin: 0;
}

dt {
    font-weight: bold;
}

nav#nav-main {
    a {
        color: var(--text-color);
    }

    img svg {
        color: white;
    }
}


/* BEGIN section colors */
:root{
  --sat:66%; --lum:50%; --step:40deg;
  --talent: #22c55e;
  --feat: #22c55e;
  --skill: #3b82f6;
  --maneuver: #af2f0d;
  --power: #a855f7;
  --asi: #a855f7;
  --special: #f97316;
}
.sectionOuter{
  --h: calc((200deg + var(--section-index)*var(--step)));
  --theme: hsl(var(--h) var(--sat) var(--lum));
  --theme-dark: hsl(var(--h) 100% 25%);
  --theme-light: hsl(var(--h) 80% 80%);
}
.sectionOuter h1,
.sectionOuter h2,
.sectionOuter h3,
.sectionOuter h4,
.sectionOuter h5,
.sectionOuter a 
    { color: var(--theme); }
/* END section colors */


/* BEGIN sticky headers */
nav#nav-global {
    z-index: 100;
}
article#main-content {
    h1, h2, h3 {
        position: sticky;
        z-index: 90;
        background-color: var(--bg-color);
    }
    h1 {
        border-bottom: 3px solid var(--theme);
        height: 3rem;
        line-height: 3rem;
        top: var(--global-nav-height);

        &.stuck {
            /*border-bottom: none;*/
        }        
    }
    h2 {
        top: calc(var(--global-nav-height) + 3rem);
        height: 2rem;
        line-height: 2rem;

        &.stuck {
            max-height: 0;
            overflow: hidden;
            border-bottom: 3px solid var(--theme);
            border-bottom-color: transparent;
            background-color: transparent;

        }        
    }
    h3 {
        top: calc(var(--global-nav-height) + 5rem);

        &.stuck {
            max-height: 0;
            overflow: hidden;
            border-bottom: 3px solid var(--theme);
            border-bottom-color: transparent;
            background-color: transparent;
        }        
    }
    a[href="#"] {
        filter: brightness(0.5);
        cursor: not-allowed;
        text-decoration: line-through;
    }
}