/*

partial examples:
- ntd2026-tdd-workshop.css
- brewtcon25.css
- testbash25.css (Kiesraad themed)

TODO:
- varibles for stuff I want to be dynamic
- switch to scss?
- title slide needs custom classes for other font sizes
- urbanist for titles, iosevka for content? would that work?
*/


:root {
  --text-basic: #050601; /* black */
  --light: #9ac31c; /* green */
  --light-complement: #050601; /* black */
  --dark: #254b9b; /* blue */
  --dark-complement: #ffffff; /* white */
}

@font-face {
  font-family: 'iosevka';
  src: url('fonts/Iosevka/Iosevka-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'urbanist';
  src: url('fonts/urbanist/Urbanist-Regular.woff2') format('woff');
  font-style: normal;
}

.reveal {
	/*font-family: "urbanist", sans-serif;*/
  font-family: "iosevka", sans-serif;
	font-weight: normal;
	font-size: 42px;
  color: --var(text-basic);
}

.slides .footer-left{
  position: absolute;
  left: 0%;
  bottom: 0%;
  font-size: 1rem
}

.slides .footer-right{
  position: absolute;
  right: 0%;
  bottom: 0%;
  font-size: 1rem
}

/*******************
 * HEADERS
 ******************/

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4 {
	font-family: "iosevka", sans-serif;
  /*font-family: "urbanist", sans-serif;*/
	font-weight: normal;
  line-height: 1.1;
	margin: 0 0 0.5em 0;
}

.reveal h1 {
  /*font-size: 2.5em;*/
  font-size: 7rem;
}

.reveal h2 {
  /*font-size: 1.6em;*/
  font-size: 5.2rem;
}

.reveal h3 {
  /*font-size: 1.3em;*/
  font-size: 3.5rem;
}

.reveal h3.small {
	/*font-size: 0.9em;*/
  font-size: 2.3rem;
}

.reveal h3.smaller {
	/*font-size: 0.5em;*/
  font-size: 1.3rem;
}

.reveal h4 {
  /*font-size: 1em;*/
  font-size: 2.6rem;
}

.reveal h4.small {
  /*font-size: 0.75em;*/
  font-size: 1.9rem;
}

.reveal h4.smaller {
  /*font-size: 0.5em;*/
  font-size: 1.3rem;
}


/*******************
 * TEXT
 ******************/

.reveal span.small {
  font-size: 0.70em;
}


/*********************************************
 * LINKS
 *********************************************/
.reveal a {
  color: #00008b;
  text-decoration: none;
  -webkit-transition: color .15s ease;
  -moz-transition: color .15s ease;
  transition: color .15s ease; }

.reveal a:hover {
  color: #0000f2;
  /*text-decoration: underline 10%;*/
  text-shadow: none;
  border: none; }


/*****************
 * Quotes
 ****************/

.reveal blockquote {
  display: block;
  position: relative;
  border-left: 0.2em solid var(--light);
  padding-right: 0.2em;
  font-style: italic;
}

.reveal blockquote p {
  /*font-size: 1em;*/
  font-size: 2.6rem;
}

.reveal blockquote p.source {
  font-style: normal;
  font-size: 2.2rem;
}

.reveal blockquote p:first-child {
  padding-top: 0.5em;
}

.reveal blockquote p:last-child {
  padding-bottom: 0.5em;
}

/*.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
  display: inline-block; }*/

.reveal q {
  font-style: italic; }


/*****************
 * FLEXBOX
 ****************/
.reveal .slides div.flex-c {
  display:flex;
  flex-wrap:nowrap;
  justify-content:space-around;
  align-items: center;
}

.reveal .slides div.flex-c div {
	flex: 45%;
}

/* https://css-tricks.com/complete-guide-css-grid-layout/ */
.reveal .slides div.grid-container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}


/********************
 * Slide templates
 *******************/

.reveal h2.section-title {
	font-weight: bold;
	color: var(--dark-complement);
	background: var(--dark);
  border-bottom: 0.08em solid var(--light);
  padding-left: 0.4em;
  padding-right: 0.4em;
	padding-top: 0.25em;
	padding-bottom: 0.25em;
	border-radius: 10px;
	margin-left:6rem;
	margin-right:6rem;
}

.reveal h2.section-title-alt {
  font-weight: bold;
  color: var(--light-complement);
  background: var(--light);
  padding-left: 0.4em;
  padding-right: 0.4em;
  padding-top: 0.25em;
  padding-bottom: 0.3em;
  border-radius: 10px;
  margin-left:6rem;
  margin-right:6rem;
}


.reveal h3.slide-title {
  margin-left:7rem;
  margin-right:7rem;
  padding-bottom: 0.8rem;
  border-bottom: 0.3rem solid var(--dark);
}

.reveal h3.statement {
  padding-bottom: 0.3rem;
  border-bottom: 0.5rem solid var(--light);
  margin-bottom: 0.7em;
}



/*********************************************
 * PROGRESS BAR
 *********************************************/
.reveal .progress {
  /*background: rgba(0, 0, 0, 0.2);*/
  background: var(--dark);
  color: var(--light);
  height: 4px;
}

.reveal .progress span {
  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
}