@import url('https://fonts.googleapis.com/css2?family=Hubballi&family=Text+Me+One&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css");

html {
	font-family: 'Hubballi', 'Roboto', 'Calibri', 'Avenir', Verdana, Arial, sans-serif;
	letter-spacing: 0;
	width: 100%;
	height: 100%;
}

html, body {
	background-color: transparent;
}

body.dark {
	background-color: #111;
}

/* Layout */

	body {
		width: 330px;
		min-height: 100%;
		margin: auto;
		padding: 0;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		align-content: center;
	}

	body > header {
		order: 1;
		width: 100%;
		padding: 0;
		margin: 0;
		text-align: right;
		/* margin: .5rem auto; */
		align-self: center;
		min-height: 10px;
	}

	body > main {
		order: 2;
		width: 100%;
		padding: 0;
		margin: 0;
		align-self: center;
		min-height: 10px;
	}

	body > footer {
		order: 3;
		width: 100%;
		padding: 0;
		margin: 0;
		margin: 1rem auto;
		text-align: center;
		align-self: center;
		min-height: 10px;
		flex-shrink: 0;
	}

/* Top bar */

	body > header a {
		padding: 0;
		margin: 0 0 0.75rem 0;
		cursor: pointer;
		line-height: 0;
		order: 1;
		align-self: right;
	}

/* vCard */

	/* Layout */

	.vcard {
		display: block;
		margin: auto;
		position: relative;
		background-color: #fff;
		box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
		padding: 24px 24px 24px 24px;
		font-size: 1.05em;
		letter-spacing: .01em;
		line-height: 1.05em;
		text-align: center;
	}

	.vcard > header {
		padding: 0 0 24px 0;
	}

	.vcard > main {
	}

	.vcard > footer {
	}

	/* Header */

	/* Main */

	#full_name {
		/* letter-spacing: -0.5px; */
		text-align: center;
		font-size: 2em;
		line-height: 1.5em;
		font-weight: 500;
		font-family: 'Text Me One', 'Roboto', 'Calibri', 'Avenir', Verdana, Arial, sans-serif;
	}

	#vcard_image_flip_card {
		width: 100%;
		height: 140px;
		margin: 1.4rem auto;
		position: relative;
		background-color: transparent;
		perspective: 1000px;
	}

	#vcard_image_flip_card_inner {
		position: relative;
		width: 140px;
		height: 140px;
		text-align: center;
		transition: transform 0.6s;
		transform-style: preserve-3d;
		margin: auto;
	}

	.vcard:hover main #vcard_image_flip_card #vcard_image_flip_card_inner {
		transform: rotateY(180deg);
	}

	.vcard_image_flip_card_front, .vcard_image_flip_card_back {
		position: absolute;
		width: 100%;
		height: 100%;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}
		
	.vcard_image_flip_card_front {
	}
		
	.vcard_image_flip_card_back {
		transform: rotateY(180deg);
	}

	/*.vcard_image_flip_card:hover .vcard_image_flip_card_inner {
		transform: rotateY(180deg);
	}

	#vcard_image_flip img {
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -70px;
		height: 100%;
	}

	#vcard_logo {
		z-index: 1;
		-webkit-transform: rotateX(0deg);
				transform: rotateX(0deg);
	}

	#vcard_qrcode {
		z-index: 2;
		opacity: 0;
		display: none;
		-webkit-transform: rotateX(-180deg);
				transform: rotateX(-180deg);
	}

	#vcard_image:hover #vcard_logo {
		transform: rotateY(-180deg);
		-webkit-backface-visibility: hidden; /* Safari */
 		/*backface-visibility: hidden;
	}
	
	/* #vcard_image:hover #vcard_logo {
		opacity: 0;
		-webkit-transform: rotateX(-180deg);
				transform: rotateX(-180deg);
				display: none;
	}
	
	#vcard_image:hover #vcard_qrcode {
		-webkit-animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
				animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
		-webkit-animation-direction: reverse;
				animation-direction: reverse;
	} */

	/* Footer */

/* Footer */

	#social_networks {
		margin: 2em 0 1em 0;
	}

	#social_networks a {
		margin: 0 .1em;
	}

	#vcard_file_link {
		display: inline-block;
		color: #fff;
		text-decoration: none;
		font-size: 22px;
	}

	#vcard_file_link p {
		margin: .5em 0;
	}

	#vcard_file_link:hover {
		text-decoration: underline;
	}

	#office_phone_number, #office_email_address {
		margin: 0 .3rem;
	}

/* Common */

	.icon {
		width: 1.5rem;
		height: 1.5rem;
		display: inline-block;
	}

	.icon i {
		font-size: 24px;
	}

	.icon:hover i {
		color: rgb(48, 102, 226);
	}

	.clear {
		clear: both;
	}

	.hidden {
		display: none;
	}

	a {
		text-decoration: none;
		color: #111;
	}

	a:hover {
		text-decoration: underline;
		color: rgb(48, 102, 226);
	}

	/* .flip-out {
		-webkit-animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
				animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	}

	.flip-horizontal-bottom {
		-webkit-animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
				animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	} */

	/* ----------------------------------------------
	* Generated by Animista on 2022-10-10 12:47:59
	* Licensed under FreeBSD License.
	* See http://animista.net/license for more info. 
	* w: http://animista.net, t: @cssanimista
	* ---------------------------------------------- */

	/**
	* ----------------------------------------
	* animation flip-horizontal-bottom
	* ----------------------------------------
	*/
	@-webkit-keyframes flip-out {
		0% {
		opacity: 1;
		-webkit-transform: rotateX(0);
				transform: rotateX(0);
		}
		100% {
		opacity: 0;
		-webkit-transform: rotateX(-180deg);
				transform: rotateX(-180deg);
		}
	}
	@keyframes flip-out {
		0% {
		-webkit-transform: rotateX(0);
				transform: rotateX(0);
		}
		100% {
		-webkit-transform: rotateX(-180deg);
				transform: rotateX(-180deg);
		}
	}

	@-webkit-keyframes flip-in {
		0% {
		opacity: 1;
		-webkit-transform: rotateX(0);
				transform: rotateX(0);
		}
		100% {
		opacity: 0;
		-webkit-transform: rotateX(-180deg);
				transform: rotateX(-180deg);
		}
	}
	@keyframes flip-in {
		0% {
		-webkit-transform: rotateX(0);
				transform: rotateX(0);
		}
		100% {
		-webkit-transform: rotateX(-180deg);
				transform: rotateX(-180deg);
		}
	}