.code-scroll{
  height:850px;
   overflow-y: scroll;
}

.a-title{ 
  font-family:arial; 
  text-align:right;
  font-weight: bold; 
  margin-right: 20px; 
}
.an-explantion{ 
  font-family:arial; 
  text-align:center;
  font-weight: bold;
  background-color: #dddddd; 
  margin-right: 20px;
}
#explanation-text{
  padding-left: 8px;
  font-size: 14px;
  font-family: arial;
}
#console-log{
  font-family: 'Inconsolata', monospace;  
  background-color: #eeeeee;
}
#js-fiddles{ 
  float:left;  
  font-size:14px;
  background-color: #cccccc; 
  font-family: 'Inconsolata', monospace;  
}
#js-code{
  white-space: pre; 
  font-family: 'Inconsolata', monospace;  
  tab-size: 4;
  -moz-tab-size: 4;
  margin-left: 8px;
  overflow-x:auto; 
}
#js-files{
  padding-left: 8px; 
}
#log-text{
  padding-left: 8px; 
}
#the-explanation{
  float:right; 
  background-color: #dddddd; 
  height:98vh;
}
ul{
  padding-left: 16px; 
  margin-top:0px; 
}
li{
  padding-top:6px;
} 

.blue-explanation{ color: rgb(0, 0, 255); font-weight: bold; }
.red-explanation{ color: rgb(255, 0, 0); font-weight: bold; }
.green-explanation{ color: rgb(0, 128, 0); font-weight: bold; }

.font-1{ font-family:arial}
.text-2{ font-family: 'Inconsolata', monospace;   }


.text-1{ color:red; font-weight: bold; }
.text-2{ color: rgb(0, 0, 255); font-weight: bold; }
.text-3{ color: rgb(0, 128, 0); font-weight: bold; }
.text-4{ color: #800080; font-weight: bold; }
.text-5{ color: #FF00FF; font-weight: bold; }
.text-6{ color: #000000; font-weight: bolder; }
.back-1{ background-color: rgb(215, 215, 215); }
.back-2{ background-color: rgb(230, 255, 230); }
.back-3{ background-color: rgb(230, 230, 255); }
.back-4{ background-color: rgb(255, 255, 160); }
.back-5{ background-color: rgb(255, 220, 255); }
.back-6{ background-color: rgb(200, 255, 255); }

.text-7{ color: rgb(145, 145, 145); }
.text-8{ color: rgb(135, 135, 135); }
.text-9{ color: rgb(115, 115, 115); }


pre{
  background-color: #eee; 
  margin-top:4px;
  margin-left:10px;
  margin-right:10px; 
  margin-bottom:16px;
}

.floating_li{
  float:left;
  margin-right: 36px;
}

span{
  overflow-wrap:anywhere;
}

.purp-similar {
  color:#800080;
  font-weight: bold;
}

table{
  table-layout: fixed;
  width: 570px
}

table, th, td {
  border: 1px solid grey;
  border-collapse: collapse;
  font-weight: normal;
  /* overflow: hidden; */
}

.git-hub{
  position:absolute;
  font-family:arial; 
  right:1%;
}

#js-div{
  float:left;
  height:98vh;
  position:relative;
}

.console-runnable{
  background:#e0ffe0;
}

td.nice-top{
  text-align: center;
  width:12%;
}

td.nice-middle{
  text-align: center;
}