body,
html {
	height: 100%;
}

body {
	margin: 0 auto;
	padding: 0 $padding;
	position: relative;
	max-width: 80em;
}

body > header {
	background: $color-link;
	text-align: center;
	border-radius: 0 0 $padding $padding;
	margin: 0;

	h1 {
		margin: 0;
		font-size: 175%;
		color: $color-bg;

		span {
			color: $color-bg-tint;
		}
	}

	a {
		text-decoration: none;
		color: inherit;
	}
}

body > header,
#tree,
.user {
	margin-bottom: $padding;
}

#tree,
.user,
.node__body {
	border: 1px solid $color-border;
	border-radius: ($padding / 2) ($padding / 2) 0 0;
}

@media print {
	#tree, #user {
		border: 0;
	}
}

#tree {
	background: $color-bg;
	padding: $padding;
}

@media screen and (min-width: 40em) {
	body {
		display: grid;
		grid-template-rows: min-content 1fr;
		grid-template-columns: 3fr 2fr;
		grid-gap: $padding;
	}

	body > header {
		grid-row: 1;
		grid-column: 1 / 3;
	}

	#tree {
		grid-row: 2;
		grid-column: 1;
		overflow-y: auto;
	}

	.user {
		grid-row: 2;
		grid-column: 2;
		align-self: flex-start;
	}
}