@import url("../../fonts/noto-serif/noto-serif.css");
@import url("../../fonts/open-sans/open-sans.css");
@import url("../../fonts/hack/hack.css");

/* TODO: Maybe separate some of the recurrent, currently hard-coded colors out
 * into variables */

:root {
  --of-slides: "/";
  --text-color: rgb(80 90 100);
  --text-color-inverse: rgb(135 135 140);
  --border-color: rgb(215 215 215);
  --border-color-inverse: rgb(170 170 175);
  --border-thickness: 0.15em;
  --heading-color: rgb(70 70 70);
  --heading-color-inverse: rgb(165 165 170);
  --grid-line-color: rgba(0 0 0);
  --grid-line-opacity: .1;

  font-family: "Noto Serif";
  color: var(--text-color);
}

.article body {
  margin: 1em;
}

div.slide {
  font-size: 1.4em;
  line-height: 1.2;

  background-image: linear-gradient(to bottom, rgb(243 243 243)   0%,
                                               rgb(255 255 255)  15%,
                                               rgb(255 255 255)  85%,
                                               rgb(243 243 243) 100%);
}

div.slide.inverse {
  color: var(--text-color-inverse);
  background-image: linear-gradient(to bottom, rgb(62 67 72)   0%,
                                               rgb(70 75 80)  15%,
                                               rgb(70 75 80)  85%,
                                               rgb(62 67 72) 100%);
}

div:not(.title):not(.no-number).slide::after {
  content: counter(slide-number) var(--of-slides) var(--n-slides);
}

div.slide::after {
  font-family: "Hack";
  font-size: .75em;
  color: rgb(190 190 190);
  position: absolute;
  bottom: 2.25em;
  right: 3.75em;
  line-height: 1.9;
}

div.slide.inverse::after {
  color: rgb(100 105 110);
}

div.slide.section {
  text-align: center;
  align-items: center;
}

div.poster {
  line-height: 1.1;
}

div.poster p, {
  margin: .6em;
}

.article p {
  margin-top: .6em;
}

h1, h2, h3 {
  font-family: "Open Sans";
  line-height: 1.2;
  text-align: start;
}

h1, h2, h3 {
  color: var(--heading-color);
}

div.slide.inverse h1, div.slide.inverse h2, div.slide.inverse h3 {
  color: var(--heading-color-inverse);
}

div.slide h1 {
  width: 90%;
  /* TODO: For some reason, using `em`/`rem`/`%` for the font-size does not
   * scale the font as expected on resizing the window */
  font-size: 6.0vh;
  text-align: center;
}

div.slide h2, div.slide h3 {
  font-size: 210%;
}

div.slide h2 {
  width: 100%;
  text-align: center;
}

div.poster h2 {
  color: var(--heading-color-inverse);
  background-image: linear-gradient(to bottom, rgb(70 75 80)   0%,
                                               rgb(70 75 80)  80%,
                                               rgb(52 57 62) 100%);
  border-radius: .3em;
  padding: .3em .6em;
  margin-bottom: .4em;
}

div.poster h3 {
  /* color: var(--heading-color); */
  background-image: linear-gradient(to bottom, rgb(230 230 233)  15%,
                                               rgb(230 230 233)  80%,
                                               rgb(215 215 218) 100%);
  border-radius: .3em;
  padding: .3em .6em;
  margin-bottom: .4em;
}

div.slide a, div.poster a {
  color: inherit;
  text-decoration: inherit;
}

.row {
  gap: 1em;
}

.col {
  gap: 1em;
}

.italic {
  font-style: italic;
}

.bold {
  font-weight: bolder;
}

.light {
  font-weight: lighter;
}

.underlined {
  text-decoration: underline;
}

.mono {
  font-family: "Hack";
}

.large {
  font-size: 140%;
}

.larger {
  font-size: 200%;
}

.small {
  font-size: 70%;
}

.smaller {
  font-size: 50%;
}

.smallest {
  font-size: 33%;
}

.dim {
  opacity: .5;
}

.dimmer {
  opacity: .25;
}

ul, ol {
  text-align: left;
  padding: 0;
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-left: 1.5em;
}

/* ul, menu, dir { */
/*   list-style-type: disc; */
/* } */

ul, menu, dir, :is(dir, menu, ol, ul) :is(dir, menu, ul) {
  /* list-style-type: disc; */
  list-style-type: "•  ";
}

li::marker {
  color: rgb(190, 190, 190);
  /* font-family: "Hack"; */
}

div.inverse li::marker {
  /*color: rgb(190, 190, 190);*/ /*TODO*/
}

/* ul li::marker { */
/*   content: "\00b7"; /1* "·" *1/ */
/* } */

/* NOTE: This is the `hence` class applied to the whole list. Applying it to a
 * single list item is not straightforward as long as Safari does not fully
 * support the `marker` pseudo-class. */
ul.hence {
  list-style-type: "\2192  ";
}

ul.hence li {
  /* padding-left: 0.25em; */
}

ul.hence li::marker {
  font-family: "Hack";
}

/* li.hence::marker { */
/*   content: "\2192"; /1* "→" *1/ */
/* } */

ul.checkmark {
  list-style-type: "\2713  ";
}

ul.crossmark {
  list-style-type: "\2717  ";
}

ol.arabic {
  list-style-type: decimalsonly;
}

ol.loweralpha {
  list-style-type: lettersonly;
}

ol.upperalpha {
  list-style-type: capitalsonly;
}

@counter-style decimalsonly {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  prefix: "";
  suffix: "";
}

@counter-style lettersonly {
  system: alphabetic;
  symbols: "a" "b" "c" "d" "e" "f" "g" "h" "i" "j" "k" "l" "m" "n" "o" "p" "q" "r" "s" "t" "u" "v" "w" "x" "y" "z";
  prefix: "";
  suffix: "";
}

@counter-style capitalsonly {
  system: alphabetic;
  symbols: "A" "B" "C" "D" "E" "F" "G" "H" "I" "J" "K" "L" "M" "N" "O" "P" "Q" "R" "S" "T" "U" "V" "W" "X" "Y" "Z";
  prefix: "";
  suffix: "";
}

.padded {
  padding: .5em;
}

.framed {
  border: var(--border-thickness) solid var(--border-color);
  border-radius: 0.5em;
  /* overflow: hidden; */
}

.inverse .framed {
  border-color: var(--border-color-inverse);
}

img.profile-photo, object.img.profile-photo {
  border-radius: 20%;
}

.boxed {
  border: solid .075em var(--border-color);
  border-radius: 0.5em;
  /* overflow: hidden; */
  background-image: linear-gradient(to bottom, rgb(238 238 241)   0%,
                                               rgb(247 247 250)  25%,
                                               rgb(247 247 250) 100%);
}

table {
  background-color: transparent;
  border-collapse: collapse;
}

table th, table td {
  padding: .4em .5em;
}

table, table th, table td {
  border: solid .075em var(--border-color);
}

.inverse table, .inverse table th, .inverse table td {
  border-color: var(--border-color-inverse);
}

table th {
  font-weight: bold;
}

table tr:nth-of-type(odd) th {
  background-image: linear-gradient(to bottom, rgb(247 247 250)   0%,
                                               rgb(247 247 250)  15%,
                                               rgb(230 230 233)  80%,
                                               rgb(225 225 228) 100%);
}

table tr:nth-of-type(even) th {
  background-image: linear-gradient(to bottom, rgb(255 255 255)   0%,
                                               rgb(255 255 255)  15%,
                                               rgb(245 245 245)  80%,
                                               rgb(235 235 235) 100%);
}

table tr:nth-of-type(odd) td {
  background-image: linear-gradient(to bottom, rgb(242 242 242)   0%,
                                               rgb(255 255 255)  25%,
                                               rgb(255 255 255) 100%);
}

table tr:nth-of-type(even) td {
  background-image: linear-gradient(to bottom, rgb(238 238 241)   0%,
                                               rgb(247 247 250)  25%,
                                               rgb(247 247 250) 100%);
}

hr {
  width: 100%;
  height: .25em;
  border: none;
  border-radius: .125em;
  background: rgb(190, 190, 190);
}