@font-face {
	font-family: "poppins";
	src: url("https://hastigd.github.io/website-homepage/styles/fonts/poppins-medium-webfont.woff2")
			format("woff2"),
		url("https://hastigd.github.io/website-homepage/styles/fonts/poppins-medium-webfont.woff")
			format("woff");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "playfair_displayregular";
	src: url("https://hastigd.github.io/website-homepage/styles/fonts/playfairdisplay-variablefont_wght-webfont.woff2")
			format("woff2"),
		url("https://hastigd.github.io/website-homepage/styles/fonts/playfairdisplay-variablefont_wght-webfont.woff")
			format("woff");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "poppins_light";
	src: url("https://hastigd.github.io/website-homepage/styles/fonts/poppins-light-webfont.woff2")
			format("woff2"),
		url("https://hastigd.github.io/website-homepage/styles/fonts/poppins-light-webfont.woff")
			format("woff");
	font-weight: lighter;
	font-style: normal;
}
body {
	background-color: #fcf6fa;
	font-size: 1rem;
	font-family: "poppins_light";
}
/* HEADER */
header {
	margin-top: 5px;
}
header .row {
	display: flex;
	flex-direction: row;
	align-items: flex-center;
	justify-content: space-between;
}
header h2 {
	display: flex;
	padding-top: 5px;
	justify-content: center;
	margin: 0;
}
header nav {
	display: flex;
}
header .nav-left {
	justify-content: flex-start;
	align-items: center;
}
header a.nav-link {
	font-family: "playfair_displayregular";
	font-size: 18px;
	padding-top: 10px;
	padding-right: 15px;
	color: black;
}
header .nav-right {
	justify-content: flex-end;
	align-items: center;
}
header a.button {
	padding-top: 10px;
	padding-left: 15px;
	margin: 5px 5px 10px 15px;
	height: 27px;
}
header .github {
	background-image: url("https://hastigd.github.io/website-homepage/images/githubmark.png");
	width: 27px;
}
header .linkedin {
	background-image: url("https://hastigd.github.io/website-homepage/images/linkedinmark.png");
	width: 32px;
}
header .twitter {
	background-image: url("https://hastigd.github.io/website-homepage/images/twittermark.png");
	width: 33px;
}

/* BODY */
section.jumbotron {
	display: flex;
	height: auto;
	padding: 1em;
	align-items: center;
	justify-content: center;
}
section header {
	display: flex;
	padding: 1em;
	font-family: "poppins";
	text-align: center;
}
section section .row {
	display: flex;
	margin: 2em;
	flex-wrap: row;
}
section section p {
	align-items: center;
	margin: 0 1em 0 0;
}
section section h2,
h5 {
	font-family: "playfair_displayregular";
	margin-top: 0.5em;
}
section section ul {
	list-style-type: none;
	padding: 0;
}
section section li.list-group-item {
	margin: 0.25em 0 0 0;
	padding: 0.4em;
	background: rgb(224, 218, 220);
	background: rgba(224, 218, 220, 0.75);
}
/* BODY -- ABOUT */
section.jumbotron.about,
section.jumbotron.bio {
	background-color: #fcedf7;
	text-align: justify;
	align-items: center;
}
/* BODY -- COURSES */
section.jumbotron.courses {
	background-image: url("https://hastigd.github.io/website-homepage/images/flowers.jpg");
}
section.courses h2 {
	text-align: center;
}
section.courses h5 {
	font-family: "playfair_displayregular";
	text-align: center;
}
section.courses .card {
	background-color: #e3bad5;
	border: none;
	font-family: "poppins_light";
	margin: 10px;
}
section.courses img.card-img-top {
	height: auto;
	width: 30%;
	border: none;
	align-self: center;
	padding-top: 1em;
}
/* BODY -- SKILLS */
section.jumbotron.skills {
	background-color: #fcedf7;
	background-size: cover;
}
section.skills {
	align-items: flex-start;
}
section.skills div.skills {
	background-image: url("https://hastigd.github.io/website-homepage/images/flowers3.jpg");
	max-width: 100%;
	padding: 1em;
}
section.skills #watermelon {
	margin-top: 1em;
	width: 150px;
	transform: rotate(-40deg);
}
/* BIO -- BODY */
section.bio div.work-history {
	background-image: url("https://hastigd.github.io/website-homepage/images/flowers2.jpg");
	max-width: 100%;
	padding-bottom: 1.5em;
	margin-top: 1em;
}
section.jumbotron .strong {
	font-family: "poppins";
	font-size: 20px;
}
section.contact form {
	padding-top: 0.5em;
}
section.contact .form-group button {
	background-color: #cf337d;
	margin-top: 1em;
}