@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC');

body {
	font-family: 'Indie Flower', cursive !important;
	margin: 0;
	padding: 0;
	overflow: hidden;

	background: linear-gradient(
		-45deg,
		#ff9a9e,
		#fad0c4,
		#ffd1dc,
		#ffdde1
	);
	background-size: 400% 400%;
	animation: gradientMove 15s ease infinite;
}

body::before,
body::after {
	
	position: fixed;
	left: -10%;
	width: 120%;
	pointer-events: none;
	white-space: nowrap;
	z-index: 0;
}

body::before {
	top: 100%;
	font-size: 24px;
	color: rgba(255,255,255,0.4);
	animation: heartsUp 20s linear infinite;
}

body::after {
	top: 120%;
	font-size: 34px;
	color: rgba(255,105,180,0.35);
	animation: heartsUp 28s linear infinite;
}

@keyframes gradientMove {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes heartsUp {
	from {
		transform: translateY(0) rotate(0deg);
	}
	to {
		transform: translateY(-150vh) rotate(360deg);
	}
}

::selection {
	background: transparent;
}

h4 {
	font-size: 26px;
	line-height: 1px;
	font-family: 'Amatic SC', cursive !important;
}

.color1 {
	color: #1BBC9B;
}

.color2 {
	color: #C0392B;
}

.card {
	color: #013243;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 300px;
	height: 400px;
	background: #e0e1dc;

	transform-style: preserve-3d;
	transform: translate(-50%, -50%) perspective(2000px);

	box-shadow:
		inset 300px 0 50px rgba(0,0,0,.5),
		20px 0 60px rgba(0,0,0,.5);

	transition: 1s;
	z-index: 10;
}

.card:hover {
	transform: translate(-50%, -50%) perspective(2000px) rotate(15deg) scale(1.2);

	box-shadow:
		inset 20px 0 50px rgba(0,0,0,.5),
		0 10px 100px rgba(0,0,0,.5);
}

.card:before {
	content: '';
	position: absolute;
	top: -5px;
	left: 0;
	width: 100%;
	height: 5px;
	background: #BAC1BA;
	transform-origin: bottom;
	transform: skewX(-45deg);
}

.card:after {
	content: '';
	position: absolute;
	top: 0;
	right: -5px;
	width: 5px;
	height: 100%;
	background: #92A29C;
	transform-origin: left;
	transform: skewY(-45deg);
}

.card .imgBox {
	width: 100%;
	height: 100%;
	position: relative;
	transform-origin: left;
	transition: .7s;
}

.card .bark {
	position: absolute;
	background: #e0e1dc;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: .7s;
}

.card .imgBox img {
	min-width: 250px;
	max-height: 400px;
}

.card:hover .imgBox {
	transform: rotateY(-135deg);
}

.card:hover .bark {
	opacity: 1;
	transition: .6s;
	box-shadow: 300px 200px 100px rgba(0, 0, 0, .4) inset;
}

.card .details {
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	padding: 0 0 0 10px;
	z-index: -1;
	margin-top: 70px;
}

.card .details p {
	font-size: 15px;
	line-height: 5px;
	transform: rotate(-10deg);
	padding: 0 0 0 20px;
}

.card .details h4 {
	text-align: center;
}

.text-right {
	text-align: right;
}

body{
	font-family:'Indie Flower', cursive !important;
	background:#000;
	margin:0;
	padding:0;
	overflow:hidden;
}

/* Fundal cu glow subtil */
body::before{
	content:'';
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:
		radial-gradient(circle at 20% 30%, rgba(255,0,60,.15), transparent 30%),
		radial-gradient(circle at 80% 70%, rgba(255,0,60,.10), transparent 35%),
		radial-gradient(circle at 50% 50%, rgba(255,0,60,.05), transparent 50%);
	z-index:-2;
}

/* Container inimioare */
.hearts{
	position:fixed;
	inset:0;
	overflow:hidden;
	pointer-events:none;
	z-index:1;
}

.heart{
	position:absolute;
	bottom:-100px;
	color:#ff003c;
	font-size:20px;

	text-shadow:
		0 0 5px #ff003c,
		0 0 10px #ff003c,
		0 0 20px #ff003c,
		0 0 40px #ff003c,
		0 0 80px #ff003c;

	animation: floatUp linear infinite;
}

.heart:nth-child(1){left:5%;animation-duration:8s;font-size:18px;}
.heart:nth-child(2){left:15%;animation-duration:12s;font-size:28px;}
.heart:nth-child(3){left:25%;animation-duration:10s;font-size:22px;}
.heart:nth-child(4){left:35%;animation-duration:14s;font-size:32px;}
.heart:nth-child(5){left:45%;animation-duration:9s;font-size:26px;}
.heart:nth-child(6){left:55%;animation-duration:13s;font-size:20px;}
.heart:nth-child(7){left:65%;animation-duration:11s;font-size:34px;}
.heart:nth-child(8){left:75%;animation-duration:15s;font-size:24px;}
.heart:nth-child(9){left:85%;animation-duration:10s;font-size:30px;}
.heart:nth-child(10){left:95%;animation-duration:12s;font-size:18px;}

@keyframes floatUp{
	0%{
		transform:translateY(0) translateX(0) rotate(0deg);
		opacity:0;
	}
	10%{
		opacity:1;
	}
	50%{
		transform:translateY(-50vh) translateX(30px) rotate(180deg);
	}
	100%{
		transform:translateY(-120vh) translateX(-30px) rotate(360deg);
		opacity:0;
	}
}

.card{
	z-index:10;
}