header {
}

body.notes {
/*    background: hsl(20,60%,70%); */
}

section a:link, section a:visited, section a:hover {
/*    color: #222; */
}

/* (maybe a `section:first-of-type>.background` rule to guarantee it loads looking right) */
section#math>.background {
    background-image: url(img/glendalough8.jpg);
}

/* (maybe a `section:first-of-type>.background` rule to guarantee it loads looking right) */
section#history>.background {
    background-image: url(img/glendalough8.jpg);
    background-image: url(img/whitetower.jpg);
}

section#science>.background {
/* now shows a canvas, but i'll keep this here until i'm sure i like it.. */
/*    background-image: url(img/whitetower.jpg); */
}

section#philosophy>.background {
    background-image: url(img/lighthouse.jpg);
    background-image: url(img/vigeland1.jpg);
}

section#music>.background {
    background-image: url(img/mozart.jpg);
    background-image: url(img/flaam2.jpg);
}

section#programming>.background {
    background-image: url(img/olympusmons.jpg);
    background-image: url(img/centralpark.jpg);
}

footer {
    background: hsla(0,0%,40%,0.7);
    color: hsl(0,0%,90%);
}

body .wrapper {
/*    background-color: hsla(0,0%,80%,0.5);*/
}

/*section#science .content { intro section? */
section#science .content:not(:first-of-type) {
    min-height: 100vh;
}

/* this is not sufficient because it's not 100% of width .. 
gonna have to be uniform or have to change the hierarchy.

section#science #physics {
    background-color: hsla(0,0%,50%);
}
*/

#science h2 {
    padding: 1rem 0;
}

#astronomy h2 {
    border-top: 1px solid rgb(5, 4, 60);
    border-bottom: 1px solid rgb(5, 4, 60);
    background-color: rgba(5, 4, 60, 0.05);
}

#physics h2 {
    border-top: 1px solid rgb(59, 101, 61);
    border-bottom: 1px solid rgb(59, 101, 61);
    background-color: rgba(59, 101, 61, 0.05);
}

#chemistry h2 {
    border-top: 1px solid rgb(141, 167, 27);
    border-bottom: 1px solid rgb(141, 167, 27);
    background-color: rgba(141, 167, 27, 0.05);
}

#biology h2 {
    border-top: 1px solid rgb(59, 89, 152);
    border-bottom: 1px solid rgb(59, 89, 152);
    background-color: rgba(59, 89, 152, 0.05);
}

#magic h2 {
/* something purple maybe? */
    border-top: 1px solid rgb(141, 167, 27);
    border-bottom: 1px solid rgb(141, 167, 27);
    background-color: rgba(141, 167, 27, 0.05);
}


/* -------------------- FORMULAS -------------------- */

section .formula {
    display: block;
    margin: 2px auto;
    padding: 1px 4px;
    background-color: rgba(255,255,255,0.333);
    -webkit-box-shadow: 0 0 3px white;
    -moz-box-shadow: 0 0 3px white;
    box-shadow: 0 0 3px white;
    letter-spacing: 1px;
}

section .inline.formula {
    display: inline-block;
}

section .formula .term {
    font-style: italic;
    padding: 0 1px;
}

section .formula .exponent {
/* this breaks radical overline! */
    font-size: small;
    font-weight: bold;
    position: relative;
    top: -0.5rem;
}

section .formula .subscript {
    font-size: small;
    font-weight: bold;
    font-style: italic;
    position: relative;
    top: +0.2rem;
}

section .formula .function {
    letter-spacing: 0;
    font-size: 90%;
    font-weight: lighter;
}

section .formula .note {
    margin-left: 1rem;
    font-style: italic;
    opacity: 0.8;
    font-size: 80%;
    white-space: nowrap;
    letter-spacing: 0;
}

section .formula .radical {
    /* TBD: define a "root" span if we need to show cube roots etc */
    text-decoration: overline;
    margin-right: 3px;
    /* darn, no HTML entities to add in pseudo-elements */
}

section .formula .accent {
    display: inline-block;
    width: 0px;
    position: relative;
    left: -0.5em;
    top: -0.4em;
/* fix: ack! how to stop it from redrawing bg ? if we allow width, we can overdraw w/ another color, but not cancel existing drawing.. but then this character consumes space.. */
    background: rgba(0,0,0,0);
/* this seems to help a little.. */
    z-index: -1;
    color: black;
}

/* -------------------- MATH SECTION -------------------- */

.script {
    font-family: cursive;
    font-style: italic;
    line-height: 1;
}

body #math .wrapper {
    background-color: hsla(0,0%,80%,0.92);
}

#math ul, #math ol {
    width: 80%;
}

#math li {
    margin-top: 0rem;
}

#math .tool input[type=number] {
    display: inline-block;
    width: 20%;
}

#math .tool {
    padding-bottom: 2px;
    border-bottom: 2px solid rgba(0,0,0,0.25);
}

#math .tool .table {
    display: inline-block;
    vertical-align: middle;
    font-size: small;
}

#math .tool .table .row {
    display: block;
    width: 100%;
    background: none;
/*
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
*/
}

#math #permuter.tool .table .row {
    text-align: center;
}

#math .tool .table .cell {
    display: inline-block;
}

#math .tool .table .result {
    min-width: 5em;
}

#math .tool .table .main.result {
    border: 1px solid gray;
}

#math svg#sohcahtoa {
    fill: none;
    stroke: rgba(0,0,0,0.5);
    stroke-width: 2;
}

#math svg#sohcahtoa rect {
    fill: rgba(0,0,0,0.1);
}

#math svg#sohcahtoa circle.unit {
    fill: rgba(255,255,255,0.1);
}

#math svg#sohcahtoa circle.dot {
    fill: orange;
}

#math svg#sohcahtoa .sin {
    stroke: yellow;
}

#math svg#sohcahtoa .cos {
    stroke: red;
}

#math svg#sohcahtoa line.cursor {
    stroke: white;
    opacity: 0.75;
    stroke-width: 1;
}

#math svg#sohcahtoa line.axis {
    stroke-width: 1;
}

body #history .wrapper {
    background-color: hsla(0,0%,80%,0.75);
}

/* ------------------------------ MUSIC SECTION ------------------------------ */
body #music svg#pitch-constellation {
    fill: none;
    fill: hsla(0,0%,100%,0.25);
    stroke: black;
    stroke-width: 1;
    stroke-linecap: round;
}

body #music svg#pitch-constellation .ticks :not(:first-child) {
    stroke-width: 0.5;
}

body #music svg#pitch-constellation .wheel {
    -webkit-transition: 1s transform ease;
    -moz-transition: 1s transform ease;
    -o-transition: 1s transform ease;
    transition: 1s transform ease;
}

body #music svg#pitch-constellation.mode2 .wheel {
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
}
body #music svg#pitch-constellation.mode3 .wheel {
    -webkit-transform: rotate(-120deg);
    -moz-transform: rotate(-120deg);
    -ms-transform: rotate(-120deg);
    -o-transform: rotate(-120deg);
    transform: rotate(-120deg);
}
body #music svg#pitch-constellation.mode4 .wheel {
    -webkit-transform: rotate(-150deg);
    -moz-transform: rotate(-150deg);
    -ms-transform: rotate(-150deg);
    -o-transform: rotate(-150deg);
    transform: rotate(-150deg);
}
body #music svg#pitch-constellation.mode5 .wheel {
    -webkit-transform: rotate(-210deg);
    -moz-transform: rotate(-210deg);
    -ms-transform: rotate(-210deg);
    -o-transform: rotate(-210deg);
    transform: rotate(-210deg);
}
body #music svg#pitch-constellation.mode6 .wheel {
    -webkit-transform: rotate(-270deg);
    -moz-transform: rotate(-270deg);
    -ms-transform: rotate(-270deg);
    -o-transform: rotate(-270deg);
    transform: rotate(-270deg);
}
body #music svg#pitch-constellation.mode7 .wheel {
    -webkit-transform: rotate(-330deg);
    -moz-transform: rotate(-330deg);
    -ms-transform: rotate(-330deg);
    -o-transform: rotate(-330deg);
    transform: rotate(-330deg);
}

body #music svg#pitch-constellation .wheel .dot {
    fill: black;
    stroke: none;
}

body #music svg#pitch-constellation .wheel line:first-of-type {
    stroke: red;
}

body #music svg#pitch-constellation .wheel line:nth-of-type(2) {
    stroke: orange;
}

body #music svg#pitch-constellation .wheel line:nth-of-type(3) {
    stroke: yellow;
}

body #music svg#pitch-constellation .wheel line:nth-of-type(4) {
    stroke: green;
}

body #music svg#pitch-constellation .wheel line:nth-of-type(5) {
    stroke: blue;
}

body #music svg#pitch-constellation .wheel line:nth-of-type(6) {
    stroke: indigo;
}

body #music svg#pitch-constellation .wheel line:last-of-type {
    stroke: violet;
}

body #music svg#mode-table .bg {
    fill: hsla(0,0%,50%,0.666);
}

body #music svg#mode-table .cells .red { fill: red; }
body #music svg#mode-table .cells .orange { fill: orange; }
body #music svg#mode-table .cells .yellow { fill: yellow; }
body #music svg#mode-table .cells .green { fill: green; }
body #music svg#mode-table .cells .blue { fill: blue; }
body #music svg#mode-table .cells .indigo { fill: indigo; }
body #music svg#mode-table .cells .violet { fill: violet; }

body #music svg#mode-table text {
    font-family: serif;
    font-size: x-small;
    font-size: 8px;
}

body #music svg#mode-table .tones text {
    -webkit-transition: opacity 1s ease;
    -moz-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease;
}

body #music svg#mode-table .cells .mode .row {
    fill: hsla(0,0%,0%,0.5);
    -webkit-transition: fill 1s ease;
    -moz-transition: fill 1s ease;
    -o-transition: fill 1s ease;
    transition: fill 1s ease;
}

body #music svg#mode-table.mode1 .cells .mode:first-child .row,
body #music svg#mode-table.mode2 .cells .mode:nth-child(2) .row,
body #music svg#mode-table.mode3 .cells .mode:nth-child(3) .row,
body #music svg#mode-table.mode4 .cells .mode:nth-child(4) .row,
body #music svg#mode-table.mode5 .cells .mode:nth-child(5) .row,
body #music svg#mode-table.mode6 .cells .mode:nth-child(6) .row,
body #music svg#mode-table.mode7 .cells .mode:nth-child(7) .row {
    fill: hsla(0,0%,100%,0.1);
}

body #music svg#mode-table .tones text {
    -webkit-transition: opacity 1s ease;
    -moz-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease;
}

body #music svg#mode-table .tones text:nth-child(2),
body #music svg#mode-table .tones text:nth-child(5),
body #music svg#mode-table .tones text:nth-child(7),
body #music svg#mode-table .tones text:nth-child(9),
body #music svg#mode-table .tones text:nth-child(12) {
    opacity: 0;
}

body #music svg#mode-table.mode3 .tones text:nth-child(2),
body #music svg#mode-table.mode7 .tones text:nth-child(2) {
    opacity: 1;
}

body #music svg#mode-table.mode3 .tones text:nth-child(3),
body #music svg#mode-table.mode7 .tones text:nth-child(3) {
    opacity: 0;
}

body #music svg#mode-table.mode1 .tones text:nth-child(4),
body #music svg#mode-table.mode4 .tones text:nth-child(4),
body #music svg#mode-table.mode5 .tones text:nth-child(4) {
    opacity: 0;
}

body #music svg#mode-table.mode1 .tones text:nth-child(5),
body #music svg#mode-table.mode4 .tones text:nth-child(5),
body #music svg#mode-table.mode5 .tones text:nth-child(5) {
    opacity: 1;
}

body #music svg#mode-table.mode4 .tones text:nth-child(6) {
    opacity: 0;
}

body #music svg#mode-table.mode4 .tones text:nth-child(7),
body #music svg#mode-table.mode7 .tones text:nth-child(7) {
    opacity: 1;
}

body #music svg#mode-table.mode7 .tones text:nth-child(8) {
    opacity: 0;
}

body #music svg#mode-table.mode3 .tones text:nth-child(9),
body #music svg#mode-table.mode6 .tones text:nth-child(9),
body #music svg#mode-table.mode7 .tones text:nth-child(9) {
    opacity: 1;
}

body #music svg#mode-table.mode3 .tones text:nth-child(10),
body #music svg#mode-table.mode6 .tones text:nth-child(10),
body #music svg#mode-table.mode7 .tones text:nth-child(10) {
    opacity: 0;
}

body #music svg#mode-table.mode1 .tones text:nth-child(11),
body #music svg#mode-table.mode4 .tones text:nth-child(11) {
    opacity: 0;
}

body #music svg#mode-table.mode1 .tones text:nth-child(12),
body #music svg#mode-table.mode4 .tones text:nth-child(12) {
    opacity: 1;
}

body #music #modes #controls {
    display: inline-block;
    vertical-align: top;
}

body #music #modes #controls>* {
    display: block;
    margin: 2px;
}

body #music #modes #controls2 {
    text-align: center;
}

/* ------------------------------ PROGRAMMING SECTION ------------------------------ */
body #programming .wrapper {
    background-color: hsla(0,0%,80%,0.8);
}

body #programming #html pre {
    font-size: xx-small;
    width: 50%;
    margin: 0 auto;
}

body #programming ul {
    width: 75%;
}

body #programming ul>li {
    display: inline-block;
    margin: 0 1rem;
    font-style: italic;
}

body #programming dl dt {
    font-style: italic;
}
/*
body #programming ul>li:not(:last-child)::after {
    content: ",";
}
*/

body #programming dl dt {
    line-height: 0.75;
}

body #programming dl dd {
    font-size: medium;
}