*{
    margin: 0;
    padding: 0;
    font-family: "Consolas";
}

canvas{
	border:1px solid black;
	margin-left:auto;
	margin-right:auto;
	top:0;
	left:0;
}

.section{
	margin:5px;
}

.anchor{
	margin-bottom:100px;
}

.anchor .anchor{
  margin-bottom: 0px;
}

ul.table{
	padding:5px;
	padding-left:20px;
}

ul.mainTable > li{
  margin-top: 15px;
  margin-bottom: 0px;
}

ul.projects li{
	list-style:none;
}

ul.nav a{
	color:white;
}

ul.nav a:hover li{
	text-decoration: underline;


}

ul.nav{
	list-style: none;
	width: 100%;
}

ul.nav li{
	display: inline-block;
	padding:20px;
}

ul.nav li.current{
	color:#292929;
	background-color: white;
}

.section ul{
	margin:5px;
	padding-left:15px;
	font-weight:normal;
	font-size:16px;
}
.section ul li{
  margin-left: 20px;
}

.section ul li.name{
	font-weight:bold;
	font-size:20px;
	margin-top:15px;
}

.section ul li.name:first-child{
	margin-top:10px;
}

.section ul li.desc{
	list-style:none;
	margin-top:2px;
	margin-bottom:30px;
}

.section h3{
  display: inline-block;
  font-size: 22px;
  border-bottom: 2px solid #ccc;
  margin-top: 10px;
}

h1{
    font-size: 32px;
}

h2{
    font-size: 24px;
}

.section h2{
	padding-bottom:5px;
	border-bottom:2px solid #ccc
}

p,label{
    font-size: 16px;
}

body{
    width: 100%;
    min-height: 100%;
}

main{
    margin: 20px;
	margin-top:0;
	padding-top:20px;
}

header{
	display: inline-block;
    background-color: #292929;
    color: white;
	padding:2px 0;
	width: 100%;
	margin:none;
	z-index:10;
}

footer{
    width: 100%;
    display: inline-block;
    background-color: #292929;
    color: white;
    padding: 10px 0;
    bottom: 0;
	z-index:10;
}

footer small{
	padding-left:20px;
}

a{color: #f02850;}
a:visited{color: #f02850;}

footer a{color: #f02850;}
footer a:visited{color: #f02850;}

header h1{
    display: inline-block;
    border-bottom: 1px solid white;
    margin-right: 15px;
}

.inv{
	display:none;
}

/* Tutorials page */

.steps{
	list-style: numbered;
}

.steps li{
	padding: 2px;
	max-width: 50%;
}

.section .big-steps{
	list-style: numbered;
	padding-left: 0;
}

.big-steps h2{
	margin-top: 20px;
}

.big-steps li{
	display: inline-block;
	max-width: 50%;
}

.big-steps li p{
	padding: 20px 0;
}

code{
	background-color: #ccc;
	white-space: break-spaces;
	display: inline-block;
	margin-bottom: 20px;
}

.editorLoad{
	padding: 10px;
}

.showEditorContainer{
	text-align: right;
}
.showEditor{
	padding: 10px;
}

.editor__wrapper.tutorial{
	display: none;
}

.editorTutorial{
	position: fixed;
	height: 60%;
	top: 0%;
	right: 1;
}

.editorTutorial .editor__wrapper{
	height: 75%;
}

/* back to top button */
.back-to-top {
    display: block;
    position: fixed;
    right: 0;
    bottom: 1rem;
    font-size: black;
    background: #111;
    color: white;
    padding: 1rem;
    border: none;
    cursor: pointer;
    opacity: 100%;
    transition: opacity 0.2s;
    z-index: 100;
}

.back-to-top:hover {
opacity: 50%;
}