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

header {
	background-color: slategray;
	text-align: center;
}

.name {
	padding-top: 15%;
	padding-bottom: 5%;
}

#navbar {
	background: none !important;
	padding-bottom: 10%;
}

.nav-button {
	background-color: white;
	color: black;
	border: none;
	transition: all 0.3s;
}
.nav-button:hover {
	box-shadow: 0 0.5em 0.5em -0.4em;
	transform: translate(0.25em, -0.25em);
}

.name > img {
	width: 30px;
}

.card img {
	height: 15rem;
}

.parallax {
	/* The image used */
	background-image: url("https://images.unsplash.com/photo-1546788774-2bb47f590283?ixlib=rb-1.2.1&auto=format&fit=crop&w=668&q=80");

	/* Full height */
	height: 100%;

	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

	color: white;
}

div.parallax {
	width: 50%;
}

div.parallax > div#text {
	background-color: white;
	color: black;
	height: auto;
}

div.parallax > div {
	height: 100px;
}