/*:root {
--light-goldenrod-yellow: #F3F4CE;
--shadow: #7F7B65;
--lapis-lazuli: #105A8C;
--ocean-blue: #5434AE;
--light-cyan: #CCE0DE;
--dark-blue: #022A4C;

--flax: #EAD97D;
--radical-red: #FF3366;
--cyber-grape: #4D3B77;
--medium-aquamarine: #7FE2A7;


--dark-violet:#4d2c3a;
--violet:#984d6a;
--blue:#4d4ea1;
--blue-green:#43aa91;
--tan:#ad6e36;
--light-blue:#90d5ea;


  --blue: #1e90ff;
  --white: #ffffff; 
  --app-background: #7D8895;
  --app-background-light: #A0B0BB ;
    --dark-color: #223;
    --primary:#6D007D;
    --primary-dark:#4D005D;
    --primary-light:#9D21AD;
    --yellow: #ffec7d;
    --rad:4px; 
}*/


/*
	-------------------------------------------------------		PLACARD
*/

* {
	box-sizing: border-box;
}

.card-main {
    position:relative;
}
button:focus {
/*	background-color: #F3F4AE !important;*/
/*	color: black !important;*/
}

body {
	background-color: var(--black);
	display: flex;
	align-items: center;
	justify-content: center;	
	font-family: var(--body-font);
	font-size: 14pt;
    color:var(--dark-color);
}



sup {
	font-size: 60%;
}

#LAB {
	background-color: var(--black);
	width: 960px;
	height: 540px;
	border: 1px solid #4D3B77;
	box-shadow: 10px 10px 10px rgba(0,0,0,.8);
	position: relative;
	overflow: hidden;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}



.bonk {
	animation-name: bonk-animate;
	animation-duration: 0.25s;
	animation-timing-function: cubic-bezier(0,.68,.03,1.18);
	transform-origin: 50% 50%;
}

@keyframes bonk-animate {
	0% {
		transform:scale(1.0);
	}
	50% {
		transform:scale(0.9925);
	}
	100% {
		transform:scale(1);
	}
 }
 
.lab-state {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 960px;
	height: 540px;
	transition: filter .25s;
	isolation: isolate;			/*	So that layers are always independent. */
}

.lab-state > * {
	position: relative;
}

.lab-state > * {
	position: absolute;
}



.nobreak {
	white-space: nowrap;
}

.infobox {
	width: 600px;
	border: 2px solid var(--dark-color);
	background-color: white;
	border-radius: calc(var(--rad) * 2);
    padding: 20px;
	position: relative;
	display: grid;
	grid-template-columns: 300px 1fr;
	grid-column-gap: 1em;
    align-items: center;
    justify-items: fill;
    box-sizing: border-box;
}
.infobox p {
    margin:.5rem 0 1rem 0;
}
.infobox p.infobox-heading {
    font-size:130%;
    font-weight:600;
    margin-top:1rem;
    margin-bottom:0;
}
.infobox .button {
    width:calc(100% - 4px);
}
.infobox > :nth-child(2) {
    display:flex;
    flex-flow:column;
    justify-content: center
}
.infobox > :nth-child(1) {
	position: relative;
	border: 2px solid var(--dark-color);
	border-radius: calc(var(--rad) * 1.5);
}

/*
.infobox::after {
	content: "";
	display: grid;
	align-items: center;
	justify-items: center;
    display:block;
	position: absolute;
	left: 190px;
	top: -10px;
	width: 60px;
	height: 60px;
	background-image: url(images/info-icon.png);
}

.infobox h1,
.infobox h2 {
    font-size:24px;
    letter-spacing: .04em;
    padding-bottom:4px;
}
.infobox h1 { 
    font-size:28px;
    border-bottom: 1px dashed black;
}
*/


@keyframes balloon-animate-in {
	0% {
		transform:scale(0);
		opacity: 0;
	}
	100% {
		transform:scale(1);
		opacity: 1;
	}
 }
 
.balloon,
.balloon-like {
	animation-name: balloon-animate-in;
	animation-duration: 0.5s;
	animation-timing-function: cubic-bezier(0,.68,.03,1.18);
	transform-origin: 0% 95%;
	transform-origin: 50% 50%;
 }
 

.button.numbered-button {
    text-align:left;
    justify-content: flex-start;
    font-size:16px;
    padding:0;
    margin:auto;
    background:transparent;
    border-color:var(--primary);
    width:100%;
    height:100%;
    overflow: hidden;
    transition:all .3s ease-in-out;
}
.button.numbered-button>div {
    padding:10px;
    color: var(--primary);
    height:100%;
    display:flex;
    align-items: center;
    background:rgba(255,255,255,.8);
    transition:all .3s ease-in-out;
}

.button.numbered-button > div:first-child {
    font-size: 24px;
    width:40px;
	font-weight: bold;
    color: white;
    background-color:var(--primary);
    justify-content: center;
    
	font-family: 'Barlow Semi Condensed', sans-serif !important;
}
.button.numbered-button > div:nth-child(2) {
    width:calc(100% - 40px);
	font-weight: bold;
    padding-right:15px;
    color: var(--primary);
    border-color:var(--primary);
    
	font-family: 'Lato', sans-serif !important;
}
.button.numbered-button:active {
    transform:scale(.95);
}
.button.numbered-button:hover > div:first-child { 
    background-color:var(--primary-light);    
}
.lab-state button.numbered-button:hover > div:nth-child(2) {    
    background-color:rgba(255,255,255,1);
}

.button.numbered-button:active > div:first-child { 
    background-color:var(--primary-dark);    
}
.button.numbered-button:active > div:nth-child(2) {    
    background-color:rgba(255,255,255,.6);
}

@keyframes infobox-animate-in {
	0% {
		transform:scale(0.5);
		opacity: 0;
	}
/*
	70% {
		transform:scale(1.1);
		opacity: 1.0;
	}
*/
	100% {
		transform:scale(1);
		opacity: 1;
	}
 }
 
.infobox,
.credits-box {
	animation-name: infobox-animate-in;
	animation-duration: 0.35s;
	animation-timing-function: cubic-bezier(0,.68,.03,1.18);
 }

@keyframes fade-in-animation {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
 }
 
.fade-in {
	animation-name: fade-in-animation;
	animation-duration: 1.0s;
	animation-timing-function: ease;
}

/*	Handy CSS rules during development	*/
#current-state {
	float: right;
	color: white;
	margin-top: 1em;
	font-family: monospace;
	font-size: 75%;
}

.notification {
	position: absolute;
	margin: 0px 50px;
	z-width: 700px;
	bottom: -100px;
	opacity: 0;
	padding: 1em;
	border: 2px solid #369;
	border-radius: 1em 1em 0em 0em;
	background-color: rgba(0,0,0,0.9);
	color: white;
	transition: all 0.5s ease;
}

.notification h2 {
	text-align: center;
	border-bottom: 1px solid white;
	margin-top: 0px;
	padding-top: 0px;
	font-size: 100%;
}

.notification u {
	font-weight: bold;
	display: inline-block;
	border: 1px solid green;
	background-color: #030;
	color: white;
	padding: 3px 7px;
	border-radius: 3px;
	min-width: 10px;
	text-align: center;
}

#MUTE-BUTTON {
	background-color: #4D3B77;
	border-radius: 0px 0px 0px 10px;
	border: 2px solid #3d3e91;
	position: absolute;
	right: 0px;
	top: 0px;
	width: 40px;
	height: 40px;
	z-index: 1000;
	color: #FFF;
    padding:0;
}
#MUTE-BUTTON:before {
    content:'';
    display:block;
	width: 40px;
	height: 40px;
    margin:auto;
	background-image: url( "images/volume_on.png" );
    background-repeat: no-repeat;
	background-position: center center;
}

#MUTE-BUTTON.muted:before {
	background-image: url( "images/volume_mute.png");
}

/*
	-------------------------------------------------------	SIDEBAR
	960-350 = 610
*/

.sidebar-container {
	width: 420px;
	border-right: 2px solid var(--dark-color);
	height: 540px;
	top: 0px;
	display: grid;
	align-items: center;
	justify-items: center;
	background-color: var(--app-background-light);
	padding: 20px;
	box-sizing: border-box;
}

.sidebar {
	position: relative;
	box-sizing: border-box;
	display: grid;
	align-items: center;
	justify-items: stretch;
	grid-template-columns: 1fr;
	grid-row-gap: 5px;
	font-size: 13pt;
}

.sidebar-text {
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    padding:0 10px;
}
.sidebar-text p {
    text-align: left;
    margin:auto 0 5px;
    order:2;
    line-height:1.5;
}
.sidebar-text .question-heading {
    font-weight:600;
    font-size:110%;
    order:1;
    line-height:1.4;
}

.sidebar-container .button-container {
	margin-top: 20px;
	display: grid;
    gap:10px;
}

.sidebar h1 {
	font-size: 20px;
	font-weight: bold;
	border-bottom: 1px dashed black;
	margin-top: 0px;
}

.sidebar ul {
    margin:6px auto;
}
.sidebar > * {
	margin: 0px;
}

.sidebar-buttons {
	display: grid;
	grid-row-gap: 6px;
    margin-top:6px;
}

.sidebar-buttons {
	display:flex;
	justify-content:center;
	align-items: stretch;
	align-content: stretch;
    flex-wrap: wrap;
    flex-grow:1;
}

.sidebar-buttons button {
    margin:0 4px 2px;
    flex-grow:1;
}

.topic {
	position: absolute;
	left: 100px;
	top: 5px;
	width: 220px;
	border: 2px solid white;
	background-color: var(--dark-color);
    color:white;
	padding: 10px;
	text-align: center;
	border-radius: var(--rad);
    font-family:var(--heading-font);
    font-weight:600;
}

.correct, .try-again {
    position:relative;
    font-size:140%;
    letter-spacing: .02rem;
    display:flex;
    justify-content: flex-start;
	align-items: center;
	font-weight: 600;
/*    width:60%;*/
    flex: 0 0 auto;
    border-radius:var(--rad);
/*	background:var(--dark-color)*/
}

.correct:before, .try-again:before {
    position:relative;
    left:-10px;
    top:0px;
    display:inline-flex;
/*    position:absolute;*/
    background:var(--green);
    border:3px solid white;
    border-radius:50%;
    padding:0;
    margin-right:-5px;
    font-size:26px !important;
    align-items: center;
    justify-content: center;
    content:'check';
    color:white;
    text-align:center;
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    line-height:1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;

}


.try-again:before {
    content:'close';
    background-color:var(--red);
}
.try-again {
/*
	background-image: url('images/incorrect.png');
	background-repeat: no-repeat;
	background-position: center left;
*/
/*	color: var(--red);*/
}
.correct {
/*	background-image: url('images/correct.png');*/
/*	background-repeat: no-repeat;*/
/*	background-position: center left;*/
	
/*	color: var(--green);*/
}

@keyframes scale-up {
    0% {
        transform:scale(1);
    }
    100% {
        transform:scale(1.2);
    }
}
@keyframes move-up {
    0% {
        transform: scale(1.2) translate(-50px, 150px);
    }
    100% {
        
    }
}
@keyframes pop-in {
    0% {
        opacity:0;     
        transform: translateY(10px) scale(.2);
    }
    80% {
        opacity:1;
        transform:scale(1.2);
    }
    100% {
        transform:scale(1);
    }
}
.move-down-animation {
                animation: move-down .5s ease-out 1;
				animation-fill-mode:forwards;
                
}
@keyframes move-down {
    0% {
        transform: scale(1) translate(10px, -200px);
        
    }
    100% {
        transform: scale(1.2);
    }
}

#SlideID {
    display:none;
}

/*	Topic completion checkmarks	*/

.button.primary-button {
	position: relative;
}
.completion-checkmark {
	border: 4px solid white;
	width: 1.8em;
	height: 1.8em;
	border-radius: 2em;
	background-color: var(--green);
	color: white;
	display: block;
	position: absolute;
	right: .2em;
	top: -.5em;
	display: flex;
	align-items: center;
	justify-items: center;
	animation-name: checkmark-animate;
	animation-fill-mode: forwards;
	animation-duration: 0.5s;
	animation-timing-function: cubic-bezier(0,.68,.03,1.18);
	transform-origin: 50% 50%;
	box-shadow: 0px 5px 5px rgba(0,0,0,0.5 );
    opacity:0;

}
@keyframes checkmark-animate {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1.0);
    }
}
#topic-one-button .completion-checkmark { display: grid; }


/* ------------------------------------------------------------ CREDITS */


.credits-box {
	border: 2px solid black;
	background-color: white;
	border-radius: 2em;
	padding: 20px;
	position: relative;
    align-items: fill;
    justify-items: fill;
    box-sizing: border-box;
    max-width: 900px;
}

.credits-box h1 {
	text-align: center;
	margin-top: 0px;
	margin-bottom: 5px;
	border-bottom: 1px dotted black;
}

.credits-box .button-container button {
	width: 100%;
	text-align: center;
}

/* ------------------------------------------------------- MAIN MENU */

.main-menu-container {
	width: 960px;
	height: 540px;
	background-color: white;
	display: flex;
	align-items: center;
	justify-items: center;
	justify-content: center;
}