@import url("https://fonts.googleapis.com/css?family=Oswald:400,700");

html {
	background-color: #333;
}
:root {
	--level-one: translateZ(3rem);
	--level-two: translateZ(6rem);
	--level-three: translateZ(9rem);

	--fw-normal: 400;
	--fw-bold: 700;

	--clr: #2e3033;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
}

body {
	height: 110vh;
	display: grid;
	place-items: center;
	font-family: "Oswald", sans-serif;
}

.card {
	width: 900px;
}

.card__content {
	text-align: center;
	position: relative;
	padding: 15em 5em;
	transition: transform 3s;
	background: pink;
	transform-style: preserve-3d;
}

.card:hover .card__content {
	transform: rotateY(0.5turn);
}

.card__front,
.card__back {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 5em 3em;
	backface-visibility: hidden;
	transform-style: preserve-3d;
	display: grid;
	background-color: antiquewhite;
	align-content: center;
}

.card__front {
	background-color: var(--clr);
	/*background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/fair.jpg);*/
	background-image: url("./img/SaveTheDate_web.jpg");
	background-size: cover;
	background-blend-mode: normal;
	color: #333;
}

.card__front::before {
	content: "";
	position: absolute;
	--spacer: 0em;
	top: var(--spacer);
	bottom: var(--spacer);
	left: var(--spacer);
	right: var(--spacer);
	border: 3px solid white;
	transform: var(--level-one);
}
.card__phrase {
	width: 840px;
	/*background-image: url("./img/wolf_landscape_sun.png");*/
	transform: var(--level-three);
	order: 2;
}
/*.card__title {
	font-size: 3.5rem;
	transform: var(--level-three);
	order: 2;
	text-transform: uppercase;
}*/

.card__subtitle {
	transform: var(--level-two);
	text-transform: uppercase;
	letter-spacing: 4px;
	font-size: 0.75rem;
	font-weight: var(--fw-bold);
	opacity: 0.7;
}

.card__body {
	transform: var(--level-two);
	font-weight: var(fw-normal);
	font-size: 1.5rem;
	line-height: 1.6;
}

.card__back {
	transform: rotateY(0.5turn);
	color: var(--clr);
	background-color: antiquewhite;
}