.weather-row {
    display: flex;
    align-items: center; /* This keeps text and icon on the same horizontal line */
    gap: 20px;           /* Space between the icon and the data */
    margin-bottom: 15px; /* Space between each row */
}

.weather-row img {
    width: 67px;
    height: 67px;
    flex-shrink: 0;      /* Prevents the image from getting squished */
}

.weather-row p {
     /* Adjust text size to match the larger icons */
    margin: 0;
}
.userSelect{
	-moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
	
}
/*
#location-input {
    /* 1. Reset appearance to bypass browser-specific UI bugs */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* 2. Force the display to 'block' to ensure it's a valid render target */
    display: block;
    opacity: 1;
    visibility: visible;

    /* 3. Set explicit dimensions to prevent the cursor from being 'zero-height' */
    width: 100%;
    min-height: 1.2em;
    padding: 10px;

    /* 4. The Cursor and Text Properties */
    cursor: text;
    color: white;
    caret-color: orange;
}

*/
#plant{position:absolute;top:0;left:0;height:100%;width:100%;/*background-image:url('../Media/plant.png');*/background-repeat:no-repeat;background-size: contain;touch-action:manipulation}
#water{position:absolute;top:-10px;left:520px;height:340px;width:200px;background-repeat:no-repeat;background-size: contain;z-index:-1;transform:}
#timeSliderCanvas{position:absolute;left:0px;height:300px;width:1280px;background-image:url('../Media/timeSliderBackground.svg');background-repeat:no-repeat;background-size:1075px;background-position:105px 50%;opacity:55%}


#orangeBot{position:absolute;height:500px;width:500px;background-image:url('../Media/CC100.png');top:400px;left:20px;z-index:5;color:orange;opacity:55%;}

#emoticons{position:absolute;top:600px;}


#heracles{position:absolute;top:1px;right:1px;height:50px;width:50px;background-image:url('../Media/heracles.jpg');background-size:50px 50px;opacity:55%;}
#orangeBotToggle{position:absolute;height:10px;width:10px;top:51px;left:21px;z-index:5;background-color:orange}



#slowtoggleswitchon{
			
			height=""
			
		}		

#progress-bar {
    height: 100%;
    background-color: #00ff41; /* Industrial Green */
    color: black;             /* Contrast for the text */
    text-align: center;
    line-height: 25px;        /* Match the height of your container */
    font-weight: bold;
    width: 0%;
    transition: width 0.4s ease;
    white-space: nowrap;
}

#visualizer{box-sizing:border-box;height:50px;width:100px;color:orange;position:absolute;z-index:19;background-color:transparent}
#canvas2 {
		position: absolute;top:-3px;left:0px;height: 100%;
				width: 100%;background-color:none
	  }
#eightTrack{box-sizing: border-box;
				
				height: 100%;
				width: 100%;
				position: absolute;
				top:0px;
				left:0px;z-index: 19;visibility:hidden;background-color:none}
#eightTrackCaseFoDiv{}				
				
#songTitle{
  
   position:absolute;
font-family: "calder-dark-grit-shadow", sans-serif;

font-style: italic;color:orange;z-index: 1;
background-color:transparent

}
#outterSongTitle{
  
   position:absolute;
width:800px;
background-color:transparent

}
/*Sweet Switch The Matrix*/
/*Yeah Way*/
#mostOutterSongTitle{
  
   position:absolute;
width:100%;height:100%;overflow: hidden;z-index:2;background-color:transparent
}

#songTitleOverflow{
  
   position:absolute;
font-family: cursive;

font-style: italic;color:orange;z-index: 1;
background-color:transparent

}
#outterSongTitleOverflow{
  
   position:absolute;
width:800px;
background-color:transparent

}

#mostOutterSongTitleOverflow{
  
   position:absolute;
width:100%;height:100%;overflow: hidden;z-index:2;background-color:transparent


}				
/*				
terrible things happen to all? not so much. some may witness terrible things happening to others and accept that it is happening to themselves as well, this is false though. and even more if that person does not immediately seperate themselves from that terrible thing, as to say not propogate it any further, then that person is useless and should go to hell. which is the philosophical dichotomey whether to envolve one's self and be a hero, or end up making it worse, which happens so much in stroy telling, and reality. 				
*/				
				
#mediaWheel{position:absolute;height:0px;width:200px;top:203px;left:104px;background-image:url('../Media/CC100.png');background-repeat:no-repeat;background-position:center;user-select:none;z-index:19;transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}

#wheelUp{position:absolute;height:99px;width:100px;top:-103px;left:-105px;border:1px solid lime;;background-color:orange;background-size:300px;background-image:url('../Media/CC100.png');background-repeat:no-repeat;background-position:center;
}

body{background-color:black;height: 100%;touch-action: manipulation;}

#backgroundOpacity{ /* Essential positioning */
    position: absolute;
    top: 85px;
    left: 5%;
    width: 90%;
    height: 90%;
    z-index: 1;

    /* Background Styling */
    background-color: #111;
    background-image: url('../Media/newCodeForge.png');
    background-repeat: no-repeat;
    
    /* Fix: maintain aspect ratio while resizing */
    background-size: contain; 
    background-position: center center;

    /* Visuals */
    opacity: 0.6; /* Standard decimal for better compatibility */
    box-shadow: 0px -30px 30px 0 orange, 
                0px 30px 30px 0 orange;}
				
#newCodeForgeText{
	text-shadow: 
    0 0 5px lime, 
    0 0 15px orange, 
    0 0 30px lime;
	color:orange;
	font-size:50px;
	position:absolute;
	height:60px;
	width:90%;
	top:-10px;
	left:5%;
	z-index:2;
	background-image:url('../Media/americanFlag.png');
	text-align:center;
	background-size: 1000px;
	background-repeat:no-repeat;
	background-position:center -350px;
	opacity:60%

}

#wheelDown{position:absolute;height:99px;width:100px;top:-2px;left:-105px;border:1px solid lime;background-color:orange;background-size:300px;background-image:url('../Media/CC100.png');background-repeat:no-repeat;background-position:center}

#arrow{position:absolute;height:40px;width:70px;top:160px;left:200px;none;font-size:3em;color:lime;}

#innerArrow{position:absolute;top:-30px;left:0px;}

#cover{position:absolute;height:98px;width:200px;top:100%;left:-3px;z-index:1;background-color:orange;background-size:300px;background-image:url('../Media/CC100.png');background-repeat:no-repeat;background-position:center}

#cover2{position:absolute;z-index:1;height:50px;width:50px;top:-102px;left:-3px;border-radius:25px;background-color:orange;background-size:300px;background-image:url('../Media/CC100.png');background-repeat:no-repeat;background-position:center;}

#wheelOn{position:absolute;z-index:2;height:50px;width:50px;top:-102px;left:-3px;background-color:orange;background-size:300px;border:3px solid lime;border-radius:25px;background-image:url('../Media/CC100.png');background-repeat:no-repeat;background-position:0px 0px}				
#userSelectArea{height:100%;width:100%;user-select:none}

#lever{position:absolute;height:20px;width:75px;top:100px;left:200px;backgroundColor:orange;border:3px solid lime;transform-origin:0px 15px}

#innerUp{position:absolute;top:12px;left:36px;font-size:4em;color:lime}
#innerDown{position:absolute;top:6px;left:36px;font-size:4em;color:lime}
#hinge{position:absolute;width:20px;height:0px;background-color:lime;top:-3px;left:-62px}	
#powerButtonDiv{font-size:2em}



#secondHand{
	position:absolute;top:233px;left:233px;height:180px;width:5px;border:3px solid teal;transform-origin:center top;transform:rotate(180deg);border-radius:5px;background-color:teal;z-index:5
}

#minuteHand{
	position:absolute;top:233px;left:233px;height:185px;width:5px;border:3px solid lime;transform-origin:center top;transform:rotate(180deg);border-radius:5px;z-index:4
}

#hourHand{
	position:absolute;top:233px;left:233px;height:100px;width:5px;border:3px solid lime;transform-origin:center top;transform:rotate(180deg);border-radius:5px;z-index:3
}

/*
#compass{position:absolute;top:237px;left:33px;height:400px;width:400px;border-radius:200px;border:1px solid green}

#compass02{position:absolute;top:33px;left:233px;height:400px;width:400px;border-radius:200px;border:1px solid green}




#triangle{position:absolute;height:600px;width:600px;background-image:url('Media/equilateralTriangle.png');transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,10);top:-275px;left:-278px}

#line{position:absolute;top:20px;left:21px;height:25px;width:1px;border:.5px solid green;background-color:green}

.verticle{height:50px;width:.5px;position:absolute;left:24px;border:.5px solid green;}

.horizontal{height:.5px;width:50px;position:absolute;top:24px;border:.5px solid green;}
*/
.hour{height:25px;width:25px;position:absolute;top:11.5px;left:11.5px;}

.innerHour{position:absolute;top:-1.5px;left:6.5px;font-size:1.2em;color:orange}

.innerHourDoubleDigit{position:absolute;top:-2px;left:0px;font-size:1.2em;color:orange}

#oneHour{position:absolute;top:70.5px;left:285.5px;height:50px;width:50px;border:3px solid lime;border-radius:30px}

#twoHour{position:absolute;top:127.5px;left:343px;height:50px;width:50px;border:3px solid #FF6700;border-radius:30px}

#threeHour{position:absolute;top:205px;left:364.5px;height:50px;width:50px;border:3px solid green;border-radius:30px}

#fourHour{position:absolute;top:283.5px;left:343px;height:50px;width:50px;border:3px solid orange;border-radius:30px}

#fiveHour{position:absolute;top:340.5px;left:286px;height:50px;width:50px;border:3px solid lime;border-radius:30px}

#sixHour{position:absolute;top:361.5px;left:208px;height:50px;width:50px;border:3px solid #FF6700;border-radius:30px;}

#sevenHour{position:absolute;top:340px;left:130px;height:50px;width:50px;border:3px solid green;border-radius:30px}

#eightHour{position:absolute;top:283.5px;left:73px;height:50px;width:50px;border:3px solid orange;border-radius:30px}

#nineHour{position:absolute;top:205px;left:51.5px;height:50px;width:50px;border:3px solid lime;border-radius:30px}

#tenHour{position:absolute;top:127px;left:73px;height:50px;width:50px;border:3px solid #FF6700;border-radius:30px}

#elevenHour{position:absolute;top:70.5px;left:130.5px;height:50px;width:50px;border:3px solid green;border-radius:30px}

#twelveHour{position:absolute;top:49px;left:208px;height:50px;width:50px;border:3px solid teal;}
#clockCasing{height:250px;width:250px;background-color:black;border-radius:125px;transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,-55,-20,0,1.45)}
#clock{height:250px;width:250px;transform:scale(.60);position:absolute;top:-64px;left:-64px}
#signal{height:718px;width:718px;background-color:black;color:orange;text-shadow:
    1.5px 0 0 #111,  /* right shadow */
    -1.5px 0 0 #111, /* left shadow */
    0 1.5px 0 #111,  /* bottom shadow */
    0 -1.5px 0 #111; /* top shadow */user-select:none;text-align:center;position:absolute;top:0;left:0}

#newCodeAnimation{height:718px;width:7718px;user-select:none;text-align:center;position:absolute;top:0px;left:0px}
#downloadTile{
	height:718px;width:718px;background-color:black;position:absolute;top:0;left:0;
	
	
}
#downloadForm{position:absolute;top:385px;left:0;width:650px;color:orange;font-size:26px}

#progressContainer{position:absolute;top:125px;left:0;width:650px;color:orange;font-size:26px}

#folder-upload{position:absolute;border:3px solid orange;top:-400px;left:5px;width:420px;font-size:50px;background-color:orange;}


#sendButton{position:absolute;border:3px solid orange;top:230px;left:0px;width:100px;height:100px;background-color:orange;color:green;font-size:30px}


#downloadTileHeader{position:absolute;top:0px;left:5px;color:orange;font-size:30px}
#downloadTileradio-group{position:absolute;top:400px;left:515px;color:orange;font-size:30px}
#mp4Radio{border:3px solid orange;color:orange}
#mp4Radio:hover{border:3px solid lime;color:lime}
#mp3Radio{border:3px solid orange;color:orange}
#mp3Radio:hover{border:3px solid lime;color:lime}

#urlForDownload{position:absolute;top:450px;left:5px;color:orange;font-size:30px;width:300px;color:lime}
#urlForDownload label{color:orange}

#channelOne{height:718px;width:718px;background-color:black;color:orange;font-size:3em;user-select:none;text-align:center;position:absolute;top:0;left:0;} 

#testPrograms{height:718px;width:718px;background-color:black;color:orange;text-shadow:
    1.5px 0 0 lime,  /* right shadow */
    -1.5px 0 0 lime, /* left shadow */
    0 1.5px 0 lime,  /* bottom shadow */
    0 -1.5px 0 lime; /* top shadow */font-size:3em;user-select:none;text-align:center;position:absolute;top:0;left:0}
	#inventionCenter{height:718px;width:718px;background-color:black;color:orange;text-shadow:
    1.5px 0 0 lime,  /* right shadow */
    -1.5px 0 0 lime, /* left shadow */
    0 1.5px 0 lime,  /* bottom shadow */
    0 -1.5px 0 lime; /* top shadow */font-size:3em;user-select:none;text-align:center;position:absolute;top:0;left:0;overflow:scroll}

#channelThree{height:718px;width:718px;background-color:black;color:orange;text-shadow:
    1.5px 0 0 lime,  /* right shadow */
    -1.5px 0 0 lime, /* left shadow */
    0 1.5px 0 lime,  /* bottom shadow */
    0 -1.5px 0 lime; /* top shadow */font-size:3em;user-select:none;text-align:center;position:absolute;top:0;left:0;background-size:718px 718px;}

#channelOneVideo{}

#channelOneTable{position:absolute;top:50px;left:1.5px}

#TV{
height:100%;width:100%;opacity:55%;
	  contain: layout style paint;
    will-change: transform;
}	

#merrychristmas2025 {
    contain: layout style paint;
    will-change: transform;
}

#avatars{box-sizing:border-box;height:700px;width:300px;border-radius:10px;position:absolute;top:225px;left:235px;background-color:orange;z-index:16;visibility:hidden}


.avatars{box-sizing:border-box;height:700px;width:300px;border-radius:10px;position:absolute;top:0px;left:300px;background-color:lime;transition:transform 2s;opacity:0%}