html, body {
    padding:0;
    margin:0;
    background-color:dodgerblue;
    min-width:1080px;
    background-image:url(bgblue.png);
    background-size:125%;
}

canvas {
	max-width:100%;
}

.demo {
	text-align:center;
	padding:16px 8px;
	background-color:rgb(64,161,255);
}
#canvass {
	background-color:black;
}

.hidden-desktop {
	display:none;
}
.hidden-mobile {
	display:block;
}

form.automata-settings {
	display:block;
	width:640px;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	color:white;
}

form.automata-settings > div {
	display:inline-block;
	text-align:left;
}

form.automata-settings label {

	margin:0 5px;
	display:inline-block;
}

form.automata-settings input[type="button"] {
	border:2px solid rgb(24,121,215);
	margin-top:4px;
	padding:3px 12px;
	border-radius:12px;
	background:rgb(44,141,235);
	color:white;
	margin-top:4px;
}

.mobileblock {
		display:none;
	}
	
	.mobileinline {
		display:none;
	}
	
	.mobileinlineblock {
		display:none;
	}

.container-block {
    width:100%;
    padding:0 16px;
    box-sizing:border-box;
}

.container-block.header {
    padding: 4px 12px;
}

.column-auto {
    display:inline-block;
    vertical-align: top;    
}

.column-25 {
    display:inline-block;
    max-width:25%;    
    min-width:25%;    
    vertical-align: top;
}
.column-10 {
    display:inline-block;
    max-width:10%;    
    min-width:10%;    
    vertical-align: top;
}
.column-50 {
    display:inline-block;
    max-width:50%;    
    min-width:50%;   
    
}
.title.column-auto {
    margin-right:16px;
}

.column-50.subtitle, .column-10.title {
    vertical-align:unset;
}

.header {
    background-color:white;
    box-sizing:border-box;
}

h1 {
    font-family: 'Viga', monospace;
    letter-spacing:1px;
}
h2 {
    font-size:1.25em;
    font-family: 'Jura', sans-serif;
}

h1, h2, h3 {
    margin:0;
    color:dodgerblue;
}
.nav.row {
    /*padding: 0 16px;*/
    
}
.main-nav ul {
    padding: 0 0;
    margin-top: 4px;
    margin-bottom: 4px;
    list-style-type: none;
    color: white;
    background-color: rgb(22, 127, 231);   
}

.main-nav li {
    display: inline-block;
    /* border: 4px solid white; */
    padding: 4px 24px;
    margin-right: 8px;
    font-family: 'Jura', sans-serif;
    font-weight: bold;
    font-size: 1.15em;
    min-width:96px;
    box-sizing: border-box;
    border-radius:256px;
    color: white;
}

.main-nav li:hover {    
    cursor: pointer;
    /*background-color:rgb(2, 107, 211);*/
    background-color:rgb(4,137,234);
    color:rgb(240,255,255);
    box-sizing: border-box;
}

.main-nav li a {
    text-decoration: none;
    color: white;
}
.main-nav li a:hover {
}

.header-block {
    /*padding: 16px 16px 8px 16px;*/
    background-color: rgb(22, 127, 231);    
    border-bottom: 16px dashed rgb(4,137,234);
    
}
a {
    color:white;
    text-decoration:none;
}
.top-offset-block {
    border-top: 32px solid rgb(4,137,234);
    box-sizing:border-box;
}

.main {
    
    position: relative;
    top: -32px;
}

.columns {
    vertical-align: top;
}

.container-post {
    border:1px solid white;
    max-width: 95%;
    margin: 0 2.5% 8px 2.5%;
}
.container-block.gallery {

}
.container-sub-block {
    border:1px solid white;
}

.container-item {
    border:2px solid white;
    box-sizing: border-box;
    min-height:50px;
    min-width:100%;
    margin-bottom:6px;
}

.container-item.project {
    background-size:100%;
    padding: 16px 0 24px 0;
}
form, #colours {
    background-color: dodgerblue;
    width: 70%;
    margin:0 15%;
    padding: 16px 0;
}
.project-container {
    text-align: center;
    padding: 16px 8px;
    background-color: rgb(64,161,255);
}

.project > h3 {
    text-align: center;
    color: white;
    font-family: "Viga";
    font-weight: normal;
    font-size: 1.5em;
    margin: 4px 4px;
}

.side-header {
    font-weight: bold;
    font-family: "Viga";
    font-weight: normal;
    font-size: 1.5em;
    padding-left: 16px;
    border:2px solid white;
    box-sizing: border-box;
    margin-bottom: 6px;
    background-color: white;
}


.post-header {
    padding: 6px 12px;
    font-family: 'Jura', sans-serif;
    background-color: white;
}

.post-content {
    padding: 6px 24px;
    color:white;
}

.container-item > p {
    margin:6px 24px;
}

 p {     
    margin: 0 0 1em 0;
    font-family:'Lato', serif;
    color:white;
 }

p.box {
	padding: 0 16px;
}

.photo-item {
    margin-top:2px;
}

 .photo-item img {
    box-sizing:border-box;
    border:2px solid white;
    max-width:100%;
 }
.gallery-block {
    box-sizing:border-box;
    /*border:2px solid white;*/
    background-color:rgb(64,161,255);
    margin-bottom:8px;
    padding: 8px 4px;
    text-align: center;
}

.gallery-block h3 {
    font-family: "Viga";
    font-weight: normal;
    font-size: 1.25em;
    padding-left: 16px;
    color:lightcyan;
}

.gallery-block .gallery-photo-item:nth-child(2n) {
    margin-right:5%;
    margin-left:2.5%;
}

.gallery-photo-item {
    display:inline-block;
    max-width:45%;    
    vertical-align: middle;
    margin-bottom: 12px;
    margin-top:12px;
    margin-right:2.5%;
}

 .gallery-photo-item img {
    box-sizing:border-box;
    border:1px solid rgba(0,0,0,0.5);
    
    box-shadow: 6px 6px 6px 0px rgba(0,0,128,0.45);
    max-width:100%;
 }

 .photo-item.half {
     max-width:40%;
     display:inline-block;
 }
 
.warning {
    background-color:red;
    color:white;
    padding:4px 8px 5px 8px;
    box-sizing:border-box;
    margin:0 16px 6px 16px;
    text-align: center;
    font-family: "Viga";
    font-weight:normal;
    font-size:1.25em;
}

 .nerd {
    position: fixed;
    bottom: 0px;
    padding: 16px;
 }

 #colours > input {
    width: 100px;
 }

 #save, #download, #databox {
     display:none;
 }

 .btnlink {
    background-color: white;
    color: RGB(64,161,255);
    padding: 4px 16px;
    border-radius: 32px;
    border: white outset;
    font-family: 'Viga', sans-serif;
    display:block;
    width:200px;
    margin-left:auto;
    margin-right: auto;
 }
.project-container p {
    padding: 0 16px;
}

.project-container img, .container-block > img {
    width: 50%;
    margin-left:25%;
    margin-right:25%;
    box-sizing: border-box;
    border: 1px solid rgba(0,0,0,0.5);
    box-shadow: 6px 6px 6px 0px rgba(0,0,128,0.45);
    background-color:dodgerblue;
}

img.item {
    border: 1px solid rgba(0,0,0,0.5);
    box-shadow: 6px 6px 6px 0px rgba(0,0,128,0.45);
    box-sizing:border-box;
}
p.padded-sides {
    padding:0 16px;
    box-sizing:border-box;
}
 .left {
     text-align: left;
 }
 
 /**************Games Shelf Page v1****************/
 /*
 .system-table {
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;	
	justify-content:center;
	margin-bottom:8px;
 }
 
 .game-system {
	background-color:white;
	box-sizing:border-box;
	padding-left:16px;
	flex-basis:100%;
	text-align:left;
 }
 
 .game-entry {
	border:1px solid white;
	max-width:300px;
	box-sizing:border-box;	
	margin:4px 4px;
	display:flex;	
	flex-direction:column;
	font-size:0.9em;	
	padding-bottom:4px;
 }
 
 .game-title {
	background-color:white;
	text-transform:uppercase;
	font-family: "Viga";	
	padding:0 8px;
 }
 
 .game-developer, .game-publisher {	
	box-sizing:border-box;	
	text-align:left;
	padding-left:8px;
	padding-right:8px;
	font-size:0.9em;
	
 }
 
 .publisher-body, .developer-body {
	box-sizing:border-box;
	padding-left:8px;
 }
 */
 
 /*****************GAMES SHELF V2******************/
 
.system-table {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-evenly;
	border: 1px solid white;
	margin-bottom:8px;
	padding-bottom:4px;
}

.game-entry {	
	display:inline-flex;	
	border:1px solid white;
	box-sizing:border-box;	
	background-color:rgba(255,255,255,0.8);
	flex-basis:30%;
	flex-direction:column;
	font-size:0.9em;	
	justify-content:center;
	margin-top:4px;
	margin-bottom:4px;
	
	
 }
 
 .game-system {
	background-color:white;
	box-sizing:border-box;
	padding-left:16px;
	flex-basis:100%;
	text-align:left;	
	margin-bottom:4px;
 }
 
 .game-publisher, .game-developer {
	display:none;
 }
 
 
 
 .game-title {	
	text-transform:uppercase;
	font-family: "Viga";	
	font-size:0.8em;
	padding:0 8px;
	writing-mode:lr-tb;
	/*
	transform:rotate(-90deg);
	transform-origin: 0px;
	*/
 }
 
 .system-ps2 {
	background-color:rgb(0,12,128);	
	color:rgb(0,12,128);
}
.system-ps2 h2 {
	color:rgb(0,12,128);
}

.system-gba, .system-gamecube {
	background-color:rgb(128,12,128);
	color:rgb(128,12,128);
}

.system-gba h2, .system-gamecube h2 {
	color:rgb(128,12,128);
}

.system-snes {
	background-color:rgb(192,12,12);
	color:rgb(192,12,12);
}

.system-snes h2 {
	color:rgb(192,12,12);
}

.system-ps1 {
	background-color:rgb(192,192,192);
	color:rgb(96,96,96);
}

.system-ps1 h2 {
	color:rgb(96,96,96);
}

.system-xbox360{
	background-color:rgb(0,0,0);
	color:rgb(12,160,12);
}

.system-xbox360 h2{
	color:rgb(12,192,12);
}

.system-xbox360 .game-entry {
	background-color:white;
}

.system-xbox {
	background-color:rgb(0,0,0);
	color:rgb(12,160,12);
}

.system-xbox h2 {
	color:rgb(12,192,12);
	background-color:black;
	border-bottom:1px solid white;
}

.system-xbox .game-entry {
	background-color:rgb(0,0,0);
}

.system-zxspectrum {
	background-color:rgb(0,0,0);
	color:rgb(255,255,255);
}

.system-zxspectrum h2 {	
	color:rgb(255,255,255);
	background-color:rgb(32,32,32);
}

.system-zxspectrum .game-entry {
	background-color:rgb(0,0,0);
}

.system-ps3, .system-psp {
	color:white;
	background-color:rgb(32,32,32);
}

.system-ps3 h2, .system-psp h2 {
	color:black;
}

.system-ps3 .game-entry, .system-psp .game-entry {
	background-color:rgb(16,16,16);
}

.system-ps4 {
	color:white;
	background-color:rgb(16,16,128);
}

.system-ps4 h2 {
	color:black;
}

.system-ps4 .game-entry {
	background-color:rgb(16,16,64);
}

.system-switch {
	color:rgb(0,0,0);
	background-color:rgb(192,12,12);
}

.system-switch h2 {
	color:rgb(192,12,12);
}

.system-switch .game-entry {
	background-color:rgb(12,192,224);
}

.system-mastersystem {
	color:rgb(0,0,0);
	background-color:rgb(240,240,240);
}

.system-mastersystem h2 {
	color:rgb(192,12,12);
	background-color:rgb(224,224,224);
}

.system-mastersystem .game-entry {
	background-color:rgb(224,224,224);
}

.system-3ds {
	color:rgb(255,255,255);
	background-color:rgb(12,192,192);
}

.system-3ds h2 {
	color:rgb(255,255,255);
	background-color:rgb(32,32,32);
}

.system-3ds .game-entry {
	background-color:rgb(6,96,96);
	border-color:black;
}

.system-pc {
	color:rgb(0,0,0);
	background-color:rgb(182,187,183);
}

.system-pc h2 {
	color:rgb(255,255,255);
	background-color:rgb(0,5,111);
}

.system-pc .game-entry {
	background-color:rgb(182,187,183);
	border-style: outset;
	border-right-color:	black;
	border-bottom-color: black;
}

.system-wiiu {
	color:rgb(255,255,255);
	background-color:rgb(4,150,217);
	border-color:black;
}

.system-wiiu h2 {
	color:rgb(255,255,255);
	background-color:rgb(32,32,32);
}

.system-wiiu .game-entry {
	background-color:rgb(32,32,32);
	border-color:black;
}

.system-genesis {
	color:rgb(0,0,224);
	background-color:rgb(0,0,0);
	
	letter-spacing:1px;
	font-family:sans-serif;
	font-weight:bold;
	text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

.system-genesis h2 {
	color:rgb(0,0,224);
	background-color:rgb(0,0,0);
	text-transform:uppercase;
	text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
	font-weight:bold;
	letter-spacing:1px;
	font-family:sans-serif;
	border-bottom:1px solid white;
	padding-top:1px;
	padding-bottom:1px;
}

.system-genesis .game-entry {
	background-color:rgb(0,0,0);
	font-size:1em;
	border-color:rgb(32,32,32);
	padding:1px 0;
}

.system-nds {
	color:rgb(0,0,0);
	background-color:rgb(224,224,224);
	border-color:black;
}

.system-nds h2 {
	color:rgb(0,0,0);
	background-color:rgb(255,255,255);
}

.system-nds .game-entry {
	background-color:rgb(192,192,192);
	border-color:black;
}

.system-dreamcast {
	color:rgb(0,0,0);
	background-color:rgb(208,48,8);
}

.system-dreamcast h2 {
	color:rgb(255,255,255);
	background-color:rgb(56,119,195);
}

.system-dreamcast .game-entry {
	background-color:rgb(255,255,255);
	border-color:black;
}

.system-wii {
	color:rgb(128,128,128);
	background-color:rgb(255,255,255);
}

.system-wii h2 {
	color:rgb(128,128,128);
}

.system-wii .game-entry {
	border-color:rgb(128,128,128);
}

.system-gameboy {
	color:rgb(128,128,128);
	background-color:rgb(15,56,15);	
	border-color:rgb(224,224,224);
}

.system-gameboy h2 {
	color:rgb(32,32,32);
	background-color:rgb(224,224,224);
	
}

.system-gameboy .game-entry {
	/*background-color:rgb(139,172,15);*/
	background-color:rgb(48,98,48);
	color:rgb(155,188,15);
	border-color:rgb(139,172,15);
}

/** GBC Logo/Console original colours
Pink: 		rgb(184,5,69);
Lavender: 	rgb(82,85,165);
Green: 		rgb(121,173,54);
Dandelion: 	rgb(221,177,10);
Coral: 		rgb(0,149,138);

**/
.system-gameboycolor {
	color:rgb(128,128,128);
	background-color:rgb(121,173,54);	
	border-color:rgb(203,12,76);
}

.system-gameboycolor h2 {
	color:rgb(255,255,255);
	background-color:rgb(203,12,76);
	
}

.system-gameboycolor .game-entry {
	/*background-color:rgb(139,172,15);*/
	background-color:rgb(82,85,165);
	color:rgb(221,177,10);
	border-color:rgb(82,85,165);
}