body {
	background-color: #21212c;
	color: #e6e6e6;
}

h1 {
	font-size:40px;
	font-family: Didot,Didot LT STD,Hoefler Text,Garamond,Times New Roman,serif; 
}

h2 {
font-family: Futura,Trebuchet MS,Arial,sans-serif; 
font-size:24px;
padding: 0px;
margin: 0px;
color: #FFFFFF;
text-shadow: 2px 2px 8px #404040;
}

h3 {
font-size:18px;
padding: 5px;
margin: 0px;
font-family: Futura,Trebuchet MS,Arial,sans-serif; 
}

a:link {
	color: #ffcc33;
}

a:visited {
	color: #d4a411;
}

input[type=number] {
	width: 40px;
	
}
/* Remove little arrows on number inputs */
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

input[type="number"] {
    -moz-appearance: textfield;
}

button {
	background-color: #d4a411;
	color: #21212c;
	border: none;
	/* padding: 0px 15px; */
	/* margin: 5px; */
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
}

.removeBtn {
	background-color: #9c9cc9;
	color: red;
	clear: left;
	margin-top: 2px;
	margin-right: 10px;
	float: left;
}

.removeBtn:hover {
	background-color: red;
	color: black;
}

.floatBox {
	float: left;
}

.highlight {
	color: blue;
	padding-left: 40px;
	padding-top: 10px;
}

.codeinput {
    font-family: Courier;
	color: navy;
	margin-left: 15px;
}

.return {
	color: teal;
}

.des {
	font-family: verdana;
	font-size: 90%;
	padding-left: 5px;
	color: navy;
}

.opt {
	color: #707070;
}


.fullBox {   
  float: left;
  background-color: #9c9cc9;
  width: 96%;
  margin-top: 20px;
  margin-left: 20px;
  border-radius: 5px;
  padding: 10px;
}

.subBox {   
  float: left;
  background-color: #424257;
  width: 96%;
  clear: both;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  border-radius: 5px;
  padding: 10px;
}

.floatBox {   
  float: left;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

canvas {
	margin-left: 10px;
    margin-top: 10px;
    /* To centre the canvas within the parent element*/
	/* margin-left: auto; */ 
    /* margin-right: auto; */
    display: block;
}
.leftcolumn {   
  float: left;
  background-color: #808080;
  width: 30%;
}

/* Centre column */
.centrecolumn {
  float: left;
  width: 30%;
  background-color: #606060;
  padding-left: 20px;
}


/* Right column */
.rightcolumn {
  float: left;
  width: 30%;
  background-color: #404040;
  padding-left: 20px;
}

.lefthalf {   
  float: left;
  background-color: #808080;
  width: 45%;
}


.righthalf {
  float: left;
  width: 45%;
  background-color: #606060;
  padding-left: 20px;
}

/* when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1000px) {
  .leftcolumn, .centrecolumn, .rightcolumn {   
    width: 50%;
    padding: 0;
  }
}

@media screen and (max-width: 500px) {
  .leftcolumn, .centrecolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}
@media screen and (max-width: 1300px) {
  .lefthalf, .righthalf {   
    width: 100%;
    padding: 0;
  }
}