body{
	       transition: all 5s ease;
    background: linear-gradient(to right, #0f0c29, #302b63, #24243e);

           }   
		

	   #attack:hover{
	       transform:scale(1.3);
	       background-color: white !important;
	       box-shadow: 0 0 10px 5px orange;


	   }

	   #heal:hover{
	       transform:scale(1.3);
	       background-color: white !important;
	       box-shadow: 0 0 10px 5px crimson;



	   }

	   #charge:hover{
	       transform:scale(1.3);
	       background-color: white !important;
	       box-shadow: 0 0 10px 5px #ffb84d;


	   }

	   #freeze:hover{
	       transform:scale(1.3);
	       background-color: white !important;
	       box-shadow: 0 0 10px 5px cyan;

	   }

	   #upgrades:hover{
 	   	transform: scale(1.3);
	        background-color: white !important;
		box-shadow: 0 0 10px 5px purple;       
           }


	   #display-label{
	   	position:absolute;
 		left: 50%;
		top:5%;
		opacity: 0;
		transition: all 5s ease;
		font-weight:bold;
		font-family:arial;	
		font-size:30px;
		white-space:pre;
           }
	

	


	   #health-container{
                position: relative;
    		background-color: grey;
    		width: 200px;
    		height: 20px;
		margin-top: 1px;
                margin-bottom: 1px;
		border: 2px solid black;
		border-radius: 10px;
            }

            #health-bar{
    		position: relative;
	        background-size: 400px 100%;
   		width: 100%;
    		height: 100%;
		transition: all 1s ease;
		border-radius: 10px;
    		background:linear-gradient(to top, lime);
	    }

	   #hp{
                position: absolute;
                top: 0;
		left: 0;
		color: white;
                width: 100%;

                
           }

	   #enemy-health-container{
                position: relative;
    		background-color: grey;
    		width: 400px;
    		height: 20px;
		margin-top: 1px;
                margin-bottom: 1px;
		border: 2px solid black;
		border-radius: 10px;


           }

           #enemy-health-bar{
    		position: relative;
		background:linear-gradient(to top, darkred, orange);
	        background-size: 400px 100%;
   		width: 100%;
    		height: 100%;
		transition: all 0.5s ease;
		border-radius: 10px;

           }

           #enemy-hp{
                position: absolute;
                top: 0;
		left: 0;
		color: white;
                width: 100%;
           }











        
           #attack img{
           	display: inline-block;
                vertical-align: middle;
           }
       
           #heal img{
           	display: inline-block;
                vertical-align: middle;
                
           }

           #xp-container{
                position: relative;
           	width: 300px;
                height: 20px;
		background-color: grey;
		margin-top: 1px;
                margin-bottom: 1px;
		border: 2px solid black;
		transition: all 0.5s ease;
		border-radius: 10px;

               
           }

           #xp-points{
           	width: 100%;
                height: 100%;
		background: linear-gradient(to bottom, yellow, orange);
		background-size: 300px, 100%;
		transition: all 0.5s ease;
		border-radius: 10px;
		

           }

	   #XP{
               position: absolute;
	       color:black;
               left: 0;
               top: 0;
	   }
           
           #upgrades-gui{
 	   	display: none;
           }

           #voltage-container{
                position: relative;
           	width: 200px;
                height: 20px;
                background-color: grey;
		margin-top: 1px;
		border: 2px solid black;
		transition: all 0.5s ease;
		border-radius: 10px;

           }

           #voltage-bar{
           	width: 100%;
                height: 100%;
                background: linear-gradient(to top, blue, cyan);
  		background-size: 200px, 100%;
		transition: all 1s ease;
		border-radius: 10px;

           }
 
	   #voltage-text{
           	color: white;
                position: absolute;
                left: 0;
                top: 0;
           }

	   #box{
		position: absolute;
		background-color: white;
		width: 5px;
		height: 5px;
		top: 500px;
		left: 500px;

	
	  }

	  #dev-console{
		position:absolute;
	  	width:200px;
		height:20px;
		right:0px;
		bottom:10px;
		
          }

	  #display-enemy{
	  	width: 100px;
		height: 100px;
		background: none;
	        filter: invert(0%);
		border: 0;
	 	position:absolute;
		top: 60%;
		left: 40%;
		font-size: 210px;
		transition: filter 2s ease;
		z-index: -2;
		
	  }


	  #display-enemy:hover{
	  	transform: scale(1.1);
	  }

	  #buy-perk:hover{
	  	transform: scale(1.2);
	  }

	  #cloud1{
          	position: absolute;
		left: 5%;
		top: 0%;
		font-size: 100px;
		z-index: -10;
		transition: all 20s ease;
 		white-space: nowrap
          }


	  #moon{	
	  	position:absolute;
		left: 90%;
		top: 0%;
		z-index: -11;
		font-size: 100px;
		filter: brightness(100%);
		transition: all 1s ease;
	
	  }


	  #house{	
	  	position:absolute;
		left: 0%;
		top: 10%;
		z-index: -4;
		font-size: 500px;
		filter:brightness(60%);
	  }

	  #grave{	
	  	position:absolute;
		left: 75%;
		top: 80%;
		z-index: -7;
		font-size: 100px;
		filter:brightness(16%)	
	  }

	  #saturn{	
	  	position:absolute;
		left: 40%;
		top: 0%;
		z-index: -12;
		font-size: 10px;
		filter: brightness(120%);
		transition: all 1s ease;
	  }

	#factory{
		font-size: 150px;
		position:absolute;
		left: 60%;
		top: 65%;
		z-index: -7;
		filter: brightness(16%);
	}

	#castle{
		font-size: 100px;
		position:absolute;
		left: 50%;
		top: 70%;
		z-index: -7;
		filter: brightness(16%);
	}

	#office{
		font-size: 89px;
		position:absolute;
		left: 78%;
		top: 80%;
		z-index: -7;
		filter: brightness(16%);
	}

	#office2{
		font-size: 89px;
		position:absolute;
		left: 83%;
		top: 80%;
		z-index: -7;
		filter: brightness(16%);
	}

	#bank{
		font-size: 259px;
		position:absolute;
		left: 83%;
		top: 60%;
		z-index: -7;
		filter: brightness(16%);
	}

	#school{
		font-size: 100px;
		position:absolute;
		left: 01%;
		top: 68%;
		z-index: -7;
		filter: brightness(16%);
	}

	#construction{
		font-size: 100px;
		position:absolute;
		left: 58%;
		top: 70%;
		z-index: -7;
		filter: brightness(16%);
	}

	


	  #tree{	
	  	position:absolute;
		left: 85%;
		top:70%;
		z-index: -3;
		font-size: 200px;
		filter:brightness(16%);	
	  }

	  #player-icon{	
	  	position:absolute;
		left: 30%;
		top: 52%;
		font-size: 200px;
		z-index: -10;
		transform: scaleX(-1);	
		transition: all 0.1s ease;
	  }

	  #canvas{
	  	position: absolute;
		z-index: -6;
		width: 100%;
	  }


	  #army-upgrades:hover{
	      transform: scale(1.1);
	      box-shadow: 0 0 10px 5px green;
	      background-color: white !important;	
	      color: black !important;
	      font-weight: bold;

	  }

	  #corruption-upgrades:hover{
	      transform: scale(1.1);
	      box-shadow: 0 0 10px 5px purple;
	      background-color: white !important;	
	      color: black !important;
	      font-weight: bold;
	  }

	  #damage-upgrades:hover{
	      transform: scale(1.1);
	      box-shadow: 0 0 10px 5px red;
	      background-color: white !important;	
	      color: black !important;
	      font-weight: bold;
	  }

	  #defense-upgrades:hover{
	      transform: scale(1.1);
	      box-shadow: 0 0 10px 5px blue;
	      background-color: white !important;	
	      color: black !important;
	      font-weight: bold;
	  }

	  #health-upgrades:hover{
	      transform: scale(1.1);
	      box-shadow: 0 0 10px 5px red;
	      background-color: white !important;	
	      color: black !important;
	      font-weight: bold;
   	  }

	  #voltage-upgrades:hover{
	      transform: scale(1.1);
	      box-shadow: 0 0 10px 5px orange;
	      background-color: white !important;	
	      color: black !important;
	      font-weight: bold;
 	  }

	  #xp-upgrades:hover{
	      transform: scale(1.1);
	      box-shadow: 0 0 10px 5px yellow;
	      background-color: white !important;	
	      color: black !important;
	      font-weight: bold;
 	  }


          #buy-perk:hover{
	      transform: scale(1.1);
	      box-shadow: 0 0 10px 5px yellow;
	      background-color: white !important;	
	      color: black !important;
	      font-weight: bold;
	  }

	  #level-up-button:hover{
	      transform: scale(1.1);
	      box-shadow: 0 0 10px 5px yellow;
	      background-color: white !important;	
	      color: black !important;
	      font-weight: bold;
          }

	  #pause{
	  	font-size: 40px !important;
		background-color: #333;
		outline: none;
		border-radius: 100%;
		
          }



	  #pause:hover{
	      transform: scale(1.1);
	      box-shadow: 0 0 10px 5px cyan;
	      background-color: white !important;	
	      color: black !important;
	      font-weight: bold;
          }

	  #refresh{
	  	font-size: 40px !important;
	 	left: 92%;
		top:75%;
		background-color: #333;
		outline: none;
		border-radius: 100%;
		
          }



	  #refresh:hover{
	      transform: scale(1.1);
	      box-shadow: 0 0 10px 5px cyan;
	      background-color: white !important;	
	      color: black !important;
	      font-weight: bold;
          }

	  #recruit-knight:hover{
	      transform: scale(1.1);
	      box-shadow: 0 0 10px 5px green;
	      background-color: white !important;	
	      color: black !important;
	      font-weight: bold;
          }

	  #ghost-button:hover{
	      transform: scale(1.1);
	      box-shadow: 0 0 10px 5px purple;
	      background-color: white !important;	
	      color: black !important;
	      font-weight: bold;
          }

	  #upgrade-damage:hover{
	      transform: scale(1.1);
	      box-shadow: 0 0 10px 5px crimson;
	      background-color: white !important;	
	      color: black !important;
	      font-weight: bold;
          }
	
	  #critical-hit-upgrade:hover{
	      transform: scale(1.1);
	      box-shadow: 0 0 10px 5px crimson;
	      background-color: white !important;	
	      color: black !important;
	      font-weight: bold;
          }
	
	  #critical-damage-upgrade:hover{
	      transform: scale(1.1);
	      box-shadow: 0 0 10px 5px crimson;
	      background-color: white !important;	
	      color: black !important;
	      font-weight: bold;
          }

	  #dr-button:hover{
	      transform: scale(1.1);
	      box-shadow: 0 0 10px 5px blue;
	      background-color: white !important;	
	      color: black !important;
	      font-weight: bold;
          }

	  #heal-upgrade:hover{
	      transform: scale(1.1);
	      box-shadow: 0 0 10px 5px purple;
	      background-color: white !important;	
	      color: black !important;
	      font-weight: bold;
          }

	  #guardian-angel-upgrade:hover{
	      transform: scale(1.1);
	      box-shadow: 0 0 10px 5px blue;
	      background-color: white !important;	
	      color: black !important;
	      font-weight: bold;
          }

	  #refill-health:hover{
	      transform: scale(1.1);
	      box-shadow: 0 0 10px 5px crimson;
	      background-color: white !important;	
	      color: black !important;
	      font-weight: bold;
          }

	  #max-health-upgrade:hover{
	      transform: scale(1.1);
	      box-shadow: 0 0 10px 5px crimson;
	      background-color: white !important;	
	      color: black !important;
	      font-weight: bold;
          }

	  #regenerate-hp:hover{
	      transform: scale(1.1);
	      box-shadow: 0 0 10px 5px crimson;
	      background-color: white !important;	
	      color: black !important;
	      font-weight: bold;
          }

	  #steal-hp:hover{
	      transform: scale(1.1);
	      box-shadow: 0 0 10px 5px crimson;
	      background-color: white !important;	
	      color: black !important;
	      font-weight: bold;
          }

	  #voltage-upgrade:hover{
	      transform: scale(1.1);
	      box-shadow: 0 0 10px 5px orange;
	      background-color: white !important;	
	      color: black !important;
	      font-weight: bold;
          }

	  #max-voltage-upgrade:hover{
	      transform: scale(1.1);
	      box-shadow: 0 0 10px 5px orange;
	      background-color: white !important;	
	      color: black !important;
	      font-weight: bold;
          }

	  #auto-xp:hover{
	      transform: scale(1.1);
	      box-shadow: 0 0 10px 5px yellow;
	      background-color: white !important;	
	      color: black !important;
	      font-weight: bold;
          }

	  #concentration-button:hover{
	      transform: scale(1.1);
	      box-shadow: 0 0 10px 5px yellow;
	      background-color: white !important;	
	      color: black !important;
	      font-weight: bold;
          }

	  #fireball-upgrade{
	  	background-color: black;
		color: white;
	  }

	  #super-nova{
	  	background-color: black;
		color: white;
	  }

	  #fireball-upgrade:hover{
	      transform: scale(1.1);
	      box-shadow: 0 0 10px 5px purple;
	      background-color: white !important;	
	      color: black !important;
	      font-weight: bold;
          }


	  #spell-upgrades:hover{
	      transform: scale(1.1);
	      box-shadow: 0 0 10px 5px purple;
	      background-color: white !important;	
	      color: black !important;
	      font-weight: bold;
          }

	  #super-nova:hover{
	      transform: scale(1.1);
	      box-shadow: 0 0 10px 5px purple;
	      background-color: white !important;	
	      color: black !important;
	      font-weight: bold;
          }

	  #fireball:hover{
	  	background-color:white !important;
		box-shadow: 0 0 10px 5px orange;
		font-weight: bold;
		color: black !important;
		transform: scale(1.1);
          }

	  #no-mercy-upgrade:hover{
	  	background-color:white !important;
		box-shadow: 0 0 10px 5px purple;
		font-weight: bold;
		color: black !important;
		transform: scale(1.1);
          }

	  #adrenaline:hover{
	  	background-color:white !important;
		box-shadow: 0 0 10px 5px red;
		font-weight: bold;
		color: black !important;
		transform: scale(1.1);
          }

	  #adrenaline-upgrade:hover{
	  	background-color:white !important;
		box-shadow: 0 0 10px 5px purple;
		font-weight: bold;
		color: black !important;
		transform: scale(1.1);
          }

	  #freeze-upgrade:hover{
	  	background-color:white !important;
		box-shadow: 0 0 10px 5px purple;
		font-weight: bold;
		color: black !important;
		transform: scale(1.1);
          }


	  #flame-animation{
	  	font-size: 300px;
		position: absolute;
		top: 40%;
		left: 37%;
		background: transparent;
		border: none;
		z-index: -3;
		display: none;
		animation: flicker 5s infinite alternate;
	  }

	#income-upgrades:hover{
	  	background-color:white !important;
		box-shadow: 0 0 10px 5px lime;
		font-weight: bold;
		color: black !important;
		transform: scale(1.1);
          }

	#income-upgrades{
		background-color: black;
		color: white;
          }


	
	@keyframes flicker {
  		0%   { transform: translate(0,0) scale(1); opacity: 1; }
  		25%  { transform: translate(2px,-2px) scale(1.05); opacity: 0.7; }
  		50%  { transform: translate(-2px,2px) scale(0.95); opacity: 0.9; }
  		75%  { transform: translate(1px,-1px) scale(1.1); opacity: 0.85; }
  		100% { transform: translate(0,0) scale(1); opacity: 1; }
	}

	#lucky-fingers-upgrade:hover{
	  	background-color:white !important;
		box-shadow: 0 0 10px 5px lime;
		font-weight: bold;
		color: black !important;
		transform: scale(1.1);		
	}

	#shockwave-upgrade:hover{
	  	background-color:white !important;
		box-shadow: 0 0 10px 5px orange;
		font-weight: bold;
		color: black !important;
		transform: scale(1.1);		
	}

	#execution-upgrade:hover{
	  	background-color:white !important;
		box-shadow: 0 0 10px 5px red;
		font-weight: bold;
		color: black !important;
		transform: scale(1.1);		
	}

	#antibodies-upgrade:hover{
	  	background-color:white !important;
		box-shadow: 0 0 10px 5px red;
		font-weight: bold;
		color: black !important;
		transform: scale(1.1);		
	}

	#sell-soul:hover{
		background-color:white !important;
		box-shadow: 0 0 10px 5px purple;
		font-weight: bold;
		color: black !important;
		transform: scale(1.1);		
	}

	#lucky-dip:hover{
		background-color:white !important;
		box-shadow: 0 0 10px 5px lime;
		font-weight: bold;
		color: black !important;
		transform: scale(1.1);		
	}


	#mage-fury:hover{
		background-color:white !important;
		box-shadow: 0 0 10px 5px white;
		font-weight: bold;
		color: black !important;
		transform: scale(1.1);		
	}

	#shield-wall:hover{
		background-color:white !important;
		box-shadow: 0 0 10px 5px white;
		font-weight: bold;
		color: black !important;
		transform: scale(1.1);		
	}


	#marked-for-death:hover{
		background-color:white !important;
		box-shadow: 0 0 10px 5px white;
		font-weight: bold;
		color: black !important;
		transform: scale(1.1);		
	}


	#near-death-experience:hover{
		background-color:white !important;
		box-shadow: 0 0 10px 5px white;
		font-weight: bold;
		color: black !important;
		transform: scale(1.1);		
	}

	#mosquito:hover{
		background-color:white !important;
		box-shadow: 0 0 10px 5px red;
		font-weight: bold;
		color: black !important;
		transform: scale(1.1);		
	}

	#eye-for-eye-upgrade:hover{
		background-color:white !important;
		box-shadow: 0 0 10px 5px blue;
		font-weight: bold;
		color: black !important;
		transform: scale(1.1);		
	}

	#lucky-dip-spell-upgrade:hover{
		background-color:white !important;
		box-shadow: 0 0 10px 5px purple;
		font-weight: bold;
		color: black !important;
		transform: scale(1.1);		
	}

	#bloodthirsty-upgrade:hover{
		background-color:white !important;
		box-shadow: 0 0 10px 5px red;
		font-weight: bold;
		color: black !important;
		transform: scale(1.1);		
	}

	#real-estate-upgrade:hover{
		background-color:white !important;
		box-shadow: 0 0 10px 5px lime;
		font-weight: bold;
		color: black !important;
		transform: scale(1.1);		
	}

	#stop-time:hover{
		background-color:white !important;
		box-shadow: 0 0 10px 5px white;
		font-weight: bold;
		color: black !important;
		transform: scale(1.1);		
	}

	#split-seconds:hover{
		background-color:white !important;
		box-shadow: 0 0 10px 5px purple;
		font-weight: bold;
		color: black !important;
		transform: scale(1.1);		
	}

	#dragged-eternity-upgrade:hover{
		background-color:white !important;
		box-shadow: 0 0 10px 5px purple;
		font-weight: bold;
		color: black !important;
		transform: scale(1.1);		
	}

	#frozen-in-time-upgrade:hover{
		background-color:white !important;
		box-shadow: 0 0 10px 5px purple;
		font-weight: bold;
		color: black !important;
		transform: scale(1.1);		
	}

	#time-travel-upgrade:hover{
		background-color:white !important;
		box-shadow: 0 0 10px 5px purple;
		font-weight: bold;
		color: black !important;
		transform: scale(1.1);		
	}

	#rewind:hover{
		background-color:white !important;
		box-shadow: 0 0 10px 5px cyan;
		font-weight: bold;
		color: black !important;
		transform: scale(1.1);		
	}

	#rewind{
		font-size: 40px;
		background: #333;
		border-radius: 100%;
		display: none;
	}

	#buttons-container{
		position: absolute;
		display: flex;
		top: 85%;
		left: 86%;
		width: 100px;
		height: 100px
		border-radius: 50%;
	}

	#saturn-lives{
		background-color: #333;
		color: white;
		font-size: 150%;
		display: none;
			
	}