* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.app {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.card {
	width: 300px;
	height: 400px;
	position: absolute;
	border-radius: 10px;
	position: absolute;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	transform-origin: center;
	margin-top: auto;
	margin-bottom: auto;
	top: 0;
	bottom: 0;
	cursor: -webkit-grab;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: perspective(800px);
	transform: perspective(800px);
}
.color0 {
	background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
}
.color1 {
	background-image: linear-gradient(
		to top,
		#3f51b1 0%,
		#5a55ae 13%,
		#7b5fac 25%,
		#8f6aae 38%,
		#a86aa4 50%,
		#cc6b8e 62%,
		#f18271 75%,
		#f3a469 87%,
		#f7c978 100%
	);
}

.color2 {
	background-image: linear-gradient(
		to top,
		#dbdcd7 0%,
		#dddcd7 24%,
		#e2c9cc 30%,
		#e7627d 46%,
		#b8235a 59%,
		#801357 71%,
		#3d1635 84%,
		#1c1a27 100%
	);
}

.color3 {
	background-image: linear-gradient(to top, #0250c5 0%, #d43f8d 100%);
}

.color4 {
	background-image: linear-gradient(to top, #c7eafd 0%, #e8198b 100%);
}

.text {
	text-align: center;
	font-family: "Montserrat", sans-serif;
	font-size: 28px;
	font-weight: 900;
	font-style: italic;
	margin-top: 50px;
	color: #fff;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
