$main-item: #4a4;

$main-item-hover: #4af;
$main-item-active: #46c;
$main-item-disabled: #8b8;
$main-bg: #181818;
$main-page-bg: #282828;

$main-color: #cff;


body {
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	background-color: $main-bg;
	color: $main-color;

	display: grid;
	grid-template-rows: 50px auto 1fr auto;

	grid-template-columns: 20px 1fr 20px;
	
	margin: 0;
	min-height: 100vh;

}

a:visited { 
	color: #b8f;
}

nav {
	grid-column: 1 / -1;
	ul {
		list-style-type: none;
		margin: 0;
		display: grid;
		padding: 5px 25px;
		grid-gap: 5px;
		grid-template-columns: repeat(auto-fill, minmax(175px, auto));
	}
	li {
		@extend .clickable;
		padding: 8px;
	}
	a {
		font-size: 24px;
		color: #000;
		text-decoration: none;
		display: block;
		text-align: center;
		&:visited {
			color: #000;
		}
	}
}

header {
	grid-column: 1 / -1;
	background-color: $main-bg;
	padding: 0;
	h1 {
		font-size: 40px;
		margin: 0;
	}
}

footer {
	grid-column: 1 / -1;
	margin-top: 5px;
	margin-bottom: 10px;
	text-align: center;
	p {
		margin: 5px;
	}
}

main {
	padding: 0 20px;
	grid-column: 2 / -2;
	background-color: $main-page-bg;
}

.demo-render {
	margin: 20px;
	width: min-content;
	background-color: #000;
}

.controlbar {
	background-color: $main-bg;
	padding: 2px 5px;
	height: max-content;
	display: flex;
	
	justify-content: space-evenly;
	align-content: stretch;
	flex-wrap: wrap;
	
	button, input {
		@extend .clickable;
		padding: 4px 6px;
		height: 25px;
		border: 1px solid #000;
		border: 0;
		cursor: pointer;
		
		flex-grow: 1;
		margin: 2px;
	}    
	.slider {
		-webkit-appearance: none;
		-moz-appearance: none;
		outline: none;
		border-radius: 0;
		height: 25px;
		padding: 0;
		margin: 2px;
		cursor: pointer;
		
		&::-webkit-slider-thumb {
			-webkit-appearance: none;
			appearance: none;
			border-radius: 1px;
			width: 25px;
			height: 25px;
			background-color: $main-item-active;
			margin: 0;
			border-radius: 0;
			border: 1px solid #000;
		}
		&::-moz-range-thumb {
			/*TODO make this look the same as on chrome*/
			-moz-appearance: none;
			width: 25px;
			height: 100%;
			background-color: $main-item-active;
			margin: 0;
			padding: 0;
			border-radius: 0;
			border: 1px solid #000;
		}
	}
	label {
		background-color: $main-bg;
		color: #fb8;
		margin: 2px;
		font-family: 'Consolas', 'Courier New', Courier, monospace;
	}
	.play-button {
		flex-basis: 35%;
	}
}

.clickable {
	border-radius: 4px;
	background-color: $main-item;
	&:hover {
		background-color: $main-item-hover;
	}
	&:active {
		background-color: $main-item-active;
	}
	&:disabled {
		background-color: $main-item-disabled;
		text-decoration: line-through;
		color: #000;
		cursor: default;
	}
}

.scroll-reset {
	@extend .clickable;
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 40px;
	height: 40px;
	background-image: url("uparrow.png");
	cursor: pointer;
}