/* While em is relative to the font-size of its direct or nearest parent, rem is only relative to the html (root) font-size. */
/* unvisited link */
a {
  color: #00FF00;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: lightgreen;
}

kbd {
  padding: .1rem .5rem;
  font-size: 1rem;
  color: #000;
  background-color: #fff;
  border-radius: .2rem;
  box-shadow: 2px 2px 5px gray;
}

samp {
  color: #44FF44;
  font-weight: bold;
  font-size: 1.2rem;
}

@keyframes glowingRed {
  0% {
    outline: 3px ridge #CC0000DD;
    /* box-shadow: 0 0 5px #003300; */
  }
  50% {
    outline: 3px ridge #FF0000FF;
    /* box-shadow: 0 0 20px #ee0000; */
  }
  100% {
    outline: 3px ridge #CC0000DD;
    /* box-shadow: 0 0 5px #003300; */
  }
}
.highlight {
  outline: 3px ridge #FF0000;
  outline-offset: 0.5px;
  animation: glowingRed 1300ms infinite;
}
code.inline {
  font-weight: bold;
  background-color: #333;
  border-radius: .3rem;
  padding: 0, 0.1rem;
  font-size: 1.2rem;
}
.sublabel {
	font-size: .9rem;
	color: #AAA;
  padding: 0 0 0 0;
}

.introduction {
	font-size: 1.2em;
}

.myMarker {
  position:absolute;
  background:#77AAFF44;
  z-index:20
}
/* //what editor is this? remove? */
.editor { 
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	font-family : monospace !important;
}
.editor *{ font-family : monospace !important;}

.ace_line,
.ace_line span {
	font-family: monospace !important;
}

body {
	color: white;
  background-color: #333;
  font-size: 1.2em;
}
body,
kbd,
button,
.serif {
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
samp,
pre,
input,
select,
.sublabel,
.monospace {
	font-family: Inconsolata, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}
input,
select {
  font-size: 1.2rem;
}

/*prism code padding*/
.code pre{
	outline: 1px solid;
	margin: 0;
}


.text{
	color: black;
  background-color: #f5f2f0;
	padding: 0px 10px 0px 10px;
	font-size: 20px;
	border-radius: 5px;
	margin: 0px;
}

.question {
  background-color: #222;
	padding: 0px 10px 0px 10px;
	border-radius: 5px;
	margin: 0px;
}

.task{
  background-color: #222;
	padding: 8px 8px 8px 8px;
}

.top-text {
  position: relative;
  height: 135px;
  width: 1050px;
	overflow: auto;
  border-radius: 5px;
}

.top-text p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  padding: 0px 10px 0px 10px;
}

.introduction {
   color: white;
   width: 350px;
}

/* Right side vertical lesson selection menu (scrollable) */
.vertical-menu {
  font-size: .9em;
  width: 265px;
  height: 100%;
  overflow: auto;
  padding: 5px 0px 5px 5px;
  background-color: #f5f2f0F0
}

.vertical-menu a{
  background-color: #eee;
  color: black;
  display: block;
  padding: 10px 0px 10px 10px;
  text-decoration: none;
}

.vertical-menu a:hover{
  background-color: #ccc;
}
.vertical-menu a.complete{
	background-color: #4CAF5033;
}
.vertical-menu a.active{
  background-color: royalblue;
  color: white;

}


.vertical-menu li.active{
  background-color: #4CAF50;
  color: white;
}

.vertical-menu a.heading{
  background-color: #eee;
  color: black;
  font-weight: bold;
  font-size: 1.4em;
}

/* Navigation bar buttons */
.btn {
  background-color: #212529; /* Blue background */
  border: none; /* Remove borders */
  color: white; /* White text */
  padding: 0.2em 1em 0.2em 1em; /* Some padding */
  font-size: 1.3em; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
	outline: none;
	border-radius: 0.2em;
}
.btn:disabled  {
  background-color: #77777744;
  color: #FFFFFF44; 
}

.btn:hover {
  background-color: #414549CC; 
}

.btn-wait {
  background-color: #770000AA;
  color: #FFFFFFAA; 
}

.btn-wait:hover {
  background-color: #770000AA;
  color: #FFFFFFAA; 
}

/* Testing Animations  */
@keyframes glowing {
  0% {
    background-color: #2ba805;
    box-shadow: 0 0 5px #2ba805;
  }
  50% {
    background-color: #49e819;
    box-shadow: 0 0 20px #49e819;
  }
  100% {
    background-color: #2ba805;
    box-shadow: 0 0 5px #2ba805;
  }
}
.btn-go {
  background-color: #4CAF50;
  color: #FFFFFF; 
}
.btn-go {
  animation: glowing 1300ms infinite;
}

.btn-go:disabled{
  animation: null;
}


/* in lesson submit button default style */
.submit-btn {
  padding: 2px 8px; /* Some padding */
  cursor: pointer; /* Mouse pointer on hover */
  font-size: 20px;
}
.submit-btn:hover {
  background-color: #ccc;
}

.code-btn:hover {
  background-color: #fff;
  box-shadow: 0 0 10px #fff;
  cursor: pointer; /* Mouse pointer on hover */
}

/*vocab button */
.vocab {
  background-color: #263034; /* Blue background */
  border: none; /* Remove borders */
  color: white; /* White text */
  min-width: 350px;
  padding: 0px 20px; /* Some padding */
  height: 50;
  font-size: 24px; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
	border-radius: .5rem;
}

.vocab:hover {
  background-color: #0A0;
}

/* Mini scene editor styles */
.editor-btn {
	border: 1px outset;
	border-radius: 2px;
	background-color: navy;
	padding: 0px 4px; /* Some padding */
  height: 15;
  font-size: 18px; /* Set a font size */
	outline: none;
}
.editor-square {
	background-color: #2F3129;
	outline: none;
	width:18px;
	height:15px;
	border: none;
	cursor: default;
}
/* Prequisites Menu and Buttons */
.lesson-btn {
  width: 14em;
  overflow: auto;
	font-size: 1.1em;
  border: none; /* Remove borders */
  color: white; /* White text */
  display: block;
	text-align: left;
  padding: .33em 1em;
  cursor: pointer; /* Mouse pointer on hover */
	outline: none;
	border-radius: .2em;
}
.lesson-btn:hover {
  background-color: #414549CC;
	font-weight: bold;
	outline: .1em solid;
}
.lesson-btn:disabled {
  background-color: #77777744;
  color: #FFFFFF44; 
}
.event {
	background-color: #CC5500CC;
}
.movement {
	background-color: #00AAAACC;
}
.utility {
	background-color: #0000AACC;
}
.management {
	background-color: #CC0022CC;
}
.group {
	background-color: #CC00CCCC;
}
.object {
	background-color: #00CC00CC;
}
.resource {
	background-color: #212529;
}

/* Prequisites Menu and Buttons */
.prereq {
	background-color: #333333
}
.prereq:hover {
  background-color: #000000CC;
	font-weight: bold;
	outline: .1em solid;
}
.prereq-menu {
	text-align: center;
	background-color: #777777;
}

/* Scene editor buttons TODO: DELETE THESE */  
.scene-editor-btn {
  background-color: #CC00CCCC;
  border: none; /* Remove borders */
  color: white; /* White text */
  height: 25px;
	width:85px;
  font-size: 20px; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
	/* outline: none; */
	text-align: left;
}

.scene-editor-btn:hover {
  background-color: #000000CC;
	font-weight: bold;
	outline: 1px solid;
}

.scene-editor-btn:disabled  {
  background-color: #77777744;
  color: #FFFFFF44; 
	outline: none;
	 cursor: default;
}


.scene-config {
	background-color: #CC5500CC;
}
.scene-stop {
	background-color: #CC0022CC;
}
.scene-console {
	background-color: #0000AACC;
}
.scene-run {
	background-color: #00CC00CC;
}

/* what is this leon??? */
.box {
  background-color: #303030;
  padding: 10px 5px;
}
/* task progress */
.taskProgress {
  font-size: .9rem;
  text-align: center;
  text-shadow: 2px 2px 5px gray;
}