nonogram.css

html {
	height: 100%;
}

body {
	/* line below fixed weird background issues where it wasn't stretching edge to edge*/
	margin: 0 auto;
	min-height: 100%;
	font-size: 14px;
	text-align: center;
	font-family: "Press Start 2P", cursive;
	color: yellow;
	background-color: black;
	text-shadow: #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px,
		#000 0px 0px 1px;
}

body > div {
	margin: auto;
}

video#openingVid {
	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	-ms-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	background: black;
	background-size: cover;
}

.no-small-screens {
	display: block;
}

@media only screen and (max-width: 670px) {
	.no-small-screens {
		display: none;
	}
}

@media only screen and (min-width: 800px) {
	body {
		width: 800px;
		margin: auto;
	}
}

.createUser > div {
	padding-bottom: 30px;
	line-height: 40px;
}

input {
	text-align: center;
	font-family: "Press Start 2P", cursive;
	background: transparent;
	outline: none;
	color: white;
	border: 0;
	border-bottom: 2px solid yellow;
	font-size: 18px;
}

.upload-btn-wrapper {
	position: relative;
	overflow: hidden;
	display: inline-block;
}

.btn {
	border: 2px solid yellow;
	background-color: transparent;
	padding: 8px 20px;
	border-radius: 8px;
	font-size: 20px;
	font-weight: bold;
	color: yellow;
	font-family: "Press Start 2P", cursive;
}

.upload-btn-wrapper input[type="file"] {
	font-size: 100px;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	padding-bottom: 80px;
}

.upload-submit {
	padding-bottom: 80px;
}

#header {
	display: flex;
	justify-content: center;
}

#header > div {
	height: 10vh;
	width: auto;
	text-align: center;
	font-size: 30px;
}

#main {
	height: 100%;
}

#welcomeScreenGo {
	display: flex;
	justify-content: center;
}

#menu {
	display: flex;
	justify-content: center;
}

.editorOptions {
	width: auto;
	margin-top: 2vh;
	text-align: center;
	font-size: 25px;
	line-height: 60px;
}

.back {
	font-size: 20px;
}

.boardname {
	font-size: 20px;
	line-height: 20px;
}

.centerlarge {
	font-size: 40px;
	padding-bottom: 20px;
	display: table;
	height: 90vh;
	width: 100%;
	text-align: center;
}

.centerlarge > div {
	display: table-cell;
	vertical-align: middle;
}

.centerlarge > div > div {
	padding-bottom: 120px;
	line-height: 80px;
}

.centermedium {
	font-size: 32px;
	padding-bottom: 15px;
	display: table;
	height: 80vh;
	width: 100%;
	text-align: center;
}

.centermedium > div {
	display: table-cell;
	vertical-align: middle;
}

.centermedium > div > div {
	padding-bottom: 50px;
	line-height: 60px;
}

.centermediumsmall {
	font-size: 18px;
	padding-bottom: 30px;
	display: table;
	height: 90vh;
	width: 100%;
	text-align: center;
}

.centermediumsmall > div {
	display: table-cell;
	vertical-align: middle;
}

.centermediumsmall > div > div {
	padding-bottom: 50px;
	line-height: 60px;
}

.centersmall {
	font-size: 18px;
	display: table;
	height: 90vh;
	width: 100%;
	text-align: center;
}

.centersmall > div {
	display: table-cell;
	vertical-align: middle;
}

.credits {
	font-size: 24px;
	line-height: 36px;
	padding-bottom: 15px;
	display: table;
	height: 80vh;
	width: 100%;
	text-align: center;
}

.credits > div {
	display: table-cell;
	vertical-align: middle;
}

.credits > div > div {
	padding-bottom: 50px;
}

@media only screen and (max-width: 500px) {
	.credits {
		font-size: 16px;
		line-height: 24px;
	}
}

@media only screen and (max-width: 812px) {
	.centersmall {
		font-size: 10px;
	}
}

#stats {
	line-height: 45px;
	font-size: 20px;
}

/* game headers ------------------------------------------------- */
#settings > div {
	padding-bottom: 40px;
	line-height: 24px;
}
.trackers {
	padding-right: 30px;
}

.small {
	font-size: 24px;
	padding-bottom: 10px !important;
}

.desc {
	font-size: 14px;
}

/* game board---------------------------------------------------- */

.bottom {
	z-index: 100;
}

#board {
	display: flex;
	flex-wrap: wrap;
	z-index: 0;
}

.square {
	position: relative;
	margin: 2px;
	border: 1px solid;
	box-sizing: border-box;
}

.square:hover {
	background-color: gainsboro;
}

.square::before {
	content: "";
	display: block;
	padding-top: 100%;
}

.square .content {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	/*padding-top: 50%;*/
	z-index: 0;
}

/* default CSS for 7 grids, otherwise changed in JS */
.square .top-row {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	line-height: 16px;
	padding-top: 10px;
}

/* default CSS for 7 grids, otherwise changed in JS */
.square .side-col {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	line-height: 16px;
	padding-top: 45%;
}

@media only screen and (max-width: 720px) {
	.side-col {
		font-size: 12px;
	}
	.top-row {
		font-size: 12px;
	}
}

@media only screen and (max-width: 812px) {
	.square {
		font-size: 10px;
	}
	.square .content {
		padding-top: 25%;
	}
	.square .top-row {
		padding-top: 1%;
		line-height: 12px;
	}
}

/* game animations------------------------------------------------- */
.flash1 {
	color: #ff00ff;
}
.flash2 {
	color: #00ffff;
}
.flash3 {
	color: #0087ff;
}
.flash4 {
	color: #0000ff;
}

@-webkit-keyframes levelWon {
	0% {
		background-color: black;
		opacity: 1;
	}
	25% {
		background-color: cyan;
	}
	50% {
		background-color: magenta;
	}
	75% {
		background-color: dodgerblue;
	}
	100% {
		background-color: black;
	}
}

.levelWon {
	-webkit-animation-name: levelWon;
	-webkit-animation-duration: 250ms;
	-webkit-animation-iteration-count: 4;
	-webkit-animation-timing-function: ease-in-out;
}

@-webkit-keyframes levelLost {
	0% {
		background-color: red;
		opacity: 1;
	}
	25% {
		background-color: #aa0000;
	}
	50% {
		background-color: #880000;
	}
	75% {
		background-color: #440000;
	}
	100% {
		background-color: black;
	}
}

.levelLost {
	-webkit-animation-name: levelLost;
	-webkit-animation-duration: 1000ms;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-in-out;
}

canvas,
img {
	image-rendering: optimizeQuality;
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: optimize-contrast;
	-ms-interpolation-mode: none;
}