:root {
  /*
  Define KI colours
  */
  --plum: #870052;
  --cyclamen: #D40963;
  --grey: #808080;
  --white: #FFFFFF;
  --black: #222222;
  --main: var(--plum);
  --accent: var(--cyclamen);
  --text: var(--black);
  --text-inverse: var(--white);
  --highlight: var(--plum);
  /*
  Define font size, to mimick beamer.
  Base font size: 24px
  Calculate relative font sizes:
  round(24 * data.frame(
    tiny = 0.763650977,
    scriptsize = 0.916712714,
    footnotesize = 0.916712714,
    small = 0.916712714,
    normalsize = 1.10,
    large = 1.320088411,
    Large = 1.583664038,
    LARGE = 1.900838901,
    huge = 2.281006681,
    Huge = 2.281006681,
    references = 0.8401818))
  */
  --size-tiny: 18px;
  --size-scriptsize: 22px;
  --size-footnotesize: 22px;
  --size-small: 22px;
  --size-normalsize: 26px;
  --size-large: 32px;
  --size-Large: 38px;
  --size-LARGE: 46px;
  --size-huge: 55px;
  --size-Huge: 55px;
  /* New size for list of reference: halfway through tiny and small */
  --size-references: 20px;
}

.remark-slide-content, .remark-slide-content p, .remark-slide-content li p {
  color: var(--text);
  font-size: var(--size-normalsize);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--main);
  border: 0px;
  margin: 0px;
}

h1 {
  font-size: var(--size-LARGE);
}

h2 {
  font-size: var(--size-Large);
}

h3 {
  font-size: var(--size-large);
}

a, a>code, a:visited {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

ul {
  list-style: square;
}

.footnote {
  position: absolute;
  bottom: 0%;
  left: 15%;
  padding-right: 15%;
  font-size: var(--size-footnotesize);
}

.footnote p, .footnote a {
  font-size: var(--size-footnotesize);
}

.remark-code-line-highlighted {
  background-color: var(--accent);
}

.remark-code {
  border-radius: 10px;
  font-size: var(--size-scriptsize);
}

.inverse {
  background-image: none;
  background-color: var(--main);
  color: var(--text-inverse);
}

.inverse h1, .inverse h2, .inverse h3, .inverse h4, .inverse h5, .inverse h6, .inverse p, .inverse a {
  color: var(--text-inverse);
}

.inverse a {
  text-decoration: underline;
}

.inverse a:hover {
  text-decoration: underline wavy;
}

.pull-left {
  float: left;
  width: 45%;
}

.pull-right {
  float: right;
  width: 45%;
}

.pull-right+* {
  clear: both;
}

img, video, iframe {
  max-width: 100%;
}

blockquote {
  border-left: solid 5px var(--accent);
  padding-left: 1em;
}

.remark-slide-content blockquote p {
  font-size: 1.1em;
}

.remark-slide table {
  margin: auto;
  border-top: 1px solid var(--grey);
  border-bottom: 1px solid var(--grey);
}

.remark-slide table thead th {
  border-bottom: 1px solid var(--grey);
}

th, td {
  padding: 5px;
}

.remark-slide thead, .remark-slide tfoot, .remark-slide tr:nth-child(even) {
  background: var(--white);
}

@page {
  margin: 0;
}

@media print {
  .remark-slide-scaler {
    width: 100% !important;
    height: 100% !important;
    transform: scale(1) !important;
    top: 0 !important;
    left: 0 !important;
  }
}

.remark-slide-number {
  font-size: var(--size-scriptsize);
  color: var(--text);
}

.title-slide .remark-slide-number, .inverse .remark-slide-number {
  display: none;
}

.mjx-chtml {
  font-size: var(--size-normalsize) !important;
}

.title-slide {
  background-image: url(https://user-images.githubusercontent.com/10330005/71024315-eee82b00-2104-11ea-928b-be412b1f3687.png);
  background-position: 97.5% 2.5%;
  background-size: 10cm;
}

.title-slide h1 {
  padding-top: 33%;
  text-align: left;
  padding-bottom: 3%;
  margin-bottom: 3%;
}

.title-slide h2, .title-slide h3, .title-slide h4, .title-slide h5, .title-slide h6 {
  text-align: left;
  padding-top: 0%;
  margin-top: 0%;
}

.title-slide a {
  color: var(--text-inverse);
}

.inverse {
  text-shadow: none;
}

.outline h2, .outline h3, .outline h4, .outline h5, .outline h6 {
  color: black;
  line-height: 200%;
}

.mjx-chtml {
  font-size: inherit;
}

.remark-code-line-highlighted {
  background-color: var(--highlight);
  border-radius: 10px;
}

/*
Extra classes for size and color
*/

.plum {
  color: var(--plum);
}

.cyclamen {
  color: var(--cyclamen);
}

.white {
  color: var(--white);
}

.black {
  color: var(--black);
}

.grey {
  color: var(--grey);
}

.main {
  color: var(--main);
}

.accent {
  color: var(--accent);
}

.text {
  color: var(--text);
}

.text-inverse {
  color: var(--text-inverse);
}

.tiny, .tiny p {
  font-size: var(--size-tiny);
}

.scriptsize, .scriptsize p {
  font-size: var(--size-scriptsize);
}

.footnotesize, .footnotesize p {
  font-size: var(--size-footnotesize);
}

.small, .small p {
  font-size: var(--size-small);
}

.normalsize, .normalsize p {
  font-size: var(--size-normalsize);
}

.large, .large p {
  font-size: var(--size-large);
}

.Large, .Large p {
  font-size: var(--size-Large);
}

.LARGE, .LARGE p {
  font-size: var(--size-LARGE);
}

.huge, .huge p {
  font-size: var(--size-huge);
}

.Huge, .Huge p {
  font-size: var(--size-Huge);
}

.references, .references p {
  font-size: var(--size-references);
}