.pt0 {
	fill: #e73774;
}

.pt1 {
	fill: #dc0a53;
}

.pt2 {
	fill: #dc0a53;
}

.pt3 {
	fill: #e73774;
}

.pt4 {
	fill: #ff8eb7;
}

.pt5 {
	fill: #ef85a0;
}

.pt6 {
	fill: #ffbfcf;
}

.pt7 {
	fill: #c90a4d;
}

.pt8 {
	fill: #4C483F;
}

.pt9 {
	fill: #ffbfcf;
}

.pt10 {
	fill: #ffbfcf;
}

.st11 {
	fill: #5076B2;
}

.st12 {
	fill: #567BB5;
}

.st13 {
	fill: #5B81B8;
}

.st14 {
	fill: #6186BB;
}

.st15 {
	fill: #678CBE;
}

.st16 {
	fill: #6C91C1;
}

.st17 {
	fill: #7296C4;
}

.st18 {
	fill: #789CC7;
}

.st19 {
	fill: #7DA1CA;
}

.st20 {
	fill: #83A6CD;
}

.st21 {
	fill: #89ACD0;
}

.st22 {
	fill: #8EB1D2;
}

.st23 {
	fill: #94B7D5;
}

.st24 {
	fill: #9ABCD8;
}

.st25 {
	fill: #9FC1DB;
}

.st26 {
	fill: #A5C7DE;
}

.st27 {
	fill: #ABCCE1;
}

.st28 {
	fill: #B0D1E4;
}

.st29 {
	fill: #B6D7E7;
}

.st30 {
	fill: #BCDCEA;
}

.st31 {
	fill: #C1E2ED;
}

.st32 {
	fill: #C7E7F0;
}

.st0 {
	fill: #232B2B;
}

.st1 {
	fill: url(#SVGID_1_);
}

.st2 {
	fill: url(#SVGID_2_);
}

.st3 {
	fill: url(#SVGID_3_);
}

.st4 {
	fill: url(#SVGID_4_);
}

.st5 {
	fill: url(#SVGID_5_);
}

.st6 {
	fill: url(#SVGID_6_);
}

.st33 {
	opacity: 0.2;
	fill: #FFFFFF;
	enable-background: new;
}

.st34 {
	fill: #E6F0FF;
}

.st35 {
	opacity: 0.3;
	fill: #FFFFFF;
	enable-background: new;
}

.crystal {
	width: 70vmin;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
}

.cball {
	cursor: pointer;
	height: 81vmin;
}

.glow {
	border-radius: 100%;
	position: absolute;
	right: 0;
	left: 0;
	margin: auto;
	width: 70vmin;
	height: 70vmin;
	-webkit-animation: glowing 1500ms infinite;
	-moz-animation: glowing 1500ms infinite;
	-o-animation: glowing 1500ms infinite;
	animation: glowing 1500ms infinite;
}

.frt {
	border-radius: 100%;
	position: absolute;
	margin: 0 auto;
	text-align: center;
	right: 0;
	left: 0;
	margin: auto;
	width: 70vmin;
	height: 70vmin;
}

.fortune {
	z-index: 1000;
	font-family: 'Sriracha', cursive;
	text-shadow: 0px 0px 10px #cccccc;
	color: #ffffff;
	display: flex;
	position: absolute;
	justify-content: center;
	align-items: center;
	text-align: cenetr;
	height: 100%;
	opacity: 0;
	font-size: 3rem;
	font-weight: bold;
	text-align: center;
	margin: 20px;
}

.smk {
	border-radius: 100%;
	position: absolute;
	right: 0;
	left: 0;
	margin: auto;
	/* margin-top: 120px; */
	/* margin-bottom:400px; */
	width: 70vmin;
	height: 70vmin;
	background-image: url("https://lovetest.pl/inc/divination/crystalball/smoke.gif");
	background-size: 100vmin 100vmin;
	background-position: 0px 0px;
	opacity: .2;
}

@-moz-keyframes spin {
	100% {
		-moz-transform: rotate(360deg);
	}
}

@-webkit-keyframes spin {
	100% {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes spin {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

.glare {
	z-index: 10;
	position: absolute;
	width: 140px;
	left: 0;
	right: 184px;
	margin: 0 auto;
	/* margin-top:142px; */
	opacity: .8;
}

@-webkit-keyframes glowing {
	0% {
		background-color: #9cb0ea;
		box-shadow: 0 0 3px #92e4ff;
		opacity: .4;
	}
	50% {
		background-color: #92d5ff;
		box-shadow: 0 0 40px #5aa9ec;
		opacity: .6;
	}
	100% {
		background-color: #9cb0ea;
		box-shadow: 0 0 3px #92e4ff;
		opacity: .4;
	}
}

@-moz-keyframes glowing {
	0% {
		background-color: #9cb0ea;
		box-shadow: 0 0 3px #92e4ff;
		opacity: .4;
	}
	50% {
		background-color: #92d5ff;
		box-shadow: 0 0 40px #5aa9ec;
		opacity: .6;
	}
	100% {
		background-color: #9cb0ea;
		box-shadow: 0 0 3px #92e4ff;
		opacity: .4;
	}
}

@-o-keyframes glowing {
	0% {
		background-color: #9cb0ea;
		box-shadow: 0 0 3px #92e4ff;
		opacity: .4;
	}
	50% {
		background-color: #92d5ff;
		box-shadow: 0 0 40px #5aa9ec;
		opacity: .6;
	}
	100% {
		background-color: #9cb0ea;
		box-shadow: 0 0 3px #92e4ff;
		opacity: .4;
	}
}

@keyframes glowing {
	0% {
		background-color: #9cb0ea;
		box-shadow: 0 0 3px #92e4ff;
		opacity: .4;
	}
	50% {
		background-color: #92d5ff;
		box-shadow: 0 0 40px #5aa9ec;
		opacity: .6;
	}
	100% {
		background-color: #9cb0ea;
		box-shadow: 0 0 3px #92e4ff;
		opacity: .4;
	}
}

.get-fortune-btn {
	background: none;
	background-image: radial-gradient(#CBAB60, #3F3A26);
	border: 3px solid linear-gradient(#3F3A26, #CBAB60);
	box-shadow: 0 0 8px silver;
	margin-top: 260px;
	color: #3F3A26;
	font-weight: bold;
	padding: 10px 25px;
	border-radius: 5px;
	font-size: 1.2rem;
}

button:hover {
	cursor: pointer;
}

button:focus {
	outline: none;
}

.crystal-ball:hover {
	filter: brightness(1.2);
	cursor: pointer;
}

.reveal {
	animation-name: fortune;
	animation-duration: 3s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

@keyframes fortune {
	from {
		opacity: 0;
		filter: blur(5px);
	}
	to {
		opacity: 1;
		filter: blur(0px);
	}
}

@media (max-width: 600px) {
	.fortune {
		font-size: 1rem;
	}
}