$purple: #563d7c;
$gold: #fdd017;
$lightgray: #f8f8f8;
$midgray: #969499;
$darkgray: #4b4a4d;
$text: #252526;
$shadowgray: rgba(0, 0, 0, .8);
$lightshadowgray: rgba(0, 0, 0, 0.2);

// size constants
$pad-s: 2px;
$pad-m: 8px;
$pad-l: 16px;
$pad-xl: 36px;

html,
body {
	background-color: $lightgray;
	color: $text;
	font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;
	height: 100vh;
	margin: 0;
	padding: 0;
	width: 100vw;
}

body {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}


.nav {
	align-items: center;
	box-shadow: 0px 3px 12px $shadowgray;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex: 0 0 auto;
	height: 50px;
	padding: $pad-l;
	background-color: $purple;
	color: $gold;
	z-index: 10;

	h3 {
		font-weight: normal;
		font-size: 16px;
		margin: 0;
	}

	a {
		color: $gold;
		text-decoration: none;
		font-size: 16px;
		margin-left: $pad-m;
		&:hover {
			color: darken($gold, 20%);
			text-decoration: initial;
		}
	}
}

.content {
	align-items: center;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	position: relative;
	overflow-y: auto;
	min-height: 1;
}

.container {
	background-color: #fff;
	box-shadow: 0px 3px 12px $lightshadowgray;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	min-height: 1;
}

.btn {
	background-color: #fff;
	border-radius: $pad-s;
	border: 1px solid $midgray;
	box-sizing: border-box;
	color: $purple;
	cursor: pointer;
	display: inline-block;
	font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;
	font-size: 12px;
	font-weight: normal;
	padding: $pad-m $pad-l;
	text-decoration: none;
	vertical-align: middle;
	white-space: nowrap;
	

	&:hover {
		background-color: lighten($purple, 35%);
	}
}