/* Variables */

:root {
	--primary: #70a7ca;
	--light: #fdf5e3;
  --dark: #2d2d2a;
}

/* Utilities */

html,
body {
	background-color: var(--light);
	background-image: url('../images/pattern.png');
}

body {
	color: var(--dark);
  font-size: 18px;
  line-height: 1.6em;
  font-weight: 300;
  font-family: 'Karla', sans-serif;
}

a,
.highlight {
	color: var(--primary);
}

a:hover,
a:focus {
	color: var(--primary);
}

.main-title {
	font-size: 3rem;
}

/* Logo */

.logo {
	width: 100%;
	max-width: 3rem;
}

.logo-title {
	width: 100%;
}

/* Layout */

.intro {
	padding-top: 4rem;
}

.coast {
	width: 18rem;
	height: 18rem;
	background-image: url('../images/coast.png');
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

/* Responsive */

@media (min-width: 768px) {

	.logo-title {
		width: auto;
	}

	.intro {
		padding-top: 5.5rem;
	}

	.coast {
		width: 24rem;
		height: 24rem;
	}

}

@media (min-width: 992px) {

	.narrow {
		padding-right: 13rem;
	}

}