/* minimalistich pure css slides

scroll snap is the key
flex is da bomb with horizontal slides without hardcoded a total width!

*/

:root {
  --heading: #ce5127; /* uluru */
  --heading-light: #e98a70; /* uluru light */
  --paragraph: #27a2cc; /* sea blue */
  --paragraph-light: #86cfe4; /* sea blue light */
  --surface: #f9f4f2; /* sand */
  --text: #4b4b4b;
}

/* TODO main text mag wel een beetje off-center (iets hoger) */

/*

font: open sans

h1: 64pt bold
h2: 36pt bold
h3: 15pt bold

logo font: Phospate (for print to pdf!)


*/

* {
  box-sizing: border-box;
  text-decoration-color: white;
}

html,
body {
  background: #ce5127;
  color: white;
  /* TODO use 5vmax for better representation on small (as in not wide) screens? */
  font: 5vw/1.25 monospace;
  height: 100%;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  overflow: hidden;
  user-select: none;
}

h1,
h2,
h3 {
  font-weight: normal;
}

.slides {
  display: flex;
  scroll-snap-type: x mandatory;
  outline: none;
  overflow: auto hidden;
}

.slides > section {
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  flex: 0 0 100%;
  min-height: 100vh;
  min-width: 100%;
  padding: 5vw;
  scroll-snap-align: center;
  text-align: center;
  text-wrap: pretty;
}

dt {
  margin-bottom: 1vmin;
}

dd {
  margin-left: 0;
  margin-bottom: 2vmin;
}

a {
  color: white;
}

.paragraph {
  --background-color: #27a2cc;
  background: var(--background-color);
}

.about {
  background: white;
  color: #4b4b4b;
}

.black {
  background: #4b4b4b;
  color: white;
}

pre {
  font-size: smaller;
  text-align: left;
}

/* TODO use <tt> ? */

.shell {
  border: 0.5vw solid;
  border-radius: 0.75vw;
  font-size: 3vw;
  min-height: 35vw;
  padding: 1vw;
  width: 90vw;
}

.shell::before {
  background: white;
  color: #27a2cc;
  content: attr(title);
  display: block;
  font-size: 2vw;
  line-height: 1.5;
  margin: -1vw -1vw 0.5vw -1vw;
  text-align: center;
}

.small {
  font-size: 2vw;
}

.small-caps {
  font-variant: small-caps;
}

.big {
  font-size: 30vw;
}

kbd {
  background: white;
  border-radius: 0.5vw;
  color: #27a2cc;
  display: inline-block;
  font-size: 3vw;
  line-height: 1.25;
  margin: 0 0.25vw;
  padding: 0.25vw 1.25vw;
  vertical-align: middle;
}

.hidden,
details {
  display: none;
}

.annotated details {
  color: white;
  display: block;
  font-size: 2vmin;
  margin-top: 5vmin;
  text-align: left;
  width: 50%;
}

/* TODO quotes outside the quote */

blockquote {
  quotes: "“" "”";
}

blockquote::before {
  content: open-quote;
}

blockquote::after {
  content: close-quote;
}

code {
  quotes: "`" "`";
}

code::before {
  content: open-quote;
}

code::after {
  content: close-quote;
}

#about-joris img {
  height: auto;
  width: 66%;
}

ul,
ol,
p {
  text-align: left;
}

ul {
  list-style: square;
}

li {
  padding-left: 1vw;
}

.cursor {
  animation: blink 1s step-end infinite;
  background: white;
}

.center {
  text-align: center;
}

@keyframes blink {
  50% {
    background: transparent;
  }
}

.grid {
  background: url(svg-grid.svg);
}