*, html {
			box-sizing: border-box;margin: 0;padding: 0;outline: 0; user-select: none; overflow: hidden;
		}
		body{
			height: 100vh;
			width: 100vw;
			background-color: #2b2b2b;
		}
		.container{
			display: flex;
			align-content: center;
		}
		.box{
			width: 50vw;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.navigation{
			width: 50vw;
			height: 100vh;
		}
		.spinnerbox{
			width: 70%;
			height: inherit;
		}
		.spinner{
			position: relative;
			width: 81%;
			height: 27.7vw;
			top: 49.7%;
			left: 50.5%;
			transform: translate(-50%, -50%);
			background-color: #e5e5e5;
			border-radius:50%;
			z-index: -1;
		}
		.spinningbox{
			position: relative;
			width: 100%;
			height: 100%;
		}
		prize{
			width: 100%;
			height: 100%;
			border-radius: 50%;
			display: inline-block;
			position: absolute;
			font-family: 'Josefin Sans', sans-serif;
		}
		.prize1{
			clip-path: polygon(0 17%, 0 50%, 50% 50%);
			background-color: #f3bc19;
		}
		.prize2{
			clip-path: polygon(0 17%, 30% 0, 50% 50%);
			background-color: #e5e5e5;
		}
		.prize3{
			clip-path: polygon(30% 0, 71% 0, 50% 50%);
			background-color: #f3bc19;
		}
		.prize4{
			clip-path: polygon(71% 0, 100% 18%, 50% 50%);
			background-color: #fe0000;
			color: whitesmoke;
		}
		.prize5{
			clip-path: polygon(100% 18%, 100% 50%, 50% 50%);
			background-color: #f3bc19;
		}
		.prize6{
			clip-path: polygon(0 17%, 0 50%, 50% 50%);
			background-color: #e5e5e5;
			transform: rotate(180deg);
		}
		.prize7{
			clip-path: polygon(0 17%, 30% 0, 50% 50%);
			background-color: #f3bc19;
			transform: rotate(180deg);
		}
		.prize8{
			clip-path: polygon(30% 0, 71% 0, 50% 50%);
			background-color: #e5e5e5;
			transform: rotate(180deg);
		}
		.prize9{
			clip-path: polygon(71% 0, 100% 18%, 50% 50%);
			background-color: #f3bc19;
			transform: rotate(180deg);
		}
		.prize10{
			clip-path: polygon(100% 18%, 100% 50%, 50% 50%);
			background-color: #e5e5e5;
			transform: rotate(180deg);
		}
		.container-navigation{
			position: relative;
			padding-top: 2vw;
			padding-bottom: 2vw;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -35%);
			width: 75%;
			border-radius: 20px;
			background-color: rgba(1,1,1,0.3);
			overflow: unset;
		}
		.header{
			position: absolute;
			top: 0%;
			left: 50%;
			transform: translate(-50%, -105%);
			width: 32vw;
			height: 11vw;
		}
		.flightToken{
			width: 85%;
			border-radius: 5px;
			height: 2.5vw;
			display: block;
			margin: auto;
			text-align: center;
			font-family: 'Josefin Sans', sans-serif;
			font-size: 1em;
		}
		.navigationBtn{
			width: 85%;
			border-radius: 5px;
			height: 2.5vw;
			display: block;
			margin: auto;
			margin-top: 1vw;
			text-align: center;
			cursor: pointer;
			font-family: 'Josefin Sans', sans-serif;
			font-size: 1em;
		}
		.redeemBtn{
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #eed03e;
		}
		.historyBtn{
			background-color: #c12d33;
			color: whitesmoke;
		}
		.firstNotif{
			position: fixed;
			width: 100vw;
			height: 100vh;
			opacity: 0;
			top: 0;
			left: 0;
			z-index: 2;
		}
		.notifContainer{
			position: relative;
			padding-bottom: 12vh;
			width: 40vw;
			background-color: rgba(255, 255, 255, 0.8);
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border-radius: 10px;
			box-shadow: 5px 5px rgba(0, 0, 0, 0.3);
		}
		.closeBtn{
			width: 60px;
			height: 40px;
			position: absolute;
			right: 0;
			top: 0;
			background-color: red;
			color: whitesmoke;
			border-radius: 10px;
			text-align: center;
			font-size: 18pt;
			padding-top: 5px;
			font-family: 'arial';
			transform: translate(10%, -10%);
			cursor: pointer;
		}
		.gotItBtn{
			position: absolute;
			bottom: 20px;
			left: 50%;
			transform: translate(-50%, 0);
			width: 10vw;
			height: 5vh;
			border-radius: 10px;
			cursor: pointer;
			font-family: 'Bitter', serif;
			font-size: 1em;
		}
		h1{
			padding-top: 20px;
			text-align: center;
			font-family: 'Bitter', serif;
		}
		p{
			text-align: center;
			font-size: 1.5em;
			padding-top: 10px;
			padding-left: 15px;
			padding-right: 15px;
			font-family: 'Bitter', serif;
		}
        .loadingSpinner {
            border: 6px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top: 6px solid #3498db;
            width: 1.5vw;
            height: 1.5vw;
            animation: spin 1s linear infinite;
            margin-right: 10px;
            display: block;
        }

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

        .spinBtn {
			width: 85%;
			height: 2.5vw;
        	display: block;
        	margin: auto;
        	cursor: pointer;
			font-family: 'Josefin Sans', sans-serif;
			font-size: 1em;
			padding-bottom: 2em;
        }
		.prizeContent{
			font-size: 1.1vw;
		}
		#maskToast{
			width: 30vw;
			height: 2.5vw;
			position: fixed;
			left: 50%;
			top: -30vh;
			border-radius: 5px;
			transform: translate(-50%);
			background-color: rgba(255, 255, 255, 0.7);
			box-shadow: 2px 2px rgba(0, 0, 0, 0.4);
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 1vw;
			z-index: 9999;
		}
		#maskToast span{
			font-family: 'Josefin Sans', sans-serif;
			color: #1a1a1a;
			text-shadow: 3px 3px rgba(178, 178, 178, 0.4);
		}
		@keyframes toast {
            0% { top: -30vh; width:1vw; height: 1vw; font-size:0vw;}
            20% { top: 20px; width:1vw; height: 1vw; font-size:0vw;}
            30% { top: 20px; width:30vw; height: 2.5vw; font-size:1vw; }
            100% { top: 20px; }
        }
        .hranimation{
        	animation: hrkeyframe 2s  ease-in-out  infinite alternate;
        }
		@keyframes hrkeyframe {
            0% { width:0%;}
            100% { width:40%; }
        }
        #prizing{
        	position: fixed;
        	width: 100vw;
        	height: 100vh;
        	top: 0;
        	left: 0;
        	z-index: 99;
        	background-color: rgba(0, 0, 0, 0,3);
        	display: none;
        	align-items: center;
        	justify-content: center;
        }
        .container-prizing{
        	width: 40vw;
        	height: 50vh;
        	border-radius: 25px;
        	background: linear-gradient(to bottom, rgba(43, 8, 8, 0.4), rgba(61, 11, 11, 0.9));
        	display: flex;
        	justify-content: center;
        	align-items: center;
        	animation: prizingkeyframe 0.5s ease-in;
        }
        .container-prizing h2{
        	width: 100%;
        	text-align: center;
        	font-family: 'Orbitron', sans-serif;
        	color: whitesmoke;
        	text-shadow: 3px 3px #2b2b2b;
        }
        .container-prizing h3{
        	width: 100%;
        	text-align: center;
        	font-family: 'Orbitron', sans-serif;
        	color: #b2b2b2;
        	text-shadow: 3px 3px #2b2b2b;
        }
        .header-prizing{
        	font-size: 42pt; padding-bottom: 1vw;
        }
        .content-prizing{
        	font-size: 30pt;
        }
        .body-prizing{
        	font-size: 30pt; padding-bottom: 1vw;
        }
		@keyframes prizingkeyframe {
            0% { width:0vw; height: 0vh}
            100% { width:40vw; height: 50vh}
        }
        #spinHistory{
        	display: none;
        	width: 30vw;
        	position: fixed;
        	left: 60vw;
        	top: 50%;
        	transform: translate(0, -50%);
        	background-color: #222222;
        	z-index: 2;
        	border-radius: 20px;
        	box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
        	padding-bottom: 1.5vw;
        }
        #spinHistory header{
        	font-family: 'Orbitron', sans-serif;
        	font-size: 1.2vw;
        	padding-top: 10px;
        	padding-bottom: 10px;
        	text-align: center;
        	color: whitesmoke;
        }
        #spinHistory hr{
        	border-top: 1px solid #ff0000;
  
        }
        .closeHistory{
        	position: absolute;
        	width: 10%;
        	background-color: whitesmoke;
        	color: darkred;
        	top: 0;
        	right: 0;
        	text-align: center;
        	padding-top: 16px;
        	padding-bottom: 16px;
        	cursor: pointer;
        }
        .bodyHistory{
        	width: 90%;
        	height: 85%;
        	display: block;
        	margin: auto;
        	margin-top: 40px;
        }
        .bodyHistory table {
		    width: 100%;
		    border-collapse: collapse; /* Untuk menggabungkan garis tepi sel */
		    margin-bottom: 20px; /* Jarak bawah tabel */
			font-family: 'Josefin Sans', sans-serif;
		  }
		thead th{
			color: whitesmoke;
		}
		tbody th{
			color: #b2b2b2;
		}
		.bodyHistory th, td {
		    border: 1px solid #000000; /* Garis tepi sel berwarna putih */
		    padding: 8px; /* Ruang di dalam sel */
		    text-align: center; /* Posisi teks di dalam sel */
		  }

		.bodyHistory tr:hover {
		    background-color: #2b2b2b; /* Warna latar belakang saat hover pada baris */
		    color: #222222;
		  }

		@media only screen and (max-width: 430px) {
		    .container {
		        display: block;
				align-content: unset;
		    }
		    .box {
		    	position: fixed;
		    	margin-top: 10vh;
				width: 100vw;
				height: 50vh;
		    }
			.spinnerbox{
				width: 100vw;
				height: inherit;
			}
			.spinner{
				position: relative;
				width: 32vh;
				height: 32vh;
				top: 49.1%;
				left: 50.5%;
				transform: translate(-50%, -50%);
				background-color: #2b2b2b;
				border-radius:50%;
				z-index: -1;
			}
			.navigation{
				position: fixed;
				width: 100vw;
				height: 100vh;
			}
			.container-navigation{
				position: static;
				width: 90%;
				top: 0;
				left: 50%;
				transform: none;
				display: block;
				margin: auto;
				margin-top: 60vh;
				padding-top: 2vh;
				padding-bottom: 2vh;
			}
			.header{
				position: fixed;
				width: 70%;
				height: 150px;
				top: -10px;
				left: 50%;
				transform: translate(-50%);
			}
			.flightToken{
				width: 85%;
				border-radius: 5px;
				height: 4vh;
				display: block;
				margin: auto;
				text-align: center;
				font-family: 'Josefin Sans', sans-serif;
				font-size: 0.7em;
			}
			.navigationBtn{
				width: 85%;
				border-radius: 5px;
				height: 4vh;
				display: block;
				margin: auto;
				margin-top: 2vh;
				text-align: center;
				cursor: pointer;
				font-family: 'Josefin Sans', sans-serif;
				font-size: 0.7em;
			}

	        .spinBtn {
				padding-top: 1.4em;
				display: flex;
				justify-content: center;
				align-items: center;
				padding-bottom: 1.3em;
	        }

			.notifContainer{
				position: relative;
				padding-bottom: 12vh;
				width: 90vw;
				background-color: rgba(255, 255, 255, 0.8);
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				border-radius: 10px;
				box-shadow: 5px 5px rgba(0, 0, 0, 0.3);
			}
			h1{
				padding-top: 40px;
			}
			.gotItBtn{
				position: absolute;
				bottom: 20px;
				left: 50%;
				transform: translate(-50%, 0);
				width: 60vw;
				height: 5vh;
				border-radius: 10px;
				cursor: pointer;
				font-family: 'Bitter', serif;
				font-size: 1em;
			}
			.prizeContent{
				font-size: 1.4vh;
			}
			.loadingSpinner{
				display: block;
				margin: auto;
			}
			#maskToast{
				width: 90vw;
				height: 3vh;
				position: fixed;
				left: 50%;
				top: -30vh;
				border-radius: 5px;
				transform: translate(-50%);
				background-color: rgba(255, 255, 255, 0.7);
				box-shadow: 2px 2px rgba(0, 0, 0, 0.4);
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 1.5vh;
				z-index: 9999;
			}
			@keyframes toast {
	            0% { top: -30vh; width:1vw; height: 1vh; font-size:0vh;}
	            20% { top: 20px; width:1vw; height: 1vh; font-size:0vh;}
	            30% { top: 20px; width:90vw; height: 3vh; font-size:1.5vh; }
	            100% { top: 20px; }
	        }
	        #prizing{
	        	position: fixed;
	        	width: 100vw;
	        	height: 100vh;
	        	top: 0;
	        	left: 0;
	        	z-index: 99;
	        	background-color: rgba(0, 0, 0, 0,3);
	        	display: none;
	        	align-items: center;
	        	justify-content: center;
	        }
	        .container-prizing{
	        	width: 90vw;
	        	height: 60vh;
	        	border-radius: 25px;
	        	background: linear-gradient(to bottom, rgba(43, 8, 8, 0.8), rgba(61, 11, 11, 0.9));
	        	display: flex;
	        	justify-content: center;
	        	align-items: center;
	        	animation: prizingkeyframe 0.5s ease-in;
	        }
	        .container-prizing h2{
	        	width: 100%;
	        	text-align: center;
	        	font-family: 'Orbitron', sans-serif;
	        	color: whitesmoke;
	        	text-shadow: 3px 3px #2b2b2b;
	        }
	        .container-prizing h3{
	        	width: 100%;
	        	text-align: center;
	        	font-family: 'Orbitron', sans-serif;
	        	color: #b2b2b2;
	        	text-shadow: 3px 3px #2b2b2b;
	        }
	        .header-prizing{
	        	font-size: 38pt; padding-bottom: 1vw;
	        }
	        .content-prizing{
	        	font-size: 30pt;
	        }
	        .body-prizing{
	        	font-size: 30pt; padding-bottom: 1vw;
	        }
			@keyframes prizingkeyframe {
	            0% { width:0vw; height: 0vh}
	            100% { width:90vw; height: 60vh}
	        }
	        #spinHistory{
	        	width: 95vw;
	        	height: 90vh;
	        	position: fixed;
	        	left: 50%;
	        	top: 50%;
	        	transform: translate(-50%, -50%);
	        	background-color: #222222;
	        	z-index: 2;
	        	border-radius: 20px;
	        }
	        #spinHistory header{
	        	font-family: 'Orbitron', sans-serif;
	        	font-size: 2vh;
	        	padding-top: 10px;
	        	padding-bottom: 10px;
	        	text-align: center;
	        	color: whitesmoke;
	        }
	        #spinHistory hr{
	        	border-top: 1px solid #ff0000;
	  
	        }
	        .closeHistory{
	        	position: absolute;
	        	width: 10%;
	        	background-color: whitesmoke;
	        	color: darkred;
	        	top: 0;
	        	right: 0;
	        	text-align: center;
	        	padding-top: 13px;
	        	padding-bottom: 13px;
	        	cursor: pointer;
	        }
	        .bodyHistory{
	        	width: 95%;
	        	height: 90%;
	        	display: block;
	        	margin: auto;
	        	margin-top: 20px;
	        	overflow: scroll;
	        }
	        .bodyHistory table {
	        	font-size: 2vh;
	        }
		}