:root {
  --default-bg:  		rgba(24, 8, 47, 1);   /* define */
  --default-80-bg:  	rgba(24, 8, 47, 0.8); 
  --default-15-bg: 		rgba(24, 8, 47, 0.15); /*part of gradient*/
  --default-75-bg: 		rgba(24, 8, 47, 0.75); /*part of gradient*/ 
  --insights-bg: 		rgba(47, 33, 64, 0.8);
  --insights-border:	rgba(206, 147, 216, 1); 
  --dark-border: 		rgba(149, 158, 212, 1);
  --insights-text:		#aea1c5;
  --dark-text: 			#a1b1c5;
  --text-default: 		#ccc;
}

		.kp-value {
			background-color: none;
			border-radius: 5px;
			padding: 5px 7px;
			box-shadow: 0 0 0 1px #fff; /* thick white border */
			margin: 0 auto;
			position: relative;
			display: inline-block;
			line-height: 80%;
			transition: max-width 0.3s; /* Add transition for smooth resizing */
		}
		
		.kp-value.kp1, 
		.kp-value.kp2, 
		.kp-value.kp3, 
		.kp-value.kp4, 
		.kp-value.kp5, 
		.kp-value.kp6, 
		.kp-value.kp7, 
		.kp-value.kp8, 
		.kp-value.kp9 {
			font-size: 190%;
			width: 37%;
		}

		.kp-value.kp0-1, 
		.kp-value.kp1-2, 
		.kp-value.kp2-3, 
		.kp-value.kp3-4, 
		.kp-value.kp4-5, 
		.kp-value.kp5-6, 
		.kp-value.kp6-7, 
		.kp-value.kp7-8, 
		.kp-value.kp8-9 {
			font-size: 170%;
			width: 60%;
		}
		
		.kp_txt {
			font-weight: 300;
			font-style: italic;
			vertical-align: super;
			font-size: smaller;
			margin-left: -1px;
		}
		
		.kp_num {
			font-weight: 700;
			font-style: italic;
			font-size: 140%;
			transition: font-size 0.3s, max-width 0.3s; /* Add transition for smooth resizing */
		}


        .kp-container .time {
            font-size: 1.5em;
            margin-top: 10px;
            position: relative;
        }

		#kp_now {
			transition: max-width 0.3s; /* Add transition for smooth resizing */
		}
	
		#kp_future{
			display:none;
			transition: max-width 0.3s; /* Add transition for smooth resizing */
		}
		#kp_now_small, #kp_future_small {
			font-size:110%;
		}
				

		


		
		#timestatus, #timefuture {
			font-weight: 300;
			font-size: 90%;
			border: none;
			box-shadow: none;
		}
		
		#timestatus {
			padding-left: 20px
		}
		
		.timestatus_kp0-1,
		.timestatus_kp1,
		.timestatus_kp1-2,
		.timestatus_kp2,
		.timestatus_kp2-3,
		.timestatus_kp5,
		.timestatus_kp5-6,
		.timestatus_kp6,
		.timestatus_kp6-7,
		.timestatus_kp7,
		.timestatus_kp7-8,
		.timestatus_kp8,
		.timestatus_kp8-9,
		.timestatus_kp9   {
			background-image: 
				url('../images/white_plane_arriving.svg'); /* Black plane for these Kp values */
			background-size: 
				17px 15px; /* Plane icon size */
			background-repeat: no-repeat;
			background-position: 0px 0px; /* Position the plane */
		}
		
		.timestatus_arrived_kp0-1,
		.timestatus_arrived_kp1,
		.timestatus_arrived_kp1-2,
		.timestatus_arrived_kp2,
		.timestatus_arrived_kp2-3,
		.timestatus_arrived_kp5,
		.timestatus_arrived_kp5-6,
		.timestatus_arrived_kp6,
		.timestatus_arrived_kp6-7,
		.timestatus_arrived_kp7,
		.timestatus_arrived_kp7-8,
		.timestatus_arrived_kp8,
		.timestatus_arrived_kp8-9,
		.timestatus_arrived_kp9 {
			background-image: 
				url('../images/white_plane_arriving.svg'); /* Black plane for these Kp values */
			background-size: 
				17px 15px; /* Plane icon size */
			background-repeat: no-repeat;
			background-position: 0px 0px; /* Position the plane */
		}
		
		/* kp_now-specific plane icon */
		.timestatus_kp3,
		.timestatus_kp3-4,
		.timestatus_kp4,
		.timestatus_kp4-5 {
			background-image: 
				url('../images/black_plane_arriving.svg'); /* Black plane for these Kp values */
			background-size: 
				17px 15px; /* Plane icon size */
			background-repeat: no-repeat;
			background-position: 0px 0px; /* Position the plane */
		}
		
		/* kp_now-specific plane icon */

		.timestatus_arrived_kp3,
		.timestatus_arrived_kp3-4,
		.timestatus_arrived_kp4,
		.timestatus_arrived_kp4-5 {
			background-image: 
				url('../images/black_plane_arriving.svg'); /* Black plane for these Kp values */
			background-size: 
				17px 15px; /* Plane icon size */
			background-repeat: no-repeat;
			background-position: 0px 0px; /* Position the plane */
		}
        
        .gx-modifier {
   	 	  font-weight: normal; /* Remove bold */
  		  letter-spacing: -0.05em; /* Adjust kerning */
         }
		

		/* Styling for kp4-5 (yellow tile) */
		.kp-container.kp4, .kp-container.kp4-5, .kp4, .kp4-5 {
			background: linear-gradient(150deg, #ffeb3b, #ffa726); /* Light yellow to orange */
			box-shadow: 
				0 0 5px rgba(0, 0, 0, 0.8), /* Outer yellow glow */
				inset 0 -4px 6px rgba(255, 165, 0, 0.6); /* Inner shadow for depth */
			border: 1px solid rgba(255, 204, 0, 0.8); /* Glowing yellow border */
			color: #000; /* Black text */
		}
		

		/* Specific gradient and styling for kp0-1 (blue tile) */
		.kp-container.kp0-1, .kp0-1, .kp-container.kp0, .kp0 {
			background: linear-gradient(150deg, #0044ff, #0033cc); /* Bright blue to darker blue */
			box-shadow: 
				0 0 5px rgba(0, 0, 0, 0.8), /* Outer lime glow */
				inset 0 -4px 6px rgba(0, 51, 204, 0.6); /* Inner shadow for depth */
			border: 1px solid rgba(0, 51, 255, 0.8); /* Glowing blue border */
			color: #fff; /* White text */
		}
		
		/* Specific gradient and styling for kp1 (blue tile) */
		.kp-container.kp1, .kp1 {
			background: linear-gradient(150deg, #0077ff, #0055cc); /* Light blue to medium blue */
			box-shadow: 
				0 0 5px rgba(0, 0, 0, 0.8), /* Outer lime glow */
				inset 0 -4px 6px rgba(0, 102, 255, 0.6); /* Inner shadow for depth */
			border: 1px solid rgba(0, 102, 255, 0.8); /* Glowing blue border */
			color: #fff; /* White text */
		}
		
		/* Specific gradient and styling for kp1-2 (cyan tile) */
		.kp-container.kp1-2, .kp1-2 {
			background: linear-gradient(150deg, #00a3cc, #008099); /* Light cyan to darker cyan */
			box-shadow: 
				0 0 5px rgba(0, 0, 0, 0.8), /* Outer lime glow */
				inset 0 -4px 6px rgba(0, 128, 153, 0.6); /* Inner shadow for depth */
			border: 1px solid rgba(0, 153, 204, 0.8); /* Glowing cyan border */
			color: #fff; /* White text */
		}
		
		/* Specific gradient and styling for kp2 (green tile) */
		.kp-container.kp2, .kp2 {
			background: linear-gradient(150deg, #27db91, #00995a); /* Light green to dark green */
			box-shadow: 
				0 0 5px rgba(0, 0, 0, 0.8), /* Outer lime glow */
				inset 0 -4px 6px rgba(0, 102, 51, 0.6); /* Inner shadow for depth */
			border: 1px solid rgba(15, 169, 106, 0.8); /* Glowing green border */
			color: #fff; /* White text */
		}
		
		/* Specific gradient and styling for kp2-3 (lime tile) */
		.kp-container.kp2-3, .kp2-3 {
			background: linear-gradient(150deg, #27db27, #009900); /* Lime green gradient */
			box-shadow: 
				0 0 5px rgba(0, 0, 0, 0.8), /* Outer lime glow */
				inset 0 -4px 6px rgba(51, 153, 26, 0.6); /* Inner shadow for depth */
			border: 1px solid rgba(102, 204, 51, 0.8); /* Glowing lime border */
			color: #fff; /* White text */
		}
		
		
		/* Specific gradient and styling for kp3-4 (green tile) */
		 .kp-container.kp3, .kp3{
			background: linear-gradient(150deg, #cae675, #84c900); /* Light green to vibrant green */
			box-shadow: 
				0 0 5px rgba(0, 0, 0, 0.8), /* Outer green glow */
				inset 0 -4px 6px rgba(102, 153, 0, 0.6); /* Inner shadow for depth */
			border: 1px solid rgba(153, 204, 0, 0.8); /* Glowing green border */
			color: #000; /* Black text */
		}
		
		/* Specific gradient and styling for kp3 (green tile) */
		.kp-container.kp3-4, .kp3-4 {
			background: linear-gradient(150deg, #cae675, #c2c900); /* Light green to vibrant green */
			box-shadow: 
				0 0 5px rgba(0, 0, 0, 0.8), /* Outer green glow */
				inset 0 -4px 6px rgba(102, 153, 0, 0.6); /* Inner shadow for depth */
			border: 1px solid rgba(153, 204, 0, 0.8); /* Glowing green border */
			color: #000; /* Black text */
		}
		
		/* Specific gradient and styling for kp5 (orange tile) */
		.kp-container.kp5, .kp5 {
			background: linear-gradient(150deg, #fc9b4c, #ff6c00); /* Light orange to dark orange */
			box-shadow: 
				0 0 5px rgba(0, 0, 0, 0.8), /* Outer lime glow */
				inset 0 -4px 6px rgba(255, 153, 0, 0.6); /* Inner shadow for depth */
			border: 1px solid rgba(255, 153, 0, 0.8); /* Glowing orange border */
			color: #fff; /* White text */
		}
		
		/* Specific gradient and styling for kp5-6 (red-orange tile) */
		.kp-container.kp5-6, .kp5-6 {
			background: linear-gradient(150deg, #ff6633, #d44313); /* Light red-orange to darker red-orange */
			box-shadow: 
				0 0 5px rgba(0, 0, 0, 0.8), /* Outer lime glow */
				inset 0 -4px 6px rgba(230, 77, 26, 0.6); /* Inner shadow for depth */
			border: 1px solid rgba(255, 77, 51, 0.8); /* Glowing red-orange border */
			color: #fff; /* White text */
		}
		
		/* Specific gradient and styling for kp6+ (red tile) */
		.kp-container.kp6, .kp-container.kp6-7, .kp-container.kp7, .kp-container.kp7-8,
		.kp-container.kp8, .kp-container.kp8-9, .kp-container.kp9,
		.kp6, .kp6-7, .kp7, .kp7-8,
		.kp8, .kp8-9, .kp9 {
			background: linear-gradient(150deg, #c63933, #9d0604); /* Bright red to dark red */
			box-shadow: 
				0 0 5px rgba(0, 0, 0, 0.8), /* Outer lime glow */
				inset 0 -4px 6px rgba(153, 0, 26, 0.6); /* Inner shadow for depth */
			border: 1px solid rgba(204, 0, 51, 0.8); /* Glowing red border */
			color: #fff; /* White text */
		}

		/* Ensure specific box-shadow for kp-value */
		.kp0-1, .kp1, .kp1-2, .kp2, .kp2-3, .kp5, .kp5-6, .kp6, .kp6-7, .kp7, .kp7-8, .kp8, .kp8-9, .kp9  {
			box-shadow: 0 0 0 1px #fff; /* Light box-shadow */
		}
		
		/* Ensure specific box-shadow for kp-value */
		.kp3, .kp3-4, .kp4, .kp4-5 {
			box-shadow: 0 0 0 1px #000; /* Dark box-shadow */
		}
		
.background-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-size: cover;
	background: url('../images/gardur_mob_hires.webp') no-repeat contain;
    z-index: -1; /* Ensures it stays in the background */
    border: 0px solid red;
}