html, body {margin: 0; height: 100%; overflow: hidden}
	body {
		font-family:  "Single Day", cursive, sans-serif;
		background-color: black;
		background: url('../../assets/img/xmasbglarge.jpg') no-repeat center center fixed; 
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
 	}
	
	.menu-button {
		width: 70px;
		height: 62px;
		text-align:center;
		color:white;
		font-size:16px;
		font-weight:bold;
	}
	
	.placeholder-cap {
		width: 56px;
		height: 22px;
	}
	
	.image-button {
		width: 70px;
		height: 62px;
		background: url('../../assets/img/button.png'); 
	}
	
	a { text-decoration:none; color:white;}
	
	.button-selected {
		background: rgba(250, 203, 86, 0.4);
		border: 2px solid rgba(255,194,43, 0.6);
		
	}
	
	
	.header {
		width:100%;
		height: 46px;
		background: rgba(34, 168, 4, 0.35);
	}
	.top-header {
		display: flex;
		justify-content: space-between;
		font-size:16px;
		height: 46px;
		padding: 5px 5px;
	}
	.username {		
		float: left;
		color:#fff;
	}
	
	
	#app-panel {
		height: 100vh;
		max-width:352px;
		margin:0 auto;
		overflow: hidden;
	}
	
	.userprogress {
		font-size:18px;
		color: #fff;
		width: 352px;
		margin-left:auto;
		margin-right:auto;
	}
	
	.level-progress {
		background-color: #621b05;
		width:100%;
		height: 16px;
		
		border: 3px solid rgba(66,177,78,1.0);	
		border-radius: 5px;		
	}
	
	.progress-bar {
		position: relative;
		margin: 0 auto;
		height: 10px;
		width: 100%;
		border-radius: 1px;
	}

	.progress-inner {
	  display: block;
	  position: relative;
	  height: 100%;
	  width: 100%;
	  background-image: linear-gradient(to bottom, #23af04 60%, #fff);
	  box-shadow: 
		inset 0 -2px 1px  rgba(255,255,255,0.3),
		inset 0 -2px 6px rgba(0,0,0,0.4);
		overflow: hidden;
	}

	.progress-bar > span:after {
	  content: "";
	  position: absolute;
	  top: 0; left: 0; bottom: 0; right: 0;
	  background-image: linear-gradient(
		-45deg, 
		rgba(255, 255, 255, .2) 25%, 
		transparent 25%, 
		transparent 50%, 
		rgba(255, 255, 255, .2) 50%, 
		rgba(255, 255, 255, .2) 75%, 
		transparent 75%, 
		transparent
	  );
	  z-index: 1;
	  background-size: 50px 50px;
	  overflow: hidden;
	}

	.progress-bar > span:after, .animate > span > span { 
	  animation: expandWidth 1s infinite;
	}

	@keyframes expandWidth {
	   0% { width: 0; }
	   100% { width: 100%; }
	}
	
	.userpoints {
		width: 352px;
		margin-left:auto;
		margin-right:auto;
		text-align:center;
		color: #fff; 
		font-size:45px;
		padding: 2px 0 4px 0;
		background: rgba(33, 167, 4, 0.15);		
		border: 2px solid rgba(255,194,43, 0.5);	
		border-radius: 10px;
	}
	
	.taptap { width:352px; height: 352px;}
	
	.outer-santa {
		background: linear-gradient(to bottom, #ffffff, #777777);
		display: flex;
		align-items: center;
		justify-content: center;
	  
		width: 260px;
		height: 260px;
		max-width: 260px;
		max-height: 260px;
		border-radius: 50%;
		
		margin-left:auto;
		margin-right:auto;
		
	}
	
	.inner-santa {
		width: 215px;
		height: 215px;
		margin-left:auto;
		margin-right:auto;
		border-radius: 50%;
		background: radial-gradient(circle, #a82601, #30140c);
		
		display: flex;
		align-items: center;
		justify-content: center;
	  
	}
	
	#image-santa {
		width: 194px;
		height: 194px;
	}
		
	.floating-text {
		position: absolute;
		font-size: 48px;
		font-weight: bold;
		color: #57c934;
		text-shadow: 2px 2px #333;
		animation: floatUp 1s ease-out, fadeOut 2s forwards;
	}
	
	#image-santa, .floating-text {
		-webkit-tap-highlight-color: transparent;
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;
		-webkit-user-drag: none;
		-webkit-user-drag: none;
		-drag: none;
		touch-action: none;
		user-zoom: fixed;
	}		
	
	@keyframes floatUp {
	  0% {
		opacity: 1;
		transform: translateY(0);
	  }

	  100% {
		opacity: 0;
		transform: translateY(-150px);
	  }
	}

	@keyframes fadeOut {
		from {
			opacity: 1;
		}
		to {
			opacity: 0;
		}
	}
	
	.other-stats {
		display: flex; 
		justify-content: space-between;
		width:352px;
		height: 50px;
		margin-left:auto;
		margin-right:auto;
	}
	
	.boost-box, .luck-box, .yields-box {
		display: flex; 
		justify-content: space-between;
		width:100px;
		height: 48px;
		padding-right:5px;
		background: rgba(33, 167, 4, 0.15);		
		border: 2px solid rgba(255,194,43, 0.5);	
		border-radius: 8px;
		color: #fff;
		font-size: 24px;
		font-weight: bold;
	}
	
	.luck-box {
		width:96px;
	}
	
	.yields-box {
		display: flex; 
		justify-content: flex-start;
		width:352px;
		height: 80px;
		margin-left:auto;
		margin-right:auto;
	}
	
	.boost-icon {
		width: 36px;
		margin: 4px 5px 0 4px;
	}
	
	.luck-icon {
		width: 36px;
		margin: 4px 5px 0 4px;
	}
	
	.yields-icon {
		margin: 8px 10px 0 8px;
	}
	
	.yields-usdt {
		color: #fff;
		width: 180px;
	}
	
	.yields-usdt-label {
		color:#fad773;
		font-size:18px;
		margin-top:4px;
	}
	.yields-usdt-amount {
		font-size:32px;
		font-weight:bold;
		margin-top:-14px;
	}
	.yields-usdt-rate {
		color:#fad773;
		font-size:14px;
		margin-top:-12px;
	}
	.yields-claim {
		display: flex;
		justify-content: flex-end;
	}
	.btn-claim {
		margin-top:14px;
		margin-left:2px;
		display: inline-block;
        outline: 0;
        border: 0;
        cursor: pointer;
        transition: box-shadow 0.15s ease,transform 0.15s ease;
        will-change: box-shadow,transform;
        background: #FCFCFD;
        box-shadow: 0px 2px 4px rgb(45 35 66 / 40%), 0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px #d6d6e7;
        height: 48px;
        
        border-radius: 6px;
        padding: 8px;
        
		transition: box-shadow 0.15s ease,transform 0.15s ease;
         /*
		  :hover {
             box-shadow: 0px 4px 8px rgb(45 35 66 / 40%), 0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px #d6d6e7;
             transform: translateY(-2px);
           }
		             
		   :active{
             box-shadow: inset 0px 3px 7px #d6d6e7;
             transform: translateY(2px);
           }
		*/
	}
	
	.text-claim {
		font-size: 22px;
		font-weight:bold;
		background-color: #565656;
		color: transparent;
		color: transparent;
		text-shadow: 1px 1px 2px rgba(255,255,255,0.5);
		  -webkit-background-clip: text;
			 -moz-background-clip: text;
				  background-clip: text;
		  
	}
	
	.footer {
		position:fixed;
		bottom:0;
		width: 352px;
		padding:2px 2px 8px 2px;
	}
		
	.footer-caps {
		position: relative;
		display: flex;	
		justify-content: space-between;
		
		width:352px;
		overflow: hidden;
		
		margin-left: auto;
		margin-right: auto;
		height: 30px;
		margin-bottom:-5px;
		margin-top:5px;
	}
	
	.image-cap {
		visibility: hidden;
		display: flex;
		justify-content: center;
	}
	
	.footer-buttons {
		display: flex;	
		justify-content: space-between;
		
		width:352px;
		overflow: hidden;
		
		margin-left: auto;
		margin-right: auto;
	}
	#myname { font-weight: bold; }
	
	.bg-strip{
		background-image: linear-gradient(
		-35deg, 
		rgba(255, 255, 255, .2) 25%, 
		transparent 25%, 
		transparent 50%, 
		rgba(255, 255, 255, .2) 50%, 
		rgba(255, 255, 255, .2) 75%, 
		transparent 75%, 
		transparent
		);
	}
	
	.bi {
		width:12pt;
		height:12pt;
        fill: currentColor;
    }
	.text-dark-green{
		color:#0f5836
	} 

	.blured-15{
		backdrop-filter: blur(15px);
		box-shadow: 0px 0px 2px #b4a8a8d6;
	}
	
	.blured-10{
		backdrop-filter: blur(10px); 
		box-shadow: 0px 0px 2px #b4a8a8d6;
	}
	
	.blured-5{
		backdrop-filter: blur(5px); 
		box-shadow: 0px 0px 2px #b4a8a8d6;
	}
	 
	/*
	.santa {
		-webkit-animation: action 1s infinite  alternate;
		animation: action 1s infinite  alternate;
	}

	@-webkit-keyframes action {
		0% { transform: translateY(0); }
		100% { transform: translateY(-10px); }
	}

	@keyframes action {
		0% { transform: translateY(0); }
		100% { transform: translateY(-10px); }
	}
	*/
	
	.animating-pulse {
		animation: pulse 3s linear infinite;
 	}
	
	@keyframes pulse {
		
		0% {
			transform: scale(1);
			box-shadow: 0 0 0 0 rgba(250, 215, 115, 0.6);
		  }
		  40% {
			transform: scale(1.08);
			box-shadow: 0 0 0 20px rgba(250, 215, 115, 0.4);
		  }
		  50% {
			 transform: scale(0.98);
			 box-shadow: 0 0 0 25px rgba(250, 215, 115, 0.1);
		  }
		  55% {
			transform: scale(1.02);
			box-shadow: 0 0 0 20px rgba(250, 215, 115, 0.2);
		  }
		  60% {
			transform: scale(0.98);
			box-shadow: 0 0 0 54px rgba(250, 215, 115, 0.3);
		  }
		  100% {
			transform: scale(1);
			box-shadow: 0 0 0 0 rgba(250, 215, 115, 0.1);
		  }
	}
	
	.animating-echo {
		animation: echo 2s linear infinite;
 	}
	
	@keyframes echo {
	  0% {
		opacity: 0.85;
		transform: scale(1);
	  }
	  14% {
		opacity: 0.55;
		transform: scale(0.8);
	  }
	  21% {
		opacity: 0.55;
		transform: scale(1.1);
	  }
	  100% {
		opacity: 0;
		transform: scale(1);
	  }
	}