/* 
	Title: Stylesheet
	Theme: K & B Wedding 2022
	Description: Primary stylesheet for the website
*/


/* Imports */
@import '_normalize.css';
@import '_variables.css';
@import '_typography.css';


/* Resets */
* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

*::selection {
	color: var(--paper-cream);
	background: var(--floral-green);
}


/* Base */
body {
	background: var(--paper-cream);
}

.card {
	width: 49.5rem;
	height: 49.5rem;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -24.75rem auto auto -24.75rem;
	text-align: center;
}

.outer-frame {
	padding: 6.75rem 0 0 0;
	width: 36.25rem;
	position: absolute;
	z-index: var(--z-100);
	left: 50%;
	margin-left: -18.125rem;
}

.content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 6.75rem 9rem;
	position: relative;
	z-index: var(--z-200);
}

.heading {
	text-align: center;
	padding: 2.375rem 4.5rem 2rem 4.5rem;
}

.subhead {
	margin-top: 0.5rem;
}

.subhead h4, .wing {
	display: inline-block;
	vertical-align: middle;
}

.subhead h4 {
	margin: 0 0.75rem;
}

.inner-frame {
	width: 24.75rem;
	height: 11.25rem;
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin: 0 0 1.25rem 0;
}

.inner-frame h3 {
	position: relative;
	z-index: var(--z-200);
}

.footing {
	align-self: flex-end;
	display: flex;
	flex-direction: row;
	align-content: flex-end;
	align-items: center;
	margin: 8rem -3.5rem 0 0;
}



/* Buttons */
.rsvp {
	display: inline-block;
	/* align-self: flex-end; */
	padding: 1.5em 1em;
	margin: 0 0 0 1rem;
	background: var(--deco-gold);
	border-radius: 50% 45% 50% 45%;
	transition: var(--hover-trans);
}

.rsvp:hover {
	color: var(--paper-cream);
	background: var(--deco-gold-fade);
}

.underline {
	display: inline-block;
	position: relative;
}

.underline::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 2px;
	bottom: 0;
	left: 0;
	background: var(--deco-gold);
	transform: scaleX(0);
	transform-origin: bottom right;
	transition: transform 0.3s ease-out;
}

.underline:hover {
	color: var(--deco-gold);
}

.underline:hover::after {
	transform: scaleX(1);
	transform-origin: bottom left;
}


/* Graphics */
.outer-frame svg {
	width: 100%;
	height: auto;
}

.outer-frame path {
	fill: var(--floral-green);
}

.wing {
	width: 2.25rem;
	height: 0.75rem;
}

.wing path {
	fill: var(--deco-brown);
}

.inner-frame svg {
	width: 100%;
	height: auto;
	top: 0;
	left: 0;
	position: absolute;
	z-index: var(--z-100);
}

.inner-frame path {
	fill: var(--floral-green);
}

.date {
	position: absolute;
	left: 4.5rem;
	top: 13rem;
	background: var(--paper-cream);
}

.number {
	display: block;
}