:root {
	--background-color: #2b2b2b;
	
	--primary-color: #424242;
	
	--darkened-color: #1c1c1c;
	
	--secondary-color-default: #d9d9d9;
	--secondary-color-hover: #ffdda1;
	--secondary-color-tinted: #ffcf7a;
	--secondary-color-selected: #ffc800;
	
	--negative-color: #ff613d;
	--positive-color: #abff3d;
}

* {
	font-family: 'Font';
	src: url('font.ttf') format('truetype');
	color: var(--secondary-color-default);
}

@font-face {
	font-family: 'Font';
	src: url('font.ttf') format('truetype');
}

body {
	background-color: var(--background-color);
	margin: 0px;
}

input, button, textarea {
	position: relative;
	
	background-color: var(--secondary-color-default);
	color: var(--primary-color);
	display: inline-block;
	border: none;
	border-radius: 3px;
	padding: 7px;
	text-align: left;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	border-width: 0px;
	
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

input[type='text']:read-only {
	background-color: var(--darkened-color);
}

input:hover, button:hover, textarea:hover {
	transition-duration: 250ms;
	background-color: var(--secondary-color-hover);
	outline: none;
}


input:not([type='checkbox']):focus, button:focus, textarea:focus {
	outline: none;
}

input:not([type='checkbox']):focus:not(:read-only), button:focus, textarea:focus {
	transition-duration: 250ms;
	background-color: var(--secondary-color-selected);
}

input[type='checkbox']:checked {
	transition-duration: 250ms;
	background-color: var(--secondary-color-selected);
}