/* Style the main body  */
body { 
    font-size: 15px;
} 

 :root{
	--var-headerheight:  55px;
	--var-linkbreathingroom:  20px;
	--var-minwidthbtn-home:  45px;
	--var-minwidthbtn-about:  50px;
	--var-minwidthbtn-builder:  135px;
}
 
 
html {
	scroll-padding-top: calc(var(--var-headerheight) + var(--var-linkbreathingroom)); /* match fixed header height */
	scroll-behavior: smooth;
}

/* ///////////////////////// TOP ROW STYLES ///////////////////////// */
/* Style the top bar container (top bar with logo and tab buttons) */
.mainWindow-topRowContainer {	
	display: flex;  /* For easy alignment of children items */  
    height: var(--var-headerheight);
    width: 100%;  /* Takes up the full window width */    
    overflow: hidden; /* Ensures no scroll bars */  
	
    align-items: center;  /* Center children items vertically */  
    justify-content: center; /* Center children items horizontally */
	gap: 10px; /* Gap between children items */
	padding: 5px 10px 5px 10px; /* top right bottom left */ 
	
    border-bottom: 3px solid lightgray;    /* Adds a gray bottom border */  
	
	/* makes it always visible at the top */
    position: sticky;
    top: 0; 
	background-color:#f7ffff; 
    z-index: 10;
}

/* Style the buttons inside the top bar container container (buttons to toggle tabs) */
.mainWindow-topRowContainer button { 
	display: inline-block;   /* image and all buttons are in the same row */  
    cursor: pointer;    /* "clickable button" mouse cursor */ 
	
	/* button rectangle properties */
    background-color: white; /* white background for buttons (default is gray) */    	
	border-radius: 12px;
	border: 2px solid #00bcd4; 
	padding: 6px 14px;
	
	/* button text properties */
    font-family: "Arial Narrow";
    font-size: 16px;  
    font-weight: bold;   
	color: #003366; /* deep navy */ 
	
	transition: background-color 0.2s ease, transform 0.2s ease, 
				box-shadow 0.2s ease, font-weight 0.2s ease,
				letter-spacing 0.2s ease, text-shadow 0.2s ease; 
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	user-select: none;
}
.mainWindow-topRowContainer button:hover {  /* Clicked tab */  
	background-color: #e0f7fa;
	box-shadow: 0 0 10px rgba(0, 188, 212, 0.6);
	text-shadow: 0 0 0.5px currentColor;
} 
.mainWindow-topRowContainer button:active,
.mainWindow-topRowContainer button.active {/* Clicked tab */
	background-color: #b2ebf2;
	text-shadow: 0 0 0.5px currentColor;
	box-shadow: 0 0 12px rgba(0, 188, 212, 0.75) inset, 0 2px 4px rgba(0, 0, 0, 0.1); 
	
	letter-spacing: 0.4px; 
	transform: translateY(1px);
	font-weight: bolder;
}
 


/* Style the logo image at the left of the top bar container container */
.mainWindow-topRowContainer img {  
    display: inline-block; /* Ensure the logo container is inline */      
	margin-right: 15px; /* Additional space between logo and tab buttons */   	
	height: 100%;      /* Match the container’s height */
	width: auto;       /* Auto width to preserve aspect ratio */
}

/* Style of the main container with page content  */
.mainWindow-tabContentContainer { 
	opacity: 0;
	transition: opacity 0.15s ease;
	display: none; /* Hidden by default */
	padding: 10px 50px;
	width: 100%;
}
.mainWindow-tabContentContainer.show {
	display: block;
	opacity: 1;
}



/* ///////////////////////// TEXT STYLES ///////////////////////// */
/* Built-in headings
   Used by pages: 
	home.html
	export.html
	install.html
*/
h2{
    font-size: 16px;
    margin-bottom: 30px; 
}

h3{
    font-size: 15px;
    margin-bottom: 10px;
}

h4{
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 5px;
    margin-top: 5px;
}

h5{
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 15px;
    margin-top: 0px;
    font-style: italic;
    
}
h6{
    display: block;
    font-size: 13px;
    font-weight: normal;
    margin-bottom: 5px;
    margin-top: 0px;
    font-style: italic;
    
}
h7{
    display: block;
    font-size: 12px;
    font-weight: normal;
    margin-bottom: 2px;
    margin-top: 0px;
    font-style: italic;
    
}