* {
	box-sizing: border-box;
	margin: 0;
	--font-family: 'Comic Sans MS', 'Comic Sans', 'Kalam', cursive, sans-serif;
	font-family: var(--font-family)
}

:root, html {
	--background-color: #0a0a0a;
	--color: #f0f0f0;
	font-size: min(2svh,1.5vw);
    --adminbarheight: 0px
}


#slide_view {
	font: normal 400 1rem/1.5 'Comic Sans MS','Comic Sans','Kalam',cursive,sans-serif;
	background-color: var(--background-color);
	color: var(--color);
	width: 100vw;
	height: min(100svh - var(--adminbarheight,0px));
	overflow: hidden;
	display: grid;
	align-items: center;
	justify-content: center;
	justify-items: center;
	grid-template:
		"top top top" 1fr
		"left main right" var(--slideHeight,min(100svh - var(--adminbarheight,0px) - 6rem))
		"left footer right" 4rem
		"bottom bottom bottom" 1fr / 1fr var(--slideWidth, min(var(--width, 100vw) - 4rem)) 1fr;
	--aspectRatio: 0.75;
	--width: min(100vw - 2rem, 100svh / var(--aspectRatio) - 2rem);
	--height: min(var(--width) * var(--aspectRatio));
	--slideWidth: min(var(--width) - 4em);
	--slideHeight: min(var(--height) - 5em);
}


.admin-bar {
    --adminbarheight: 32px
}@media(max-width: 882px){.admin-bar {
    --adminbarheight: 46px
}}

body.single-sfwd-topic:not(.oxygen-builder-body),
.single-sfwd-topic>#ct-builder {
	font: normal 400 1rem/1.5 'Comic Sans MS','Comic Sans','Kalam',cursive,sans-serif;
	background-color: var(--background-color);
	color: var(--color);
	width: 100vw;
	height: min(100svh - var(--adminbarheight,0px));
	overflow: hidden;
	display: grid;
	align-items: center;
	justify-content: center;
	justify-items: center;
	grid-template:
		"main" min(100svh - var(--adminbarheight,0px) - 1em, 75vw)
		/* "footer" 4rem / 1fr */
}

body.single-sfwd-topic:not(.oxygen-builder-body):has(>header),
.single-sfwd-topic>#ct-builder:has(>header) {
	grid-template:
		"header" 4rem
		"main" 1fr
		"footer" 4rem / 1fr
}

main.single-sfwd-topic {
	width: 100%;
	height: min(100svh - 5rem);
	overflow: hidden;
	padding: 1rem;
	background-color: var(--background-color)
}

h1 {
	color: #1e90ff;
	font-size: 2rem;
	text-align: center
}

img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain
}

audio {
	margin: 1rem
}
.wp-block-audio:has(~.slide__play-btn),
.slide:has(.slide__play-btn) .wp-block-audio {
    display: none;
}
.slide__play-btn {
    font-size: 3rem;
    right: 0;
    top: 0;
    position: absolute;
	cursor: pointer
}

p {
	padding: 1rem 0 0 1rem
}

button {
	background: 0 0;
	border: none;
	cursor: pointer
}

.flexRow.slide,
.flexRow {
	display: flex;
	flex-direction: row
}

.flexCol {
	display: flex;
	flex-direction: column
}

.draggable {
	/* position: absolute;
	z-index: 9;
	background: 0 0;
	border: none; */
	cursor: pointer
}

.alignRight {
	text-align: right
}

.alignCenter {
	text-align: center
}

.alignCenter * {
	margin: auto
}

.speakerIcon {
	width: 5rem;
	height: 5rem;
	cursor: pointer
}

.hidden {
	opacity: 0
}

.opaque {
	opacity: 1!important
}

.single-sfwd-topic header {
	display: flex;
	flex-direction: column;
	align-content: center;
	padding: .5em
}

.single-sfwd-topic header>div {
	align-content: left;
}

.single-sfwd-topic footer>div {
	justify-content: space-between;
}

.single-sfwd-topic main,
.single-sfwd-topic footer>div,
.single-sfwd-topic header>div {
	--width: min(100vw - 2em, 133.333svh - 2em);
	--slideWidth: min(var(--width) - 2em);
	--slideHeight: min(100svh - 7rem, 75vw - 7rem);
	width: min(100vw - 2em, 133.333svh - 2em);
	/* position: absolute; */
}

.single-sfwd-topic footer>div,
.single-sfwd-topic footer>div>div,
.single-sfwd-topic header>div {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1em;
}

.exercise__link,
.exercise_edit_link {
	padding: .5em 1em;
}
.button_prev,
.button_next,
.exercise__link,
.exercise_edit_link {
	background: color(1);
	color: hsl(0 0% 100%/.8);
	text-decoration-color: transparent;
	border-radius: .5em;
}
*:not(.disabled):is(.button_prev,.button_next,.exercise__link,.exercise_edit_link):is(*:hover,*:focus) {
	background: color(8);
	color: #fff;
}
.exercise__link.disabled {
	cursor: not-allowed;
	background: color(5);
	color: hsl(0 0% 100%/.6)
}

.slides_wrap,
.slides{
	position: relative;
	width: var(--slideWidth);
	height: var(--slideHeight);
	position: relative;
	z-index: 0;
}
.slides {
	display:grid;
	grid-template: "a";
	justify-content: center;
	align-items: center;
	transition: opacity .375s .375s ease;
}

.slide {
	width: min(var(--slideWidth) - 4em);
	height: var(--slideHeight);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	--t: .375s ease;
	transition: opacity var(--t), transform var(--t);
	grid-area: a;
	display:none;
	opacity: 0;
	pointer-events: none;
}
.slide.active {
	display:flex;
	opacity: 1;
	pointer-events: all
}

.slide:has(~.active) {
	display:flex;
	transform: translateX(-5rem);
}

.slide.active~.slide {
	display:flex;
	transform: translateX(5rem);
}

.button_prev,
.button_next {
/*     position: absolute; */
    top: min(50% - 1em);
    height: 1.625em;
    width: 1.625em;
	border-radius: .5em;
    text-align: center;
	font-size: 1.25rem;
	cursor: pointer;
	z-index: 1;
}
.current-slide-is-game:not(.won) .button_next {
    opacity: 0;
    pointer-events: none;
}

.slides:has(.slide.active:first-child)~.button_prev,
.slides:has(.slide.active:last-child)~.button_next,
.slide:first-child > .button_prev,
.slide:last-child > .button_next {
	cursor: not-allowed;
	background: color(1);
	color: #888
}
.slides:has(.active.proceed_on_win:not(.slide--won:last-child))~.button_next,
main:has(.slides .active.proceed_on_win:not(.slide--won:last-child))~.navigate_next {
    opacity: 0;
    pointer-events: none;
}
.slides:has(.active.proceed_on_win):not(:has(.slide--instruction))~.button_prev,
main:has(.slides .active.proceed_on_win):not(:has(.slide--instruction))~.navigate_prev {
    opacity: 0;
    pointer-events: none;
}
.count-children { --children: 0 }
.count-children:has(>*:last-child:nth-child( 1)) { --children:  1; --child-sqrt-ceil: 1; --child-sqrt-floor: 1}
.count-children:has(>*:last-child:nth-child( 2)) { --children:  2; --child-sqrt-ceil: 2; --child-sqrt-floor: 1}
.count-children:has(>*:last-child:nth-child( 3)) { --children:  3; --child-sqrt-ceil: 2; --child-sqrt-floor: 1}
.count-children:has(>*:last-child:nth-child( 4)) { --children:  4; --child-sqrt-ceil: 2; --child-sqrt-floor: 2}
.count-children:has(>*:last-child:nth-child( 5)) { --children:  5; --child-sqrt-ceil: 3; --child-sqrt-floor: 2}
.count-children:has(>*:last-child:nth-child( 6)) { --children:  6; --child-sqrt-ceil: 3; --child-sqrt-floor: 2}
.count-children:has(>*:last-child:nth-child( 7)) { --children:  7; --child-sqrt-ceil: 3; --child-sqrt-floor: 2}
.count-children:has(>*:last-child:nth-child( 8)) { --children:  8; --child-sqrt-ceil: 3; --child-sqrt-floor: 2}
.count-children:has(>*:last-child:nth-child( 9)) { --children:  9; --child-sqrt-ceil: 3; --child-sqrt-floor: 3}
.count-children:has(>*:last-child:nth-child(10)) { --children: 10; --child-sqrt-ceil: 4; --child-sqrt-floor: 3}
.count-children:has(>*:last-child:nth-child(11)) { --children: 11; --child-sqrt-ceil: 4; --child-sqrt-floor: 3}
.count-children:has(>*:last-child:nth-child(12)) { --children: 12; --child-sqrt-ceil: 4; --child-sqrt-floor: 3}
.count-children:has(>*:last-child:nth-child(13)) { --children: 13; --child-sqrt-ceil: 4; --child-sqrt-floor: 3}
.count-children:has(>*:last-child:nth-child(14)) { --children: 14; --child-sqrt-ceil: 4; --child-sqrt-floor: 3}
.count-children:has(>*:last-child:nth-child(15)) { --children: 15; --child-sqrt-ceil: 4; --child-sqrt-floor: 3}
.count-children:has(>*:last-child:nth-child(16)) { --children: 16; --child-sqrt-ceil: 4; --child-sqrt-floor: 4}
.count-children:has(>*:last-child:nth-child(17)) { --children: 17; --child-sqrt-ceil: 5; --child-sqrt-floor: 4}
.count-children:has(>*:last-child:nth-child(18)) { --children: 18; --child-sqrt-ceil: 5; --child-sqrt-floor: 4}
.count-children:has(>*:last-child:nth-child(19)) { --children: 19; --child-sqrt-ceil: 5; --child-sqrt-floor: 4}
.count-children:has(>*:last-child:nth-child(20)) { --children: 20; --child-sqrt-ceil: 5; --child-sqrt-floor: 4}
.count-children:has(>*:last-child:nth-child(21)) { --children: 21; --child-sqrt-ceil: 5; --child-sqrt-floor: 4}
.count-children:has(>*:last-child:nth-child(22)) { --children: 22; --child-sqrt-ceil: 5; --child-sqrt-floor: 4}
.count-children:has(>*:last-child:nth-child(23)) { --children: 23; --child-sqrt-ceil: 5; --child-sqrt-floor: 4}
.count-children:has(>*:last-child:nth-child(24)) { --children: 24; --child-sqrt-ceil: 5; --child-sqrt-floor: 4}
.count-children:has(>*:last-child:nth-child(25)) { --children: 25; --child-sqrt-ceil: 5; --child-sqrt-floor: 5}
.count-children:has(>*:last-child:nth-child(26)) { --children: 26; --child-sqrt-ceil: 6; --child-sqrt-floor: 5}
.count-children:has(>*:last-child:nth-child(27)) { --children: 27; --child-sqrt-ceil: 6; --child-sqrt-floor: 5}
.count-children:has(>*:last-child:nth-child(28)) { --children: 28; --child-sqrt-ceil: 6; --child-sqrt-floor: 5}
.count-children:has(>*:last-child:nth-child(29)) { --children: 29; --child-sqrt-ceil: 6; --child-sqrt-floor: 5}
.count-children:has(>*:last-child:nth-child(30)) { --children: 30; --child-sqrt-ceil: 6; --child-sqrt-floor: 5}


.aprox-time {
    margin-top: -6.6rem;
    padding: 0;
    font-size: 1.5rem
}
.no_slide__play-btn ,
.no_slide__play-btn audio {
    margin: auto !important;
}

#footer__inner {
  gap: 1rem
}

.slide {
    
/*     background: #444; */
    height: 36rem;
    width: 48rem;
}
.facilitator-tip {
    font-style: italic;
    opacity: .2
}
.facilitator-tip:hover,
.facilitator-tip:focus,
.facilitator-tip:active {
    opacity: .4
}
.no-hints .is-hint {
    opacity: 0;
    display:none
}

.slide>.wp-block-group__inner-container {
    width: 100%;
    height: 100%;
}
.slide .facilitator-tip {
    position: absolute;
    bottom: 1rem
}

section#smart-slider-section,
section#smart-slider-section>div {
    display:grid;
    grid-template:
        'a' 1fr / 1fr;
    align-content: center;
    justify-content: center;
    align-items: center;
    justify-items: center;
}
section#smart-slider-section>div,
section#smart-slider-section>div>div {
    grid-area: a;
}
.draggable * {
	pointer-events: none;
}

.hide-until,
.hide-after--hide,
.hide-until.hide-until--show .cover,
.hide-until .reveal {
	opacity: 0;
	transition: opacity .5s ease;
}
.hide-until.hide-until--show,
.hide-after,
.hide-until:has(.cover):has(.reveal),
.hide-until .cover,
.hide-until.hide-until--show .reveal {
	opacity: 1;
	transition: opacity .5s ease;
}
.hide-after--hide {
	opacity: 0
}
.clickable,
.reveal-hidden {
	cursor: pointer;
}
.hide-until:has(>.cover):has(>.reveal),
.hide-until>.wp-block-group__inner-container:has(>.cover):has(>.reveal) {
	position: relative;
	display: grid;
	grid-template: "a" auto / auto;
	opacity: 1;
}
.hide-until :is(.cover, .reveal) {
	position: relative;
	grid-area: a;
}
.hide-until .cover {
	z-index: 2;
}
.hide-until .reveal {
	z-index: 1;
}
.size-xxl,
.size-xlarge,
.size-large,
.size-medium,
.size-small,
.size-xsmall { width: var(--size)}
.size-xxl {--size: 48rem}
.size-xlarge {--size: 36rem}
.size-large {--size: 24rem}
.size-medium {--size: 18rem}
.size-small {--size: 12rem}
.size-xsmall {--size: 8rem}

figure.is-type-video {
    width: 100%;
}
figure:is(.size-xxl,
.size-xlarge,
.size-large,
.size-medium,
.size-small,
.size-xsmall)>img {
	width: var(--size);
}

/* .slides_wrap .slides>.active ~ .slide:not(.active), */
.slides_wrap .slides>.inactive--no_render {
	display: none
}

.nav-from-right .slide.active {
	animation: slide-from-right .5s ease-out;
}
.nav-from-left .slide.active {
	animation: slide-from-left .5s ease-out;
}

@keyframes slide-from-right {
	0%   { transform: translateX(5rem) }
	100% { transform: translateX(0) }
}
@keyframes slide-from-left {
	0%   { transform: translateX(-5rem) }
	100% { transform: translateX(0) }
}
.nav-from-right .slide:not(.active) {
	animation: slide-out-right .5s ease-out;
}
.nav-from-left .slide:not(.active) {
	animation: slide-out-left .5s ease-out;
}

@keyframes slide-out-right {
	0%   { transform: translateX(0) }
	99%  { transform: translateX(-5rem); display: flex }
	100% { transform: translateX(-5rem); display: none }
}
@keyframes slide-out-left {
	0%   { transform: translateX(0) }
	99%  { transform: translateX(5rem); display: flex }
	100% { transform: translateX(5rem); display: none }
}