/* Separate CSS for remarkjs.com slides */
@import url(//fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
@import url(//fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);

body {
  font-family: 'Droid Serif';
}

.remark-slide {
  background: #ffffff;
  background-image: repeating-linear-gradient(to left,     hsla(0, 0%, 100%,   0) 0%, hsla(0, 0%, 100%,   0)   6%, hsla(0, 0%, 100%,  .1) 7.5%),
                    repeating-linear-gradient(to top left, hsla(0, 0%,  75%,   0) 0%, hsla(0, 0%,  75%,   0)   4%, hsla(0, 0%,  75%, .03) 4.5%),
                    repeating-linear-gradient(to top left, hsla(0, 0%, 100%,   0) 0%, hsla(0, 0%, 100%,   0) 1.2%, hsla(0, 0%, 100%, .15) 2.2%),
                              linear-gradient(180deg,      hsla(0, 0%,  95%, .92) 0%, hsla(0, 0%,  98%, .98)   8%, hsla(0, 0%,  98%, .98)   92%, hsla(0, 0%, 95%, 0.92) 100%),
                    radial-gradient(circle at center, red, blue);
}

img {
  width: 100%;
}

p, ul {
  -webkit-margin-before: 0.5em;
  -webkit-margin-after: 0.5em;
}

li p {
  line-height: 1.25em;
}

a, a > code {
  color: rgb(249, 38, 114);
  text-decoration: none;
}

.remark-code, .remark-inline-code {
  font-family: 'Ubuntu Mono';
}

.remark-inline-code {
  background-color: #ddcdd2;
  border-radius: 5px;
}

h1, h2, h3 {
  font-weight: 400;
  -webkit-margin-before: 0px;
}

.remark-slide-content h1 {
  font-size: 60px;
  margin-bottom: 20px;
}

.remark-slide-content h2 {
  font-size: 54px;
  margin-bottom: 20px;
}

.remark-slide-content h3 {
  font-size: 36px;
  margin-bottom: 0px;
  font-weight: 600;
}

.remark-slide-content {
  padding-left: 64px;
  padding-right: 64px;
  font-size: 32px;
  background-color: transparent;
}

.remark-code {
  font-size: 30px;
}

.hide-remark-source {
  visibility: hidden;
}

.footnote {
  bottom: 12px;
  font-size: 24px;
  left: 20px;
  position: absolute;
}

.large {
  font-size: 2em;
}

/* Special CSS for template inverse */
.inverse {
  background: linear-gradient(to bottom, rgba(46, 38, 28, 0.95) 0%, rgba(59, 48, 35, 0.95) 50%, rgba(59, 48, 35, 0.95) 54%, rgba(39, 40, 34, 0.95) 71%, rgba(39, 40, 34, 0.95) 100%),
              radial-gradient(farthest-side ellipse at top left, red, blue);
  color: #d9e0b1;
  text-shadow: 0 0 20px #333;
}
.inverse h1, .inverse h2 {
  color: #f3f3f3;
  line-height: 0.8em;
}

/* Animation */
/*
 * Disabled because it's annoying. What I want is really landslide animation!
 * Example: https://maruel.ca/landslide/maruel_git.html
 *
.remark-fading {
  z-index: 9;
}
.remark-slide-container {
  transition: opacity 0.3s linear, right 0.3s ease-in-out;
  opacity: 0;
  right: 1000px;
}
.remark-visible {
  transition: opacity 0.3s linear, right 0.3s ease-in-out;
  opacity: 1;
  right: 0px;
}
.remark-visible ~ .remark-slide-container {
  right: -1000px;
}
*/