/**
 * PBA slide theme
 * Derived from the night theme in reveal.js
 * More info https://github.com/webpro/reveal-md#theme & https://revealjs.com/themes/
**/

/*********************************************
	 * NAVIGATION CONTROLS
	 *********************************************/
.reveal .controls {
	color: var(--r-color-controls);
}

/*********************************************
     * PROGRESS BAR
     *********************************************/
.reveal .progress {
	background: rgba(0, 0, 0, 0.2);
	color: var(--r-color-controls);
	height: 0.15em;
}

/*********************************************
     * PRINT BACKGROUND
     *********************************************/
@media print {
	.backgrounds {
		background-color: var(--r-background-color);
	}
}

/*********************************************
   * FONTS
   *********************************************/
/* font: unbounded https://unbounded.polkadot.network/ */
@font-face {
	font-family: 'Unbounded';
	font-style: normal;
	font-weight: 300;
	src: url('./fonts/unbounded/Unbounded-Light.woff2');
	src: local(''),
		url('./fonts/unbounded/Unbounded-Light.woff2') format('woff2'),
		/* Super Modern Browsers */
		url('./fonts/unbounded/Unbounded-Light.ttf') format('truetype'),
		/* Safari, Android, iOS */
}

@font-face {
	font-family: 'Unbounded';
	font-style: normal;
	font-weight: 400;
	src: url('./fonts/unbounded/Unbounded-Regular.woff2');
	src: local(''),
		url('./fonts/unbounded/Unbounded-Regular.woff2') format('woff2'),
		/* Super Modern Browsers */
		url('./fonts/unbounded/Unbounded-Regular.ttf') format('truetype'),
		/* Safari, Android, iOS */
}

@font-face {
	font-family: 'Unbounded';
	font-style: normal;
	font-weight: 700;
	src: url('./fonts/unbounded/Unbounded-Bold.woff2');
	src: local(''),
		url('./fonts/unbounded/Unbounded-Bold.woff2') format('woff2'),
		/* Super Modern Browsers */
		url('./fonts/unbounded/Unbounded-Bold.ttf') format('truetype'),
		/* Safari, Android, iOS */
}

/* fonts: work-sans-regular - latin	https://google-webfonts-helper.herokuapp.com/fonts/work-sans/work-sans?subsets=latin */
@font-face {
	font-family: 'Work Sans';
	font-style: normal;
	font-weight: 400;
	src: local(''),
		url('./fonts/work-sans/work-sans-v17-latin-regular.eot?#iefix') format('embedded-opentype'),
		/* IE6-IE8 */
		url('./fonts/work-sans/work-sans-v17-latin-regular.woff2') format('woff2'),
		/* Super Modern Browsers */
		url('./fonts/work-sans/work-sans-v17-latin-regular.woff') format('woff'),
		/* Modern Browsers */
		url('./fonts/work-sans/work-sans-v17-latin-regular.ttf') format('truetype'),
		/* Safari, Android, iOS */
		url('./fonts/work-sans/work-sans-v17-latin-regular.svg#WorkSans') format('svg');
	/* Legacy iOS */
}

/* work-sans-800 - latin */
@font-face {
	font-family: 'Work Sans';
	font-style: normal;
	font-weight: 800;
	src: url('./fonts/work-sans/work-sans-v17-latin-800.eot');
	/* IE9 Compat Modes */
	src: local(''),
		url('./fonts/work-sans/work-sans-v17-latin-800.eot?#iefix') format('embedded-opentype'),
		/* IE6-IE8 */
		url('./fonts/work-sans/work-sans-v17-latin-800.woff2') format('woff2'),
		/* Super Modern Browsers */
		url('./fonts/work-sans/work-sans-v17-latin-800.woff') format('woff'),
		/* Modern Browsers */
		url('./fonts/work-sans/work-sans-v17-latin-800.ttf') format('truetype'),
		/* Safari, Android, iOS */
		url('./fonts/work-sans/work-sans-v17-latin-800.svg#WorkSans') format('svg');
	/* Legacy iOS */
}

/* work-sans-italic - latin */
@font-face {
	font-family: 'Work Sans';
	font-style: italic;
	font-weight: 400;
	src: url('./fonts/work-sans/work-sans-v17-latin-italic.eot');
	/* IE9 Compat Modes */
	src: local(''),
		url('./fonts/work-sans/work-sans-v17-latin-italic.eot?#iefix') format('embedded-opentype'),
		/* IE6-IE8 */
		url('./fonts/work-sans/work-sans-v17-latin-italic.woff2') format('woff2'),
		/* Super Modern Browsers */
		url('./fonts/work-sans/work-sans-v17-latin-italic.woff') format('woff'),
		/* Modern Browsers */
		url('./fonts/work-sans/work-sans-v17-latin-italic.ttf') format('truetype'),
		/* Safari, Android, iOS */
		url('./fonts/work-sans/work-sans-v17-latin-italic.svg#WorkSans') format('svg');
	/* Legacy iOS */
}

/* work-sans-800italic - latin */
@font-face {
	font-family: 'Work Sans';
	font-style: italic;
	font-weight: 800;
	src: url('./fonts/work-sans/work-sans-v17-latin-800italic.eot');
	/* IE9 Compat Modes */
	src: local(''),
		url('./fonts/work-sans/work-sans-v17-latin-800italic.eot?#iefix') format('embedded-opentype'),
		/* IE6-IE8 */
		url('./fonts/work-sans/work-sans-v17-latin-800italic.woff2') format('woff2'),
		/* Super Modern Browsers */
		url('./fonts/work-sans/work-sans-v17-latin-800italic.woff') format('woff'),
		/* Modern Browsers */
		url('./fonts/work-sans/work-sans-v17-latin-800italic.ttf') format('truetype'),
		/* Safari, Android, iOS */
		url('./fonts/work-sans/work-sans-v17-latin-800italic.svg#WorkSans') format('svg');
	/* Legacy iOS */
}

/*********************************************
 * GLOBAL STYLES
 *********************************************/

:root {
	--r-main-font-size: 35px;
	--r-main-font: "Work Sans";
	--r-main-color: #fff;
	--r-background-color: #140526;
	--r-code-background-color: #000000;
	--r-block-margin: 0em 30px 15px 30px;
	--r-heading-margin: 0em 0em 20px 0em;
	--r-heading-font: "Unbounded";
	--r-heading-color: #d92f78;
	--r-heading-line-height: 1.5em;
	--r-heading-letter-spacing: 0.02em;
	--r-heading-text-transform: none;
	--r-heading-text-shadow: none;
	--r-heading-font-weight: normal;
	--r-heading1-text-shadow: none;
	--r-heading1-size: 2em;
	--r-heading2-size: 1.35em;
	--r-heading3-size: 1.25em;
	--r-heading4-size: 1.15em;
	--r-code-font: monospace;
	/* custom PBA var */
	--r-code-font-size: 0.75em;
	--r-link-color: #ccc;
	--r-link-color-decoration: #d92f78;
	--r-color-controls: #d92f78;
	--r-link-color-dark: #;
	--r-link-color-hover: #8d3aed;
	--r-selection-background-color: #8d3aed;
	--r-selection-color: #fff;
	--r-padding: 24px;

	/* POLKADOT MAIN COLORS */
	--r-hub-cyan: #00B2FF;
	--r-hub-purple: #552BBF;
	--r-hub-pink: #E6007A;
	--r-hub-lime: #D3FF33;
	--r-hub-green: #56F39A;

	/* Colors used in the Polkadot-SDK Lectures */
	--substrate-green: #25cc85ff;
	--substrate-runtime: #bb8ba6;
	--substrate-host: #8d3aed;
}

/* box sizing;
	https://css-tricks.com/box-sizing/#aa-universal-box-sizing-with-inheritance */
html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

.reveal-viewport {
	background: #111;
	background-color: var(--r-background-color);
}

section.has-light-background,
section.has-light-background p,
section.has-light-background h1,
section.has-light-background h2,
section.has-light-background h3,
section.has-light-background h4,
section.has-light-background h5,
section.has-light-background h6 {
	color: #222;
}

.reveal {
	font-family: var(--r-main-font);
	font-size: var(--r-main-font-size);
	font-weight: normal;
	color: var(--r-main-color);
}

.reveal ::selection {
	color: var(--r-selection-color);
	background: var(--r-selection-background-color);
	text-shadow: none;
}

.reveal ::-moz-selection {
	color: var(--r-selection-color);
	background: var(--r-selection-background-color);
	text-shadow: none;
}

.reveal .slides section,
.reveal .slides section>section {
	/* line-height: 1.3; */
	font-weight: inherit;
}

/*
  custom-elements
*/
/* columns:  a widget to display columns of things */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 3%;
}

.site-header--small {
	padding: var(--size);
}

.reveal section {
	left: 0;
	padding: var(--r-padding);
}

pba-cols {
	margin: var(--r-block-margin);
	display: flex;
	align-items: center;
	gap: calc(var(--r-padding) * 2);
}

/* TODO: Columns hard coded in style for 2 only, for best results 3 and more need more styling calculated on total columns in slide... Seems to overflow slide on  right side...*/
pba-col {
	display: flex;
	flex: 1;
}

pba-col {
	display: block;
}

pba-col:nth-of-type(2) {
	padding-right: 0;
}

pba-col[left] {
	display: flex;
	flex-direction: column;
	align-items: left;
	text-align: left;
}

pba-col[center] {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

pba-col[right] {
	display: flex;
	flex-direction: column;
	align-items: right;
	text-align: right;
}

pba-flex[left] {
	display: flex;
	flex-direction: column;
	align-items: left;
	text-align: left;
}

pba-flex[center] {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

pba-flex[right] {
	display: flex;
	flex-direction: column;
	align-items: right;
	text-align: right;
}


/*********************************************
	 * HEADERS
	 *********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
	margin: var(--r-heading-margin);
	color: var(--r-heading-color);
	font-family: var(--r-heading-font);
	font-weight: var(--r-heading-font-weight);
	line-height: var(--r-heading-line-height);
	letter-spacing: var(--r-heading-letter-spacing);
	text-transform: var(--r-heading-text-transform);
	text-shadow: var(--r-heading-text-shadow);
	word-wrap: break-word;
}

.reveal h1 {
	font-size: var(--r-heading1-size);
	text-shadow: var(--r-heading1-text-shadow);
}

.reveal h2 {
	font-size: var(--r-heading2-size);
}

.reveal h3 {
	font-size: var(--r-heading3-size);
}

.reveal h4 {
	font-size: var(--r-heading4-size);
}

/*********************************************
	 * OTHER
	 *********************************************/
.reveal p {
	margin: var(--r-block-margin);
	line-height: 1.3;
}

.mermaid svg {
	margin-left: auto;
	margin-right: auto;
	max-width: 70% !important;
}

.mermaid.limit {
	display: block;
	margin: auto;
}

.mermaid.size-10 {
	width: 10%;
}

.mermaid.size-20 {
	width: 20%;
}

.mermaid.size-30 {
	width: 30%;
}

.mermaid.size-40 {
	width: 40%;
}

.mermaid.size-50 {
	width: 50%;
}

.mermaid.size-60 {
	width: 60%;
}

.mermaid.size-70 {
	width: 70%;
}

.mermaid.size-80 {
	width: 80%;
}

.mermaid.size-90 {
	width: 90%;
}

/* Ensure certain elements are never larger than the slide itself */
/* Set in ./reveal.json -> "width": 1400, "height": 900, */
.reveal img,
.reveal video,
.reveal iframe {
	margin-left: auto;
	margin-right: auto;
	max-width: 1300px;
	max-height: 800px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.reveal img[rounded],
.reveal video[rounded],
.reveal iframe[rounded] {
	border-radius: 0.6em;
}

.reveal strong,
.reveal b {
	font-weight: bold;
}

.reveal em {
	font-style: italic;
}

.reveal ol,
.reveal dl,
.reveal ul {
	position: relative;
	text-align: left;
	line-height: 1.2;
}

.reveal ol {
	margin-left: -2em;
}

.reveal ul~ol {
	margin-left: 0;
}


.reveal ol li,
.reveal dl li,
.reveal ul li {
	margin: var(--r-block-margin);
	margin-left: 1em;
}

.reveal * li ol,
.reveal * li dl,
.reveal * li ul {
	margin-top: 0.3em;
	margin-left: -1em;
}

.reveal ul,
.reveal ol {
	/* Remove default bullets/numbers on lists */
	list-style: none !important;
	padding-left: 2em;
}

.reveal ol>li {
	counter-increment: count-ol;
}

.reveal * li ol>li {
	counter-increment: count-ol-ol;
}

.reveal ul>li::before {
	font-family: "Unbounded";
	font-size: 0.8em;
	line-height: 1.5em;
	position: absolute;
	padding-left: 3em;
	left: -0.5em;
	font-family: monospace;
	/* CSS Code/unicode, hex: https://www.w3schools.com/charsets/ref_utf_symbols.asp */
	content: "\2688";
	color: var(--r-hub-cyan);
}

.reveal ol>li::before {
	font-family: "Unbounded";
	font-size: 0.75em;
	position: relative;
	font-family: monospace;
	/* Custom numbers and list item delimiter */
	/* CSS Code/unicode, hex: https://www.w3schools.com/charsets/ref_utf_symbols.asp */
	/* Change the color */
	color: var(--r-hub-cyan);
	font-weight: bold;
}

.reveal ol>li::before {
	content: counters(count-ol, ".") ": ";
}

.reveal * li ol>li::before {
	content: counters(count-ol-ol, ".") ": ";
}

.reveal blockquote {
	display: inline-block;
	padding: 0.7em;
	font-style: italic;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 0.6em;
	margin: var(--r-block-margin);
}

.reveal blockquote * {
	margin: 0em !important;
}

.reveal q {
	font-style: italic;
}

.reveal pre {
	font-size: var(--r-code-font-size);
	font-family: var(--r-code-font);
	display: block;
	position: relative;
	margin: var(--r-block-margin) auto;
	line-height: 1.2em;
	word-wrap: break-word;
	text-align: left;
}

.reveal code {
	font-family: var(--r-code-font);
	text-transform: none;
	tab-size: 2;
	background-color: var(--r-code-background-color);
}

.reveal pre code {
	display: block;
	overflow: auto;
	max-height: 650px;
	word-wrap: break-word;
}

.reveal .code-wrapper {
	white-space: normal;
}

.reveal .code-wrapper code {
	white-space: pre;
}

.reveal table {
	margin: auto;
	border-collapse: collapse;
	border-spacing: 0;
}

.reveal table th {
	font-weight: bold;
}

.reveal table th,
.reveal table td {
	text-align: left;
	padding: 0.2em 0.5em 0.2em 0.5em;
	border-bottom: 1px solid;
}

.reveal table th[align="center"],
.reveal table td[align="center"] {
	text-align: center;
}

.reveal table th[align="right"],
.reveal table td[align="right"] {
	text-align: right;
}

.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
	border-bottom: none;
}

.reveal sup {
	vertical-align: super;
	font-size: smaller;
}

.reveal sub {
	vertical-align: sub;
	font-size: smaller;
}

.reveal small {
	display: inline-block;
	font-size: 0.6em;
	line-height: 1.2em;
	vertical-align: top;
}

.reveal small * {
	vertical-align: top;
}

/*********************************************
	 * LINKS
	 *********************************************/

/* default elements, used in slide temple */
a {
	color: var(--r-link-color);
	text-decoration: underline dotted;
	text-decoration-color: var(--r-link-color-decoration);
	text-underline-offset: 0.25em;
	transition: color 0.15s ease;
	font-weight: bolder;
}

.reveal a:hover {
	color: var(--r-link-color-hover);
	text-shadow: none;
	border: none;
}

.reveal .roll span:after {
	color: #fff;
	background: var(--r-link-color-dark);
}

/*********************************************
	 * Frame helper
	 *********************************************/
.reveal .r-frame {
	border: 4px solid var(--r-main-color);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

.reveal a .r-frame {
	transition: all 0.15s linear;
}

.reveal a:hover .r-frame {
	border-color: var(--r-link-color);
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}