/* montserrat-700 - latin */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	src: local(''),
		 url('../fonts/montserrat-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
		 url('../fonts/montserrat-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

:root {
	--font-primary: 'Montserrat', serif;
	--color-primary: rgb(32, 33, 36);
	--color-secondary: rgb(255, 197, 131);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-primary);
	color: rgb(50, 50, 50);
	line-height: 1.8;
}

h1,
h2 {
	line-height: 1.4;
}

strong {
	font-weight: 700;
}

a:link,
a:visited {
	color: inherit;
	text-decoration-color: rgba(0, 0, 0, .3);
	transition: text-decoration-color .1s, color .1s;
	text-underline-offset: .125em;
	text-decoration-thickness: 2px;
}

p a:hover,
ul a:hover,
ol a:hover {
	color: var(--color-primary);
	text-decoration-color: var(--color-primary);
}

img {
	max-width: 100%;
}

.hero {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	height: 100vh;
	overflow: hidden;
	border-top: 4px solid var(--color-secondary);
	border-bottom: 4px solid var(--color-secondary);
	background-color: var(--color-primary);
}

.hero-title-container {
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
}

.hero-title {
	width: 92%;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.5rem;
	color: white;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.2;
}

@media(min-width: 32em) {
	.hero-title {
		font-size: 3.5rem;
	}
}