* {
    /* Paletton Colors: http://paletton.com/#uid=53k0e1kpSvh56S9hMBCwIoMKOgjkKO6ZtF3sAS4HyojyHdTPkgdsscrnzdOp+jnt8lHuI */
    /* Primary Color */
    --primary-color-l2: 192, 224, 227;
    --primary-color-l1: 79, 168, 176;
    --primary-color: 31, 141, 152;
    --primary-color-d1: 1, 110, 120;
    --primary-color-d2: 1, 72, 79;

    /* Secondary Color #1 */
    --secondary-color-l2: 10, 133, 235;
    --secondary-color-l1: 6, 58, 100;
    --secondary-color: 1, 20, 36;
    --secondary-color-d1: 1, 14, 24;
    --secondary-color-d2: 2, 11, 18;

    /* Tertiary Color #2 */
    --tertiary-color-l2: 53, 164, 125;
    --tertiary-color-l1: 61, 156, 122;
    --tertiary-color: 75, 152, 125;
    --tertiary-color-d1: 79, 139, 118;
    --tertiary-color-d2: 77, 126, 109;
    /* End Paletton Colors */

    --background: var(--secondary-color-d2);
    --background-l1: var(--secondary-color);
    --odd-row: var(--secondary-color-l2);
    --even-row: var(--secondary-color-l2);
    --hover-background: var(--secondary-color-l1);

    --border: var(--primary-color-d2);
    --border-highlight: var(--primary-color-d1);

    --text-main: 204, 204, 204;
    --text-highlight: 229, 229, 229;
    --text-header: var(--primary-color-l2);
    --text-section-header: var(--primary-color-l1);
    --text-h2: var(--primary-color-l1);
}

/* Gray %
    0%    0
    10%	25
    20%	51
    30%	76
    40%	102
    50%	127
    60%	153
    70%	178
    80%	204
    90%	229
    100%	255
*/

body {
    background: rgb( var(--background) );
    padding: 0;
    color: rgb( var(--text-main) );
    font-family: 'Times New Roman', serif;
}

#container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    height: 100%;
    background-image: linear-gradient( to right, rgb( var(--background) ), rgb( var(--background-l1) ), rgb( var(--background-l1) ), rgb( var(--background-l1) ), rgb( var(--background) ) );
}

#footer, #header {
    width: 100%;
    margin: 0 auto;
    padding: 1rem 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#header {
    border-bottom: 0.25rem solid rgb( var(--border) );
    background-image: linear-gradient( rgb( var(--background) ), rgb( var(--background-l1) ) );
    justify-content: space-around;
}

#header h1 {
    color: rgb( var(--text-header) );
    width: 42%;
    font-family: 'Times New Roman', serif;
    font-variant: small-caps;
    font-weight: bold;
    font-size: xx-large;
    letter-spacing: 0.5em;
}

#header h1:first-child {
    text-align: right;
}

#header h1:last-child  {
    text-align: left;
}

#header img {
    max-height: 5rem;
    width: auto;
}

#twitchStream {
    display: none;
}

#menu {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin: 0;
    padding: 1rem 0 0;
}

#menu h1 {
    margin: 0;
    padding: 0.5rem 2rem 0.25rem;
    color: rgb( var(--text-section-header) );
    font-family: 'Times New Roman', serif;
    font-variant: small-caps;
    letter-spacing: 0.25em;
    font-size: x-large;
    cursor: pointer;
    border: none;
    border-bottom: solid 0.125rem rgb( var( --border-highlight ) );
}

#menu h1.active {
    border: solid 0.125rem rgb( var( --border-highlight ) );
    border-bottom: none;
}

section {
    display: block;
    width: 100%;
    margin: 0.5rem 0;
    padding: 0;
    border: 0;
}

section[data-section] {
    display: none;
}

section[data-section].active {
    display: block;
}

section h2 {
    color: rgb( var(--text-h2) );
    font-family: 'Times New Roman', serif;
    margin: 0.5rem 1.5rem;
    font-style: italic;
    letter-spacing: 0.25em;
    border-bottom: solid 0.125rem rgb( var( --border ) );
}

section p {
    margin: 0.5rem 2.5rem;
    line-height: 1.5em;
    font-size: 1.1em;
}

section h1[data-collapse] {
    cursor: pointer;
}

section h1[data-collapse]:hover {
    background: rgb( var( --hover-background ) );
}

section h1[data-collapse="collapse"] + table {
    display: none;
}

section h1[data-collapse="expand"] + table {
    display: block;
}

section h1[data-collapse="collapse"]::before {
    content: "+";
}

section h1[data-collapse="expand"]::before {
    content: "\2013";
}

section table {
    width: 100%;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 0 0.25rem;
    background-color: rgb( var( --background ) );
}

section tr:nth-child(odd) {
    background: rgba( var( --odd-row ), 0.1 );
}

section tr:nth-child(even) {
    background: rgba( var( --even-row ), 0.2 );
}

section th {
    padding: 0.5rem 0;
    text-align: right;
    font-variant: small-caps;
    letter-spacing: 0.15rem;
    font-weight: normal;
    font-size: larger;
    font-family: 'Courier New', monospace;
    vertical-align: text-top;
    color: rgb( var( --text-highlight ) );
}

section td {
    padding: 0.5rem;
    width: 40%;
    text-align: left;
    font-size: medium;
    font-family: 'Courier New', monospace;
    vertical-align: text-top;
}

td ul {
    list-style: none;
    line-height:150%;
}

section[data-key] {
    display: flex;
    flex-direction: column;

    width: 90%;
    margin: 0.5rem auto;
    padding: 0;
    border: 0;
}

section[data-key] span:hover {
    background: rgb( var( --hover-background ) );
    cursor: pointer;
}

section[data-key] span {
    display: block;
    font-variant: small-caps;
    letter-spacing: 0.25rem;
    font-size: large;
}

section[data-key] p {
    display: none;
}

section[data-key] iframe {
    display: none;
    width: 854px;
    height: 480px;
    border: 0;
}

#footer {
    border-top: 0.25rem solid rgb( var(--border) );
    background-image: linear-gradient( rgb( var(--background-l1) ), rgb( var(--background) ) );
    justify-content: center;
}

#footer h3 {
    font-variant: small-caps;
    letter-spacing: 0.25em;
    margin: 0 0.5rem;
}