@import 'docs.css';

body.hide-ui {
	cursor: none;
}

.cis-header {
	background: #c04;
}


.editor {
	height: calc(100vh - 3rem);
	height: calc(100dvh - 3rem);
	background-color: #222;
	color: #fff;
	display: flex;
	position: relative;
}

.editor textarea {
	resize: none;
	border: none;
	margin: 0;
	outline: 0;
	padding: 1rem;
	font-size: 1rem;
	font-family: 'Source Code Pro', 'Ubuntu Mono', monospace;
	background-color: #222;
	color: #fff;
	border-radius: 0;
	flex-grow: 1;
}


.dropbox {
	position: absolute;
	top: 1rem;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	background-color: #111;
	border-radius: 2rem;
	border: .5rem solid #c04;
	font-size: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	visibility: hidden;
	opacity: 0;
	transform: scale(.5);
	transition: .1s;
}
.dropbox.over {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition: .2s;
}



.welcome-guide-wrapper {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #0006;
	z-index: 6;
}

.welcome-guide-wrapper ::selection { text-shadow: none }

.welcome-guide {
	width: 48rem;
	min-height: 24rem;
	max-width: calc(100vw - 2rem);
	background: #fff;
	border-radius: 1rem;
	color: #000;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1rem;
	box-sizing: border-box;
	font-size: 1.2rem;
	position: relative;
}

.welcome-guide .welcome-guide-close {
	position: absolute;
	top: .5rem;
	right: 1rem;
	font-size: 2rem;
	color: #999;
	user-select: none;
}
.welcome-guide-close:hover { color: #666 }

.welcome-guide-page-wrapper {
	flex-grow: 1;
	overflow: auto;
}

.welcome-guide-page {
	display: none;
	flex-direction: column;
	align-items: center;
}

.welcome-guide-page.active {
	display: flex;
}

.welcome-guide .dia {
	background: #222;
	color: #fff;
	width: 20rem;
	height: 10rem;
	border-radius: .5rem;
	overflow: hidden;
}

.welcome-guide .dia-h {
	height: 1rem;
	border-radius: .5rem;
	background: #c04;
}

.welcome-guide .dia-s {
	width: 8rem;
	height: 5rem;
	background: #000;
	border-radius: .5rem;
	float: right;
	margin: .5rem;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #666;
}

.dia-t {
	margin: .5rem;
	font-family: monospace;
}
.dia-t::after {
	content: '|';
	color: #888;
}

.welcome-guide .button-container {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.welcome-guide button {
	font: inherit;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	flex-shrink: 0;
	user-select: none;
	outline: none;
	cursor: default;
}

.welcome-guide .button {
	background: #eee;
	color: #000;
	font-weight: bold;
	text-decoration: none;
	padding: .5em 1em;
	border-radius: .5em;
	display: inline-block;
}
.welcome-guide .button:hover { background: #ddd }
.welcome-guide .button:active { background: #ccc }
.welcome-guide button:focus { box-shadow: 0 0 0 2px #000 }

.welcome-guide .button.primary {
	color: #fff;
	background: #c04;
}
.welcome-guide .button.primary:hover { background: #b00 }
.welcome-guide .button.primary:active { background: #a00 }

.welcome-guide h1 {
	margin: 0;
}

.header-button.highlighted {
	outline: 2px dashed #fff;
	animation: pulse 1s infinite;
}
@keyframes pulse {
	50% { transform: scale(1.1) }
	100% { transform: none }
}





.slides {
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	background-color: #000;
	position: relative;
}

.preview {
	flex-shrink: 0;
	overflow: auto;
	scroll-behavior: smooth;
	width: 50%;
	box-sizing: border-box;
	padding: 0 1rem;
	background: #fff;
	color: #000;
}

.preview.site {
	margin: 0;
}

.slide {
	box-sizing: border-box;
	width: 25em;
	height: 18.75em;
	padding: 1em;
	background-color: #000;
	color: #fff;
	font-family: 'Source Sans Pro', sans-serif;
	overflow: hidden;
	position: relative;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.slides .slide {
	font-size: min(4vw, 5.333vh);
	position: absolute;
	/* weird hack because of webkit behaviour regarding flex box and absolute positioning */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.slides .slide:not(.active) { visibility: hidden }

.slides-preview .slide {
	margin: 1em;
	font-size: 1rem;
	border-radius: 1em;
}
.slides-preview .slide.focus {
	box-shadow: 0 0 0 .25rem #444;
}


.pdf-export.slides-preview, .pdf-export .slides-preview {
	display: block;
}
.pdf-export .slide {
	margin: 0;
	border-radius: 0;
	box-shadow: none !important;
	font-size: 1rem !important;
	/*color: transparent;*/
}

/*.pdf-export .slide * {
	color: transparent;
}*/


.floating-button-container {
	position: fixed;
	right: 0;
	transition: .5s;
}
.floating-button-container.top { top: 0 }
.floating-button-container.bottom { bottom: 0 }

body.hide-ui .floating-button-container {
	opacity: 0;
	visibility: hidden; /* sometimes i love css */
}

.floating-button-container .floating-button {
	box-sizing: content-box;
	width: 2rem;
	height: 2rem;
	margin: 0;
	padding: 1rem;
	border: none;
	background: #000;
	transition: transform .2s, opacity .2s, visibility .2s;

	fill: none;
	stroke: #c04;
	stroke-width: 1.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.floating-button-container .floating-button:hover {
	background-color: #c04;
	stroke: #000;
}
.floating-button-container .floating-button.hidden {
	opacity: 0;
	visibility: hidden;
}

.floating-button-container.top .floating-button { border-radius: 0 0 1rem 1rem }
.floating-button-container.bottom .floating-button { border-radius: 1rem 1rem 0 0 }

.floating-button-container .floating-button svg { transition: transform .2s }
.floating-button-container .floating-button-right.hidden svg { transform: translateX(2rem) }
.floating-button-container .floating-button-left.hidden svg { transform: translateX(-2rem) }


@media screen and (max-width: 768px) {

	.preview {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.slides-preview {
		scroll-behavior: auto;
	}
}


.site {
	margin: 1rem;
}


/*.site img {
	min-width: 4em;
	max-width: 12em;
	max-height: 10em;
	object-fit: contain;
	display: block;
	margin: .5em auto;
}
.site img[alt~="!white"] { background-color: white }
.site img[alt~="!black"] { background-color: black }
.site img[alt~="!round"] { border-radius: 1em }
.site img[alt~="!right"] { float: right; margin-left: .5em }
.site img[alt~="!left"] { float: left; margin-right: .5em }
.site img[alt~="!small"] { width: 5em }
.site img[alt~="!large"] { max-width: 22em; max-height: 18em; width: 22em }

/*.site img[alt~="!contain"], .site img[alt~="!cover"] {
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
}
.site img[alt~="!cover"] { object-fit: cover }* /

.site hr {
	width: 100%;
	border: .05em solid #c04;
}

.site a {
	color: #c04;
}

.site p {
	margin: .5em 0;
	text-align: left;
}

.site :is(h1, h2, h3, h4, h5, h6) + p {
	margin-top: 0;
}

.site ul, .site ol {
	margin: 0;
	padding-left: 1em;
	text-align: left;
}

.site :is(ul, ol) + :is(ul, ol) {
	margin-top: .5em;
}

.site pre {
	font-size: .6em;
	text-align: left;
	max-width: 100%;
	white-space: pre-wrap;
	border-radius: .5em;
	overflow: hidden;
}

.site code {
	font-family: 'Source Code Pro', 'Ubuntu Mono', monospace;
}

.site :not(pre) > code {
	background-color: #444;
	padding: 0 .5em;
	border-radius: .5em;
	font-size: .8em;
}

.site h1, .site h2, .site h3, .site h4, .site h5, .site h6 {
	margin: .5em 0;
}

.site blockquote {
	text-align: left;
	width: auto;
	margin: .5em 0;
	padding: .001em 1em;
	background-color: #fff2;
	border-left: 0.5em solid #c04;
	border-radius: .5em;
}

.site table {
	border-collapse: collapse;
}

.site td, .site th {
	border: max(.05em, 1px) solid;
	padding: .2em .5em;
}

.site .bb {
	width: 12em;
	height: 10em;
}

.slide .chart {
	box-sizing: content-box;
	width: 10em;
	height: 10em;
	padding: .5em;
	background-color: #222;
	display: flex;
	align-items: end;
	gap: .5em;
}

.slide .chart .category {
	height: 10em;
	position: relative;
	flex-grow: 1;
	display: flex;
	align-items: end;
	gap: 1px;
}

.category::after {
	content: attr(data-label);
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	font-size: .5em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.slide .chart .bar {
	--color: #fc0;
	--height: 0;
	flex-grow: 1;
	background: repeating-linear-gradient(to top, var(--color) 0, var(--color) calc(2em - 1px), #222 calc(2em - 1px), #222 2em);
	background-position: bottom;
	height: var(--height);
}
.slide .chart .bar:nth-child(4n+1) { --color: #7a3 }
.slide .chart .bar:nth-child(4n+2) { --color: #0af }
.slide .chart .bar:nth-child(4n+3) { --color: #f08 }


.site p mjx-container {
	margin: 0 !important;
}


/* highlight.js atom-one-dark theme * /
.site pre code{display:block;overflow-x:auto;padding:1em;color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}


body.light .editor, body.light .editor textarea { background-color: #fff; color: #000 }
body.light .floating-button { background-color: #eee; stroke: #c04 }
body.light .slides, body.light .slide { background-color: #eee; color: #000 }
body.light .slides-preview .slide.focus { box-shadow: 0 0 0 .25rem #bbb }
body.light .slide a { color: #c04 }
body.light .slide blockquote { background-color: #0001 }
body.light .slide :not(pre) > code { background-color: #bbb }

body.red .slide { background-color: #100 }
body.red .slide a, body.red .slide h1, body.red .slide h2, body.red .slide h3, body.red .slide h4, body.red .slide h5, body.red .slide h6 {color: #c30 }
body.red .slide hr, body.red .slide blockquote { border-color: #c30 }
body.red .slides-preview .slide.focus { box-shadow: 0 0 0 .25rem #422 }
body.red .slide :not(pre) > code { background-color: #422 }*/






body.site-container {
	max-width: 64rem;
	margin: auto;
	padding: 0 1rem;
	padding: 0;
}

::selection {
	background-color: #c04;
	color: #fff;
}
th::selection {
	background-color: #fff;
	color: #c04;
}

h2 {
	margin: 1em 0 .5em;
}

p {
	line-height: 1.5;
	margin: .5em 0;
}

a {
	color: #c04;
}

ol, ul {
	padding-left: 2em;
	margin: .5em 0;
}
li {
	margin: .5em 0;
}

img {
	max-width: 45%;
	display: inline-block;
}
img[alt~="!white"] { background-color: white }
img[alt~="!black"] { background-color: black }
img[alt~="!right"] { max-width: 50%; float: right; margin-left: .5em }
img[alt~="!left"] { max-width: 50%; float: left; margin-right: .5em }
img[alt~="!large"] { display: block; max-width: 100% }
img[alt~="!small"] { max-width: 12em }
img[alt~="!round"] { border-radius: 1rem }


table {
	border-collapse: collapse;
	display: inline-table;
}

tr:nth-child(even) {
	background-color: #eee;
}

th, td {
	border: 1px solid #000;
	padding: .25em .5em;
}

th {
	background-color: #c04;
	color: #fff;
}



pre {
	overflow: auto;
	background-color: #fafafa; /* color from highlight.js theme */
	border-radius: .5rem;
	padding: .5rem;
}

:not(pre) > code {
	background-color: #0001;
	/*border: 1px solid #0002;*/
	padding: .25em .5em;
	border-radius: .5em;
}

blockquote {
	background-color: #0001;
	margin: 1rem 0;
	border-left: .75rem solid #c04;
	border-radius: .5rem;
	padding: 1px 1rem;
	padding-left: 2rem;
}

:target {
	color: #c04;
}


.breadcrumbs {
	margin: 1rem 0;
}

#toc ul {
	list-style: none;
	padding: 0;
}
#toc > ul {
	background-color: #eee;
	border-radius: 1rem;
	padding: .5rem;
}
#toc li {
	margin: 0;
}

#toc a {
	display: block;
	padding: .5rem;
	border-radius: .5rem;
	color: inherit;
	text-decoration: none;
	cursor: default;
}
#toc a:hover {
	background-color: #c04;
	color: #fff;
}

#toc ul ul a { padding-left: 1.5rem }
#toc ul ul ul a { padding-left: 2.5rem }
#toc ul ul ul ul a { padding-left: 3.5rem }
#toc ul ul ul ul ul a { padding-left: 4.5rem }

/* highlight.js atom-one-light theme */
.hljs{color:#383a42}.hljs-comment,.hljs-quote{color:#a0a1a7;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#a626a4}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e45649}.hljs-literal{color:#0184bb}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#50a14f}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#986801}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#4078f2}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#c18401}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}


@media (prefers-color-scheme: dark) {
	body {
		background-color: #000;
		color: #fff;
	}

	tr:nth-child(even) { background-color: #222 }
	th, td { border-color: #fff }

	:not(pre) > code {
		background-color: #fff1;
		border-color: #fff2;
	}

	blockquote { background-color: #fff2 }
	#toc > ul { background-color: #222 }

	/* highlight.js atom-one-dark theme */
	pre{background:#282c34}.hljs{color:#abb2bf}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}
}