@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;700;900&display=swap');
body{
	background: url('../img/background.jpg') center center no-repeat; 
	background-size:cover;
	background-attachment:fixed;
	font-family: arial;
	font-family: 'Nunito', sans-serif;
    justify-content: center;
    align-items: center;
	-webkit-backface-visibility: hidden;
}
.the_wheel{
	position:relative;
	background-image: url('../img/bg_spin.gif');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding:30px;
	z-index:-1;
}
.the_wheel::before {
    content: "";
    position: absolute;
    box-shadow: inset 0 0 30px #000000;
    z-index: 1;
    width: 87%;
    height: 87%;
    border-radius: 50%;
}
.the_wheel img#pointer{z-index:3;}
.the_wheel canvas#spinWheel{max-width:100%; }
.skb ul{
	padding-top: .5rem;
	padding-bottom: .5rem;
	padding-left:30px;
	background:#f9d6d0;
	color:#343a40!important;
}
h1, p{margin: 0;}
#formdata h4{
	text-shadow:1px 2px 1px #000;
}
.drop {
	background: linear-gradient(to bottom, #f7cf2e 5%, #faa20a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f7cf2e), color-stop(1, #faa20a));
	background: -moz-linear-gradient(top, #f7cf2e 0%, #faa20a 100%);
	position: relative;
	width:20px;
	height:20px;
	border-radius:50%;
	position: absolute;
	bottom:0px;
	-webkit-animation: fall 1s linear infinite;
	-moz-animation: fall 1s linear infinite;
	z-index:99;
}
.drop:before {
	position: absolute;
	content: "Rp";
	font-size:10px;
	width:20px;
	height:20px;	
	margin-left:4px;
	margin-top:3px;
}
.rounded-start{
	border-start-end-radius:0rem !important;
	border-end-end-radius:0rem !important;
}
.rounded-end{
	border-start-start-radius:0rem !important;
	border-end-start-radius:0rem !important;
}
.bt-gold{
	background: -webkit-linear-gradient(top, #8f6B29, #765800, #DF9F28) !important;
	background: linear-gradient(top, #8f6B29, #765800, #DF9F28) !important;
}
.bt-gold:hover{
	background: -webkit-linear-gradient(top, #DF9F28, #765800, #8f6B29) !important;
	background: linear-gradient(top, #DF9F28, #765800, #8f6B29) !important;
}
@-webkit-keyframes fall {to {margin-top:120px;}}
@-moz-keyframes fall {to {margin-top:120px;}}
.mfp-with-zoom .mfp-container, .mfp-with-zoom.mfp-bg {
	opacity: 0;
	-webkit-backface-visibility: hidden;
	-webkit-transition: all 0.7s ease-out;
	-moz-transition: all 0.7s ease-out;
	-o-transition: all 0.7s ease-out;
	transition: all 0.7s ease-out;
}
.mfp-with-zoom.mfp-ready .mfp-container {opacity: 1;}
.mfp-with-zoom.mfp-ready.mfp-bg {opacity: 0.8;}
.mfp-with-zoom.mfp-removing .mfp-container,.mfp-with-zoom.mfp-removing.mfp-bg {opacity: 0;}
.mfp-no-margins img.mfp-img {padding: 0;}
.mfp-no-margins .mfp-container {padding: 0;}
.mfp-figure:after{box-shadow:none !important; background: transparent !important;}
.mfp-title{text-align: center !important; font-size:5vw; font-weight:700; line-height: 40px !important;padding-right:0px !important;}
@media (max-width: 320px){
	.the_wheel{padding:15px;}
	.the_wheel img#pointer{width:8vw !important; z-index:3;}
}
@media (min-width: 321px) and (max-width: 424px){
	.the_wheel{padding:19px;}
	.the_wheel img#pointer{width:8vw !important; z-index:3;}
}
@media (min-width: 425px) and (max-width: 480px){
	.the_wheel{padding:22px;}
	.the_wheel img#pointer{width:9vw !important; z-index:3;}
}
@media (min-width: 481px) and (max-width: 767px){
	.the_wheel img#pointer{width:7vw !important;}
}
@media (min-width: 768px) and (max-width: 985px){
	.the_wheel img#pointer{width:6vw !important; z-index:3;}
}