@charset "utf-8";

/* Basic Styles */
* {
	box-sizing: border-box;
}

html, body {
	height: 100%;
	margin: 0;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 14px;
	line-height: 1.2;
	color: #464646;
	display: grid;
	grid-template-areas: "header" "main";
	grid-template-rows: auto 1fr;
	min-width: 360px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5rem 0;
	font-family: inherit;
	font-weight: normal;
	color: inherit;
}

/* Images */
img {
	display: block;
	max-width: 100%;
}

/* Header */
.header {
	grid-area: header;
	background-color: #fff;
	padding: .75rem 1.25rem;
	border-bottom: 1px solid #e7eaec;
	font-family: 'Caveat Brush', cursive;
	font-size: 1.75rem;
}

.header > .title {
	text-decoration: none;
	color: inherit;
}

/* Main */
.main {
	grid-area: main;
	padding: 1.25rem 1.5rem;
	background-color: #f3f3f3;
}

/* Box */
.box {
	border-top: 4px solid #e7eaec;
	padding: .75rem 1.25rem;
	background-color: #fff;
}

/* Highlighted message */
.message {
	margin: 0 0 .5rem 0;
	background-color: #f2f2f2;
	border-radius: 2px;
	padding: .5rem;
}