@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');



body {
    font-family: Roboto, sans-serif;
    /*background: linear-gradient(to bottom, hsl(0,100%,25%), hsl(40,100%,25%), hsl(80,100%,25%), hsl(120,100%,25%), hsl(160,100%,25%), hsl(200,100%,25%), hsl(240,100%,25%), hsl(280,100%,25%), hsl(320,100%,25%), hsl(0,100%,25%));*/
    /*background-size: 100% 1000vh;*/
}

article#mainContent {
    background-color: transparent;
    padding: 0;
}

h1,
h2,
h3 {
    font-weight: 300;
}
.sectionOuter1 {
	margin: 0;
	padding: 0;
    background: white;
    margin-bottom: 24px;
}
h1 {
    margin-bottom: 0;
    padding-left: 20px;
}
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;
}
a {
    font-weight: normal;
}
a:hover,
a.inactive:hover {
    /*-webkit-filter: saturate(125%);*/
    opacity: 1;
}


dt { font-weight: bold; }

#content {  }
.sectionOuter {
}
.section { 
    padding: 20px;

}
#mainContent h1 {
    margin: 0;
    padding: 20px;
	border-width: 0 0 5px 0;
	border-style: solid;    

    position: sticky;
    top: 72px;
    background: white;
    /*color: white;*/
    z-index: 1;


    transition: background-color 0.4s, color 0.4s, border-color 0.4s;
}
#mainContent h1[sticky="true"] {
	color: white !important;
}

:root {
    --color1: hsl(200,100%,25%);
    --color2: hsl(280,100%,25%);
    --color3: hsl(0,100%,25%);
    --color4: hsl(40,100%,25%);
    --color5: hsl(60,100%,25%);
    --color6: hsl(120,100%,25%);
    --color7: hsl(160,100%,25%);
    --color8: hsl(240,100%,25%);
    --color9: hsl(320,100%,25%);
}

.sectionOuter:nth-of-type(1) { --theme-color: var(--color1); }
.sectionOuter:nth-of-type(2) { --theme-color: var(--color2); }
.sectionOuter:nth-of-type(3) { --theme-color: var(--color3); }
.sectionOuter:nth-of-type(4) { --theme-color: var(--color4); }
.sectionOuter:nth-of-type(5) { --theme-color: var(--color5); }
.sectionOuter:nth-of-type(6) { --theme-color: var(--color6); }
.sectionOuter:nth-of-type(7) { --theme-color: var(--color7); }
.sectionOuter:nth-of-type(8) { --theme-color: var(--color8); }
.sectionOuter:nth-of-type(9) { --theme-color: var(--color9); }
.sectionOuter:nth-of-type(10) { --theme-color: var(--color1); }
.sectionOuter:nth-of-type(11) { --theme-color: var(--color2); }
.sectionOuter:nth-of-type(12) { --theme-color: var(--color3); }
.sectionOuter:nth-of-type(13) { --theme-color: var(--color4); }
.sectionOuter:nth-of-type(14) { --theme-color: var(--color5); }
.sectionOuter:nth-of-type(15) { --theme-color: var(--color6); }
.sectionOuter:nth-of-type(16) { --theme-color: var(--color7); }
.sectionOuter:nth-of-type(17) { --theme-color: var(--color8); }
.sectionOuter:nth-of-type(18) { --theme-color: var(--color9); }

.sectionOuter:nth-of-type(1) { --light-color: hsl(200,60%,97%); }
.sectionOuter:nth-of-type(2) { --light-color: hsl(280,60%,97%); }
.sectionOuter:nth-of-type(3) { --light-color: hsl(0,60%,97%); }
.sectionOuter:nth-of-type(4) { --light-color: hsl(40,60%,97%); }
.sectionOuter:nth-of-type(5) { --light-color: hsl(60,60%,97%); }
.sectionOuter:nth-of-type(6) { --light-color: hsl(120,60%,97%); }
.sectionOuter:nth-of-type(7) { --light-color: hsl(160,60%,97%); }
.sectionOuter:nth-of-type(8) { --light-color: hsl(240,60%,97%); }
.sectionOuter:nth-of-type(9) { --light-color: hsl(320,60%,97%); }

.sectionOuter h1 { background-color: var(--theme-color); border-color: var(--theme-color); }
.sectionOuter h1, .sectionOuter h2, .sectionOuter h3, .sectionOuter a { color: var(--theme-color); }

a.inactive { opacity: 0.65; }

.sectionOuter tr:nth-child(even) { background-color: var(--light-color); }




body { background-color: hsl(200,100%,25%); transition: background-color 0.3s; }
body[current-section="0"] { background-color: var(--color1); }
body[current-section="1"] { background-color: var(--color2); }
body[current-section="2"] { background-color: var(--color3); }
body[current-section="3"] { background-color: var(--color4); }
body[current-section="4"] { background-color: var(--color5); }
body[current-section="5"] { background-color: var(--color6); }
body[current-section="6"] { background-color: var(--color7); }
body[current-section="7"] { background-color: var(--color8); }
body[current-section="8"] { background-color: var(--color9); }