@import url("https://fonts.googleapis.com/css?family=Open+Sans:100,200,400,400i,700");

body {
	display: flex;
	height: 100vh;
	width: 100vw;
	background: #fffff9;
}
.card {
	width: 400px;
	height: 240px;
	margin: auto;
	background-color: #d2d2d8;
	background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 8 8"%3E%3Cg fill="%239C92AC" fill-opacity="0.14"%3E%3Cpath fill-rule="evenodd" d="M0 0h4v4H0V0zm4 4h4v4H4V4z"/%3E%3C/g%3E%3C/svg%3E');
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
	transition: 0.3333333s;
/* 	transition-timing-function: ease-in; */
	box-shadow: 1px 1px 2px #aaa;
	border-radius: 3px;
}
.card:hover{
	background-color: #d4d4da;
	box-shadow: 7px 4px 15px #aaa;
	transform: translate(-2px, -2px) rotate(-1.5deg);
	cursor: pointer;
}
.content {
	position: absolute;
	top: 44px;
	left: 90px;
	color: #828292;
	font-family: 'Open sans', sans-serif;
}
.content h2 {
	color: #efe9ca;
	line-height: 1em;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 1.6em;
	margin-bottom: 8px;
	text-shadow: -1px -1px 1px #d8d8da, 1px 1px 1px #aaa;
}
.content .job-title { 
	font-style: italic;
}
.content .contact-details {
	margin-top: 22px;
	font-weight: 100;
	line-height: 1.85em;
	font-size: 0.9em;
}
.contact-details-item:before {
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	font-size: 1.5em;
	color: #efe9ca;
	padding-right: 10px;
	text-shadow: -1px -1px 1px #d8d8da, 1px 1px 1px #aaa;
}
.email:before {
	content: "\f0e0";;
}
.phone:before {
	content: "\f095";
}
.corner {
	content: "";
	display: block;
	width: 80px;
	height: 80px;
	position: relative;
	border-radius: 50%;
	background: #efe9ca;
	transition: background 0.3333333s;
}
.top-left {
	top: -40px;
	right: 40px;
}
.top-right {
	top: -120px;
	left: 360px;
}
.bottom-left {
	top: 40px;
	right: 40px;
}
.bottom-right {
	top: -40px;
	left: 360px;
}
.corner:hover {
	background: #bfbfcf
}