html, body {
	font: 14px/1.21 'Helvetica Neue', arial, sans-serif;
	font-weight: 400;
}

h1 {
	text-align: center;
}

section, form {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(50px, auto);
}

.search-form .mdc-text-field {
	grid-column: 1/7;
	grid-row: 1;
}

.search-form .mdc-text-field::after {
	display: none;
}

.search-form .mdc-text-field::before {
	display: none;
}

.search-form .source-picker {
	grid-column: 1/7;
	grid-row: 2;
}

.search-form .mdc-form-field.passage-slider {
	grid-column: 1/7;
	grid-row: 3;
}

.search-form .mdc-linear-progress {
	grid-column: 1/7;
	grid-row: 4;
}

.search-form .mdc-typography {
	grid-column: 1/7;
	grid-row: 2;
}

main p {
	text-align: center;
}

.results .result-document {
	grid-column: 1/7;
}

.result-document .mdc-elevation {
	padding: 1em;
	border-radius: 10px;
}

.snippet-display {
	box-shadow: 1px 2px 8px;
	border-radius: 8px;
	margin: 20px 0;
}

.snippet-display img {
	max-width: 100%;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.region-img-container {
	display: inline-block;
	position: relative;
}

.metadata {
	text-align: left;
}

.highlightable {
	padding: 0 5px 0.5em 5px;
}

.highlightable em {
	background-color: hsla(50, 100%, 50%, 50%);
	font-style: normal;
}

.snippet-display .highlight-box {
	padding: 0px 4px 4px 0px;
	border-radius: 5px;
	box-shadow: 3px 3px 3px;
}

a {
    text-decoration: none;
    color: black;
    text-shadow: 1px 1px 3px darkgrey;
}

@media only screen and (min-width: 720px) {
	.search-form .mdc-text-field {
		grid-column: 2/6;
	}

	.search-form .source-picker {
		grid-column: 2/6;
	}

	.search-form .mdc-form-field.passage-slider {
		grid-column: 2/6;
	}

	.search-form .mdc-linear-progress {
		grid-column: 2/6;
	}

	.search-form .mdc-typography {
		grid-column: 2/6;
	}


	.results .result-document {
		grid-column: 2/6;
	}
}
