/* don't change this unless you want the layout stuff to show up in the outline view! */

.layout div, #footer *, #controlForm * {display: none;}
#footer, #controls, #controlForm, #navLinks, #toggle {
  display: block; visibility: visible; margin: 0; padding: 0;}
#toggle {float: right; padding: 0.5em;}
html>body #toggle {position: fixed; top: 0; right: 0;}

/* making the outline look pretty-ish */

#slide0 h1, #slide0 h2, #slide0 h3, #slide0 h4 {border: none; margin: 0;}
#slide0 h1 {padding-top: 1.5em;}
.slide h1 {margin: 1.5em 0 0; padding-top: 0.25em;
  border-top: 1px solid #888; border-bottom: 1px solid #AAA;}
#toggle {border: 1px solid; border-width: 0 0 1px 1px; background: #FFF;}

#menu { transform: rotate(-0.4deg); }
p {
  animation: slide-in 25s linear infinite;
  transform-origin: center;}

@media (prefers-reduced-motion: reduce) {
p {
  /* lets reduce the motion */
  animation: slide-in 120s linear infinite;
  }
}

@keyframes slide-in {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(0.7deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-0.7deg);
  }
  100% {
    transform: rotate(0deg);
  }
}