:root {
	--colour-ribbon: rgb(33, 37, 41);
	--colour-peach--dark: #F97F51;
	--colour-peach--light: #FEA47F;
	--colour-warning-red-light: #ff7675;
	--colour-grey-light:  #bdc3c7;
	--monospace-font-family: monospace;
}

* {
	transition: color ease 0.2s;
}

.unselectable {
		-webkit-user-select: none;
		user-select: none;
		cursor: default;
}

body {
	margin: 0;
	padding: 0;

	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

div#window-container {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;

	display: flex;
	flex-direction: column;
}

p#character-count {
	transition: color 100ms linear;
	color: white;
	font-weight: bold;
	margin-right: auto !important;
}

.above-limit p#character-count {
	color: var(--colour-warning-red-light);
}

/*text area*/

div#text-editor {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	position: relative;
	top: 0;

}

#blankslate, #highlighting {
	padding: 10px;
}

#blankslate, #highlighting, #highlighting>*{
	font-family: monospace;
	font-size: 1em;
	tab-size: 2;
	color:  black;

	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 10px;

	resize: none;
	box-sizing: border-box; /*prevents textarea from being a little wider than the viewport*/
	width: 100%;
	height: 100%;
	border: none;
	box-shadow: none;
	outline: none;

	overflow: auto;
	white-space: pre-wrap;

}

textarea#blankslate {
	z-index: 1;
	color: transparent;
	background: transparent;
	caret-color: black;
}

pre#highlighting {
	/*position: absolute;*/
	/*top: 0;*/
	z-index: 0;

}

/*header*/

header#ribbon {
	background-color: var(--colour-ribbon);

	display: flex;

	/*locking in sensible defaults*/
	flex-direction: row;
	flex-wrap: nowrap;
	flex-grow: 0;

	align-items: center; /*cross-axis alignment*/
	justify-content: flex-end; /*main axis alignment*/

	margin: 0;
	padding: 1em 0.5em;

	transition: background-color 0.2s;
}

@media (display-mode: standalone) { /*removes the excess top padding when operating as a standalone pwa*/
	header#ribbon {
		padding-top: 0;
	}
}

header#ribbon * {
	margin: 0;
}

header#ribbon>* {
	margin: 0 0.5em;
}

/* copy button */
.above-limit button#communik8-copy {
	color: gray;
}

/* deep links */