genetic-algos.css

:root {
  --caption-height: 4%;  /* only need 3% if 3x4 rather than 9x16 */
  --main-height: calc(100% - var(--caption-height));
}

.reveal,
.reveal a,
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5
{
  color: #ded;
  font-family: "Trebuchet MS", "Helvetica Neue", sans-serif;
  text-transform: none;  /* else it gets uppercased, yuck! */
  margin-bottom: 0.05em;
  margin-top: 0.05em;
}

.reveal .center {
  left:      50%;
  position:  absolute;
  transform: translateX(-50%);
}

.reveal span.cycle-ptr {
  color:    white;
  position: absolute;
  font-size: 3em;
}

.reveal span.cycle-ptr-assess {
  top:      42%;
  left:     50%;
}

.reveal span.cycle-ptr-done {
  top:      40%;
  left:     43%;
  rotate:   -80deg;
}

.reveal span.cycle-ptr-select {
  top:      51%;
  left:     40%;
  rotate:   -144deg;
}

.reveal span.cycle-ptr-breed {
  top:      60%;
  left:     45%;
  rotate:   144deg;
}

.reveal span.cycle-ptr-mutate {
  top:      55%;
  left:     51%;
  rotate:   80deg;
}

.reveal span.cycle-arrow-init {
  position: absolute;
  top:      17%;
}

.reveal span.cycle-arrow-assess {
  position: absolute;
  top:      43.7%;
  left:     38.3%;
  rotate:   -36deg;
}

.reveal span.cycle-arrow-done {
  position: absolute;
  top:      73%;
  left:     33.5%;
  rotate:   -18deg;
}

.reveal span.cycle-arrow-select {
  position: absolute;
  top:      89%;
}

.reveal span.cycle-arrow-breed {
  position: absolute;
  top:      73%;
  right:    33.5%;
  rotate:   18deg;
}

.reveal span.cycle-arrow-mutate {
  position: absolute;
  top:      43.7%;
  right:    38.3%;
  rotate:   36deg;
}

.reveal span.cycle-stage {
  background:    black;
  border:        2px solid white;
  border-radius: 0.25em;
  font-size:     0.8em;
  padding:       0.25em;
  position:      absolute;
}

.reveal span.cycle-stage-init {
  top: 2%;
}

.reveal span.cycle-stage-assess {
  top:      30%;
}

.reveal span.cycle-stage-done {
  left:     27%;
  top:      56%;
}

.reveal span.cycle-stage-select {
  left:     33%;
  top:      87%;
}

.reveal span.cycle-stage-breed {
  right:    33%;
  top:      87%;
}

.reveal span.cycle-stage-mutate {
  right:    26%;
  top:      56%;
}


.reveal span.slide-caption {
  bottom: 0;
  font-size: 0.2em;
  left: 0;
  position: absolute;
  width: 100%;
  /* display: none; */
}

.reveal table thead {
  border-bottom: 2px solid white;
}

.reveal table th, .reveal table td {
  border: 0;
  padding: 0 .25em;
}

.reveal table th.numeric, .reveal table td.numeric {
  text-align: right;
}

.reveal div.cycling-steps span.cycle-stage {
  border: 2px solid gray;
  color: gray;
}

.reveal span.current-step {
  border: 2px solid white !important;
  color: white !important;
}

section.present::before {
  content: "@davearonson";
  font-size: 0.25em;
  position: absolute;
  left: 0;
  bottom: 0;
}

section.present::after {
  content: "www.Codosaur.us";
  font-size: 0.25em;
  position: absolute;
  right: 0;
  bottom: 0;
}

.reveal section {
  background: #112;
}

.reveal section.present {
  /* border: 1px solid red; */ /* for debugging */
  height: 100%;
}

.reveal pre {
  margin: 0;
}

.reveal .autofix {
  margin: 0;
  max-height: var(--main-height);
  max-width: 100%;
  position: absolute;
  top: calc(var(--main-height) / 2);
  left: 50%;
  transform: translate(-50%,-50%);  /* of the image size! */
}

.reveal img {
  border-radius: 1em;
  margin: 0;
}

.reveal img.code {
  border-radius: 0;
}

.reveal img.expand-tall {
  height: var(--main-height);
  width: auto;
}

.reveal img.expand-wide {
  width: 100%;
  height: auto;
}

.reveal section.present div.main-text {
  max-height: var(--main-height);
  max-width: 100%;
  position: absolute;
  top: calc(var(--main-height) / 2);
  left: 50%;
  transform: translate(-50%,-50%);  /* of the div size! */
  font-size: 1.5em;
  width: 100%;
}

table.all-right td, table.all-right th {
  padding: 0 .4em;
  text-align: right;
}

table.centered td, table.centered th {
  text-align: center;
}

table.all-right td.text, table.all-right th.text {
  text-align: left;
}

td.changed {
  color: #0f0;
}