Snek/src/less/snek.less

// full CSS reset
@import 'fullreset.less';

// load the font
@import url('https://fonts.googleapis.com/css?family=Fira+Code:400,700&display=swap');
html {
	font-family: 'Fira Code', monospace;
}

// setup REM units
html {
	font-size: 62.5% !important;
}

// setup the colors and styles
@accentbg: #fba49b;
@bg: #ffefdf;
@accentfg: #930a16;
@fg: #23090d;

body {
	color: @fg;
	background: @bg;
}

h1, h2, h3, h4, h5, h6, strong, a {
	color: @accentfg;
	font-weight: bold;
}

h1, h2, h3, h4, h5, h6 {
	margin-bottom: .1em;
}

a {
	text-decoration: inherit;
}

em {
	font-style: italic;
}

header, footer {
	background: @accentbg;
	
	img {
		border: 4px solid @accentfg;
		border-radius: 2px;
	}
}

// setup the layout
html, body {
	display: flex;
	flex-direction: column;
	height: 100%;
}

header img, footer img {
	float: left;
	margin-right: 1rem;
}
header img {
	height: 8rem;
}
footer img {
	height: 4rem;
}

header, footer, main {
	padding: 2rem;
}
main {
	flex: 1;
	position: relative;

	canvas {
		position: absolute;
		top: 0;
		left: 0;

		background: @bg;
	}
}

h1 {
	font-size: 4rem;
}
h2 {
	font-size: 2rem;
}
p {
	font-size: 1.6rem;
}

.hidden {
	display: none !important;
}

// setup the progress bar
@import 'progressBar';

// setup the main menu
@import 'mainMenu';