/* Variables */

:root {
	--primary: #4e1d6b;
	--secondary: #d3ffe5;
	--secondary-dark: #118d70;
}

/* Utilities */

html,
body {
	background-color: var(--secondary);
}

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

a {
	color: var(--secondary-dark);
}

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

/* Logo */

.logo {
	max-width: 8rem;
}

/* Layout */

.hands {
	width: 18rem;
	height: 18rem;
	background-image: url('../images/hands.jpg');
	background-position: center;
	background-size: cover;
	border-radius: 50%;
}

.hands .icon {
	width: 5rem;
	height: 5rem;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2.5rem;
	margin: auto;
	background-color: var(--primary);
	border-radius: 50%;
}

/* Responsive */

@media (min-width: 768px) {

	.hands {
		width: 30rem;
		height: 30rem;
	}

}

@media (min-width: 992px) {

	.narrow {
		padding: 0 10rem;
	}

}