html,body {
	margin: 0;
	padding: 0;
}

html {
	--one: 		#f4607b;
	--two: 		#f99e85;
	--three: 	#f6d781;
	--four: 	#78c681;
	--five: 	#5a9ad6;
	--six: 		#594ead;
	border: 6px dashed var(--one);
	background: url(raster.gif) no-repeat;
}

body {
	border: 6px dashed var(--five);
	padding-left: 50px;
}

a {
	color: var(--five);
	
	&:visited {
		color: var(--six);
	}
	
}

p.browser {
	background: white;
	width: fit-content;
	
	& span {
		font-size: 110%;
		color: var(--six);
	}
}

#writeroot {
	padding: 1em;
	background: var(--three);
	margin-top: 10px;
	max-width: max-content;
	
	div {
		display: contents;
	}

	h4 {
		grid-column: 1 / -1;
		margin: 0;
		margin-top: 0.75em;
		margin-bottom: 0.25em;
		text-align: center;
		cursor: pointer;
	}

	
	& dl {
		display: grid;
		grid-template-columns: repeat(2,max-content);
		gap: 0.25em 1em;
	}
	
	& dt {
		text-align: right;
	}
	
	& dd {
		margin: 0;
	}
}

p.tests {
	margin-top: 0;
	font-size: 90%;
	background: white;
	width: fit-content;
}


.query {
	display: none;
}

li {
	margin-bottom: 10px;
}

div.layoutMeasurer {
	position: fixed;
	top: 0;
	left: 0;
	background: var(--one);
	color: white;
	padding: 0.3em;
	
	&.two {
		top: auto;
		left: auto;
		bottom: 0;
		right: 0;
	}
}

div.stretcher {
	background: var(--four);
	margin-top: 1em;
	padding: 0.5em 1em;
	box-sizing: border-box;
	width: max-content;
}

button.testButton {
	background: var(--three);
}

button.stretch {
	background: var(--four);
}

h2 {
	clear: left;
}