@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&family=Neucha&display=swap");

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	background-image: linear-gradient(
		to top,
		rgb(146, 161, 207),
		rgb(72, 61, 139),
		rgb(25, 25, 112)
	);
	transition: 2s;
	overflow: hidden;
}

main {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

/*Styles for the background*/

.background {
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: space-between;
}

.fa-snowflake {
	color: rgb(229, 228, 226);
	animation: snowflakes ease-in-out infinite;
	animation-delay: calc(-1s * var(--i));
	animation-duration: calc(2s * var(--i));
	margin-top: -20px;
}

.small {
	font-size: 0.75rem;
	opacity: 0.5;
}

.medium {
	font-size: 1.2rem;
	opacity: 0.7;
}

.large {
	font-size: 1.5rem;
	z-index: 2;
}

/*Styles for the card*/

.card {
	position: absolute;
	width: 400px;
	height: 600px;
	border-radius: 4px;
	box-shadow: 3px 3px 4px rgb(0, 0, 0, 0.3);
	z-index: 1;
	transform-style: preserve-3d;
	perspective: 1000px;
	transition: 2s;
}

.cover {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	transform-origin: left;
	transition: 2s;
}

.cover1,
.cover2 {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	transform-origin: left;
	transition: 2s;
}

.cover2 {
	opacity: 0;
}

img {
	width: 100%;
	height: 100%;
	border-radius: 4px;
}

.credit1,
.credit2 {
	position: absolute;
	width: 100%;
	height: 50px;
	background-color: rgb(0, 0, 0, 0.5);
	margin-top: -100px;
	z-index: 1;
	font-family: "Neucha", cursive;
	color: rgb(247, 233, 142);
	font-size: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

a {
	text-decoration: none;
	color: inherit;
}

.inside {
	position: relative;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(
		to bottom,
		rgb(139, 0, 0),
		rgb(178, 34, 34),
		rgb(171, 78, 82)
	);
	color: rgb(247, 233, 142);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 3.5rem;
	font-family: "Great Vibes", cursive;
	transition: 2s;
	border-radius: 4px;
}

.card:hover p {
	animation: text-animation 3s ease 0s 1;
}

.card:hover {
	transform: translateX(50%);
}

.card:hover .cover {
	transform: rotateY(-180deg);
}

.card:hover .cover1 {
	opacity: 0;
}

.card:hover .cover2 {
	opacity: 1;
}

.card:hover .credit2 {
	transition: 2s;
	transform: rotateY(180deg);
}

@keyframes text-animation {
	0% {
		transform: scaleX(0.4);
		transform-origin: 0% 0%;
	}

	100% {
		transform: scaleX(1);
		transform-origin: 0% 0%;
	}
}

@keyframes snowflakes {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translate(calc(82px * var(--i)), 110vh);
	}
}