body,
html{
	margin: 0;
	padding: 0;
	height:100%;
	user-select: none;
	}

html{
	font-size: 14px;
}

:root {
	--theme_color: 201;
	--color: hsl(var(--theme_color), 100%, 35%);
	--green: hsl(83, 70%, 40%);
	--red: hsl(359, 30%, 50%);
	--blue: hsl(204, 60%, 50%);
	--yellow: hsl(48, 100%, 38%);
	--grey: hsl(0,0%,42%);
	--color_background: hsl(var(--theme_color), 0%, 98%);
	--color_button_text: hsl(var(--theme_color), 0%, 100%);
	--color_foreground: hsl(var(--theme_color), 0%, 100%);
	--color_muted: hsl(var(--theme_color), 30%, 85%);
	--color_shade_1: hsl(var(--theme_color), 10%, 93%);
	--color_shade_2: hsl(var(--theme_color), 14%, 82%);
	--color_shade_3: hsl(var(--theme_color), 30%, 50%);
	--color_shadow: hsla(0,0%,0%,.25);
	--color_text: hsl(var(--theme_color), 50%, 26%);
	--color_text_light: hsla(var(--theme_color), 50%, 26%, .6);
	--space: 1rem;
	--space_double: 2rem;
	--space_half: .5rem;
	--inner_radius: .4rem;
	--outer_radius: .7rem;
	/* DEPRECATED */
	--half_space: .5rem;
	--double_space: 2rem;
	--text_color: hsl(var(--theme_color), 50%, 26%);
	--background_color: hsl(var(--theme_color), 0%, 98%);
	--foreground_color: hsl(var(--theme_color), 0%, 100%);
	--light_text_color: hsla(var(--theme_color), 50%, 26%, .6);
	--muted_color: hsl(var(--theme_color), 30%, 85%);
}

@media (prefers-color-scheme: dark) {
	:root {
		--green: hsl(83, 70%, 30%);
		--color_background: hsl(var(--theme_color), 0%, 15%);
		--color_foreground: hsl(var(--theme_color), 0%, 0%);
		--color_muted: hsl(var(--theme_color), 70%, 36%);
		--color_shade_1: hsl(var(--theme_color), 0%, 25%);
		--color_shade_2: hsl(var(--theme_color), 0%, 35%);
		--color_shade_3: hsl(var(--theme_color), 0%, 45%);
		--color_shadow: hsla(0,0%,0%,.85);
		--color_text: hsl(0, 0%, 80%);
		--color_text_light: hsla(0, 0%, 80%, .5);
		--ck-color-base-foreground: var(--color_shade_1) !important;
		--ck-color-base-background: var(--color_background) !important;
		--ck-color-base-text: var(--color_text) !important;

		/* DEPRECATED */
		--muted_color: hsl(var(--theme_color), 70%, 36%);
		--background_color: hsl(var(--theme_color), 0%, 15%);
		--foreground_color: hsl(var(--theme_color), 0%, 0%);
		--text_color: hsl(0, 0%, 80%);
		--light_text_color: hsla(0, 0%, 80%, .5);
	}
}

body{
	background: var(--background_color);
	font-size:1em;
	line-height: 1.6em;
	font-family: 'Kitbooth Sans', Myriad, Arial, sans-serif;
	cursor: default;
	color: var(--text_color);
	}

::-webkit-scrollbar {
  width: 1em;
}

::-webkit-scrollbar-track {
	background-color: var(--color_shade_1);
  border-left: 1px solid var(--color_shade_2);
}

::-webkit-scrollbar-thumb {
	background-color: var(--background_color);
	border-left: 1px solid var(--color_shade_2);
}

.light{
	color: hsl(0, 0%, 60%);

}

a{
	/* color:black; */
	cursor: pointer;
	}

a:visited{
	/* color:black; */
	}


/* NORMALIZE */

h1 {margin:0}

p {margin:0}

img {border:none}

table {border-spacing: 0;}

table td {padding: 0;}

ul { padding-left: 2em;}

button {border:none;}

/* FONT SIZE */

h1 {
	font-size: 2em;
	font-weight: bold;
}

h2 {
	font-size: 1.6em;
	font-weight: bold;
}

h3 {
	font-size: 1.3em;
	font-weight: bold;
	margin: 2em 0;
}

h4 {
	font-size: 1.3em;
	font-weight: normal;
	margin: 1em 0;
}

h5 {
	font-size: 1.15em;
	font-weight: normal;
	margin: 0 0 1em 0;
}

h6 {
	font-size: 1em;
	font-weight: bold;
	margin: 1em 0;

}

input[type=text],
input[type=password],
textarea{
	-webkit-user-select: text;
	-moz-user-select: text;
	user-select: text;
	cursor: text;
}

.selectable, pre{
	-webkit-user-select: text;
	-moz-user-select: text;
	user-select: text;
	cursor: text;
}

label,
button{
	cursor: pointer;
}

div.page{
	min-width:700px;
	/*min-height: 500px;*/
	padding: 4rem 0 1rem;
	box-sizing: border-box;
  min-height: 100%;
	}

div.sub_menu + div.page{
	padding-top: 6rem;
}

body > div.header{
	position: fixed;
	top: 0;
	z-index: 2;
	width: 100%;
	background: var(--color_shade_1);
  height: 2rem;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	padding: 0	var(--double_space);
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

body > div.header .button{
	background: none;
	color: var(--grey);
}

div.page{
	z-index: 0;
	position: absolute;
	min-width: 100%;
	box-sizing: border-box;
	display: grid;
	}

div.header h1{
	color: var(--light_text_color);
  font-size: 1.05rem;
  /* font-weight: normal; */
  line-height: 2rem;
  margin: 0;
  text-align: center;
	/* text-transform: uppercase; */
	/* letter-spacing: 0.02em; */
	}

div.header a.logo{
	height: 1.2rem;
	width: 8rem;
	display: block;
	background: url("logo_kitbooth.svg?version=1") no-repeat left;
	background-size: contain;
	}

@media (prefers-color-scheme: dark) {

	div.header a.logo{
		background-image: url("logo_kitbooth_negative.svg?version=1");

	}
}





.green{
	color:hsl(83, 72%, 36%);
}

.blue{
}

.red{
	color: hsl(359, 46%, 49%);
}

.yellow{
	color: hsl(55,100%,37%);
}