styles.css

body {
	font-family: 'Press Start 2P', cursive, sans-serif;
	font-size: 16px;
}

h1 {
	font-size: 4.375em;
}

h3 {
	font-size: 1.25em;
}

h5 {
	font-size: 0.875em;
}

h6 {
	font-size: 0.69em;
}

table, tr, td {
	background-color: #fff;
	border: 0.0625rem solid #ccc;
}

tr {
	height: 0.75rem;
}

td {
	width: 0.6875rem;
}

*, ::after, ::before {
	box-sizing: border-box;
}

table {
	border-collapse: collapse;
}

.header {
	position: relative;
	width: 100%;
}

.header-title {
	margin-top: 1.5rem;
	text-align: center;
}

.header-subtitle {
	margin: 1rem auto;
	margin-bottom: 5em;
	position: relative;
	width: 32rem;
}

.border-bottom {
	background-color: #000;
	border: none;
	height: 0.1875rem;
	margin: 0 auto;
	width: 34.5rem;
}

.border-bottom:last-child {
	background-color: #000;
	border: none;
	height: 0.1875rem;
	width: 35rem;
}

.container {
	margin: 0 auto;
	max-width: 1140px;
	position: relative;
	text-align: center;
}

.toggle-border {
	border: 0.0625rem solid transparent;
}

.logo-title {
	margin: 0;
}

.logo-subtitle {
	margin: 1rem 0;
}

.canvas-title {
	left: 0;
	margin: 0.15rem 0;
	position: absolute;
}

.actions {
	position: absolute;
	right: 0;
}

.how-it {
	display: inline-block;
}

/* ------------------
---- Grid/Canvas ----
--------------------- */
.canvas {
	cursor: pointer;
	display: inline-block;
	position: relative;
	text-align: center;
}

/* ------------------
------ Sidebar ------
--------------------- */
.board {
	background-color: #fff;
	border: none;
	margin: 2em 0 0 0.9em;
	padding: 1em;
	position: absolute;
	text-align: center;
	width: 23em;
	z-index: 1;
}

.board::before {
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
}

.board::after, .board::before {
	border: none;
	border-radius: 0;
	box-shadow: 0 -0.25rem #fff, 0 -0.5rem, 0.25rem 0 #fff, 0.25rem -0.25rem, 0.5rem 0, 0 0.25rem #fff, 0 0.5rem, -0.25rem 0 #fff, -0.25rem 0.25rem, -0.5rem 0, -0.25rem -0.25rem, 0.25rem 0.25rem;
	color: #212529;
	content: "";
	position: absolute;
	z-index: -1;
}

.visible-brd {
	display: none;
}

.custom-title {
	margin-bottom: -3em;
}

.picker-title {
	display: inline-block;
	margin: 1.5em -1.4em 1em 0;
}

.size-picker {
	display: none;
	margin-top: 0.5rem;
	width: 101%;
}

.picker-height, .picker-width {
	border: none;
	box-shadow: 0 0.25rem #212529, 0 -0.25rem #212529, 0.25rem 0 #212529, -0.25rem 0 #212529, inset 0.125rem 0.125rem #adafbc;
	outline: 0;
	outline-color: #212529;
	padding: 0.125rem;
	width: 3.2em;
}

.choose-title {
	margin-bottom: 1.46rem;
}

/* ------------------------
------ Color picker -------
--------------------------- */
.jscolor {
	border: none;
	color: transparent !important;
	cursor: pointer;
	height: 0.8rem !important;
	outline: none;
	position: relative;
	width: 0.8rem !important;
	z-index: 5;
}

.color-picker {
	margin: 0.9rem 0 0 14rem;
}

.drawing-title {
	margin-top: 1.5rem;
}

/* ------------------
------ Buttons ------
--------------------- */
.btn {
	background-color: #e7e7e7;
	border: none;
	color: #333333;
	cursor: pointer;
	font-family: 'Press Start 2P', cursive, sans-serif;
	font-size: 0.625rem;
	outline: none;
	padding: 1em 1em;
}

.btn:hover {
	color: #000;
}

.btn-margin {
	margin-left: -0.6em;
}

.btn-border {
	box-shadow: inset -0.25rem -0.25rem 0 #adafbc, 0 -0.25rem #000, 0.25rem 0 #000, 0 0.25rem #000, -0.25rem 0 #000;
}

.btn-border:hover {
	box-shadow: inset 0.25rem 0.25rem 0 #adafbc, 0 -0.25rem #000, 0.25rem 0 #000, 0 0.25rem #000, -0.25rem 0 #000;
}

.demo {
	background-color: #e663df;
	border: none;
	box-shadow: inset -0.25rem -0.25rem 0 #ac23a5, 0 -0.25rem #000, 0.25rem 0 #000, 0 0.25rem #000, -0.25rem 0 #000;
	color: #fff;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
}

.demo:hover {
	background-color: #d45cce;
	box-shadow: inset 0.25rem 0.25rem 0 #ac23a5, 0 -0.25rem #000, 0.25rem 0 #000, 0 0.25rem #000, -0.25rem 0 #000;
	color: #ffffff;
}

.js-settings {
	background-color: #209cee;
	box-shadow: inset -0.25rem -0.25rem 0 #006bb3, 0 -0.25rem #000, 0.25rem 0 #000, 0 0.25rem #000, -0.25rem 0 #000;
	color: #ffffff;
}

.js-settings:hover {
	background-color: #108de0;
	box-shadow: inset 0.25rem 0.25rem 0 #006bb3, 0 -0.25rem #000, 0.25rem 0 #000, 0 0.25rem #000, -0.25rem 0 #000;
	color: #ffffff;
}

.js-close {
	background-color: #108de0;
	box-shadow: inset -0.25rem -0.25rem 0 #006bb3, 0 -0.25rem #000, 0.25rem 0 #000, 0 0.25rem #000, -0.25rem 0 #000;
	color: #ffffff;
	padding: 0.35rem 0.4rem 0.4rem 0.4rem;
	position: absolute;
	right: 1em;
	top: 1em;
	width: 1.5rem;
}

.js-close:hover {
	background-color: #108de0;
	box-shadow: inset 0.25rem 0.25rem 0 #006bb3, 0 -0.25rem #000, 0.25rem 0 #000, 0 0.25rem #000, -0.25rem 0 #000;
	color: #ffffff;
}

.js-reset {
	background-color: #e76e55;
	box-shadow: inset -0.25rem -0.25rem 0 #8c2022, 0 -0.25rem #000, 0.25rem 0 #000, 0 0.25rem #000, -0.25rem 0 #000;
}

.js-reset:hover {
	background-color: #ce372b;
	box-shadow: inset 0.25rem 0.25rem 0 #8c2022, 0 -0.25rem #000, 0.25rem 0 #000, 0 0.25rem #000, -0.25rem 0 #000;
}

.js-toggle-grid {
	background-color: #92cc41;
	box-shadow: inset -0.25rem -0.25rem 0 #4aa52e, 0 -0.25rem #000, 0.25rem 0 #000, 0 0.25rem #000, -0.25rem 0 #000;
}

.js-toggle-grid:hover {
	background-color: #76c442;
	box-shadow: inset 0.25rem 0.25rem 0 #4aa52e, 0 -0.25rem #000, 0.25rem 0 #000, 0 0.25rem #000, -0.25rem 0 #000;
}

.js-save {
	background-color: #f7d51d;
	box-shadow: inset -0.25rem -0.25rem 0 #e59400, 0 -0.25rem #000, 0.25rem 0 #000, 0 0.25rem #000, -0.25rem 0 #000;
}

.js-save:hover {
	background-color: #f2c409;
	box-shadow: inset 0.25rem 0.25rem 0 #e59400, 0 -0.25rem #000, 0.25rem 0 #000, 0 0.25rem #000, -0.25rem 0 #000;
}

/* Hide save button on Firefox, IE and Edge browsers */
.js-save {
	display: none;
}

/* Supports only WebKit */
.js-save:not(*:root) {
	display: inline-block;
}

/* ------------------
------ Colors -------
--------------------- */
.color {
	border: none;
	cursor: pointer;
	display: inline-block;
	height: 0.8rem;
	outline: none;
	padding: 0;
	position: relative;
	width: 0.8rem;
}

.color-border {
	box-shadow: 0 -0.25rem #000, 0.25rem 0 #000, 0 0.25rem #000, -0.25rem 0 #000;
}

.color-border:hover {
	box-shadow: 0 -0.25rem #000, 0.25rem 0 #000, 0 0.25rem #000, -0.25rem 0 #000;
}

.white {
	background-color: #fff;
}

.black {
	background-color: #000;
}

.yellow {
	background-color: #feef47;
}

.red {
	background-color: #fa1944;
}

.green {
	background-color: #19ab21;
}

.notice {
	display: none;
}

/* -------------------------
------ Laptop/Desktop ------
---------------------------- */
@media screen and (min-width: 768px) {
	.visible-brd {
		display: block;
	}
}

/* ------------------
------ Tablet -------
--------------------- */
@media screen and (max-width: 768px) {
	.logo-title {
		font-size: 3.5rem;
	}

	.canvas-title {
		font-size: 1.25rem;
		margin-top: 0.2em;
	}

	.logo-subtitle, .notice {
		font-size: 1rem;
	}

	.border-bottom {
		max-width: 28rem;
	}

	.border-bottom:last-child {
		max-width: 28.5rem;
	}

	.header-subtitle {
		width: 29rem;
	}

	.board {
		margin-top: 1em;
		position: absolute;
	}
}

/* --------------------------------------
------ Mobile portrait orientation ------
----------------------------------------- */
@media screen and (max-width: 600px) {
	.logo-title {
		font-size: 2.4rem;
	}

	.canvas-title {
		font-size: 0.95rem;
		margin-top: 0.35rem;
	}

	.logo-subtitle, .notice {
		font-size: 0.8rem;
	}

	.border-bottom {
		max-width: 23em;
	}

	.border-bottom:last-child {
		max-width: 23.5em;
	}

	.settings {
		margin: 1.3em 0 0 0;
		position: relative;
	}

	.demo {
		font-size: 0.594rem;
		margin: 0;
		position: relative;
	}

	.js-settings {
		font-size: 0.594rem;
		margin: 0;
		position: relative;
	}

	.header-subtitle {
		width: 24.5em;
	}

	.board {
		margin: 1em 1.5em;
		width: 23rem;
	}

	.custom {
		margin-top: 0.1em;
	}

	.save {
		margin: 5em -4em;
		margin-top: -1.8em;
		position: absolute;
	}

	.close {
		padding-left: 0.6em;
	}

	.reset {
		margin: 5em -2em;
		position: absolute;
	}

	.toggle-grid {
		margin-bottom: 7em;
	}
}

/* ------------------
------ Mobile -------
--------------------- */
@media screen and (max-width: 420px) {
	.logo-title {
		font-size: 2em;
	}

	.logo-subtitle, .notice {
		font-size: 0.7em;
	}

	.demo, .js-settings, .board, .canvas {
		display: none;
	}

	.notice {
		border: solid 0.125rem #FA1944;
		display: block;
		margin-top: 5em;
		padding: 1em;
	}

	.border-bottom {
		height: 0.125rem;
		max-width: 19em;
	}

	.border-bottom:last-child {
		height: 0.125rem;
		max-width: 19.5em;
	}

	.header-subtitle {
		margin-top: 0.2em;
		width: 19em;
	}

	.canvas-title {
		font-size: 0.9rem;
		margin-top: 0.9em;
		position: relative;
	}
	
	.actions {
		margin: 0.3rem 0;
	}
}