@charset "utf-8";

/* I'm a big kid. */

html, body { width: 100%; height: 100%; margin: 0em; padding: 0em; }
body       { background-position: center; background-repeat: no-repeat;
             font-family: Helvetica, "Helvetica Neue", Ariel, sans-serif; font-size: 24px;
             position: relative; text-align: center; }

/* Let's get small. */

@media screen and (max-width: 1024px) {
  body { font-size: 2.3vw; }
}
@media screen and (max-width: 598px) {
  body { font-size: 14px; }
}

/* muskulanius */

em { text-decoration: underline; font-style: normal; }
a  { text-decoration: none; }
li { text-align: left; }

table, td, th { border: 0em; border-collapse: collapse; border-spacing: 0em; box-sizing: content-box; margin: 0em; padding: 0em; }
td img { display: block; }

/* And I want a big cereal. */

video, source,
  img.svgslide,
embed.svgslide { width: 100%; height: 100%; }

/* full-bleed slides */

body      { background-size: cover; font-size: 5vmax; }
.title    { font-size: 1em; text-align: left;  top:    0em; }
.subtitle { font-size: 1em; text-align: right; bottom: 0em; }
.title,
.subtitle { color: hsla( 60,100%, 75%,1.00); margin: auto; padding: 0.5em; position: absolute; width: 90%;
            text-shadow:  0.025em  0.025em 0.125em rgba(0,0,0,0.5),
                          0.025em -0.025em 0.125em rgba(0,0,0,0.5),
                         -0.025em  0.025em 0.125em rgba(0,0,0,0.5),
                         -0.025em -0.025em 0.125em rgba(0,0,0,0.5); }
.title a:link,    .subtitle a:link    { color: hsla( 60,100%, 66%,1.00); text-decoration: none; }
.title a:visited, .subtitle a:visited { color: hsla( 60,100%, 66%,1.00); text-decoration: none; }
.title a:hover,   .subtitle a:hover   { color: rgb(153,  0,  0); text-decoration: none; }
.title a:active,  .subtitle a:active  { color: rgb(255,  0,  0); text-decoration: none; }

/* curve fitting slides */

.curve { margin: auto; position: absolute; top: 50%; transform: translateY(-50%); }

@media (orientation: landscape) {
.curve { font-size: 2.4vw; padding: 2vw; width: 96vw; height: 46vw; max-height: 92%; }
.curve div { float: left; }
.curve div img { max-width: 100%; max-height: 100%; }
.curve div:nth-child(1) { margin-right: 2vw; width: 46vw; }
.curve div:nth-child(2) { width: 46vw; }
}

@media (orientation: portrait) {
.curve { font-size: 2.4vh; margin: 0em auto; padding: 2vh; width: 56vh; height: 96vh; max-width: 92%; }
.curve div { margin: 0em auto; }
.curve div img { max-width: 100%; max-height: 100%; }
.curve div:nth-child(1) { margin-bottom: 2vh; height: 56vh; }
.curve div:nth-child(2) { height: auto; }
}

     .maths { font-family: Palatino, "Palatino Linotype", "Palatino Nova", "Book Antiqua", serif; }
    p.maths { text-align: center; }
table.maths { margin: auto; }
table.maths td { margin: 0em !important; padding: 0em !important; text-align: center !important; }
table.maths td.solidus { border-bottom-color: rgb(  0,  0,  0); border-bottom-style: solid; border-bottom-width: 0.1em; }

/* chaos, eworld, and get bent slides */

table.eyecandy a:link,
table.eyecandy a:visited,
table.eyecandy { color: rgb(127,127,127); }
table.eyecandy { background-color: rgb(  0,  0,  0); font-size:24px; width: 100%; height: 100%; }
table.eyecandy td { text-align: center; }
table.eyecandy img { border: none; width: 92vmin; }
table.eyecandy tr:nth-child(1),
table.eyecandy tr:nth-child(1) td { overflow: hidden; height: 0em; } /* Reserved for future use and for a sense of symmetry */
table.eyecandy tr:nth-child(2) td { background-position: center; background-repeat: no-repeat; background-size: contain; height: auto; } /* Well, I could cut the other thumb off for a sense of symmetry. */
table.eyecandy tr:nth-child(3) td { height: 2em; } /* Symmetry, eh? */

/* No condition is permanent. */