html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    font-size: 1rem;
      font-family: Arial, Helvetica, sans-serif; /* Example web-safe font stack */
}

body {
    display: flex;
    flex-direction: column;
    height:100%;
}

header {
    
    display: flex;
    flex-direction: row;
    background-color: #e1e1e1;
    height: 38px;
}

.leftheader {
    
    flex-grow: 1;
    height:100%;
    
    display: flex;
    align-items: center;
    justify-content: center; 
    
    
    background-color: #e1e1e1;
    
}

.linksheader {

    font-family: 'Georgia', serif;
    font-size: 20px;


}
	

.rightheader {
    background-color: #FF0000;
    flex-grow: 0;
    height:100%;
	
}

main {
    flex: auto;
    background-color: #ccc;
    overflow:auto;
}

.linkDoutline {

outline: black 2px solid;

}

.linkD {

	color: #0000CC;
	cursor: pointer;

}

#canvas {
            position: absolute; /* Remove from document flow */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: block;
            
            outline: black 0px solid;
}
#output{
font-size:8pt;
height:100%;
width:100%;
color: #000;
	background-color: #FFF;

	flex-grow: 1;

  border: none; /* Removes the border */
  outline: none; /* Optional: Removes the focus outline */
  resize: vertical; /* Optional: Allows vertical resizing */
  padding: 0px; /* Optional: Adds some padding inside */
  font-family: sans-serif; /* Optional: Sets a font */

  overflow: hidden; /* Hide overflowing content AND scrollbars */
  resize: none;     /* Prevent user from resizing the textarea */
  /* Hide scrollbars for different browsers */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}
textarea::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.leftpane {
    
    flex-grow: 1;
    height:100%;
    
    
    
    background-color: #EEFFFF;
    overflow:auto;
    max-width: 300px;
}

#leftpaneX {

            position: absolute; /* Remove from document flow */
            top: 0;
            left: 0;
    height:100%;
    
    
    
    background-color: #EEFFFF;
    overflow:auto;
    width:300px;
    max-width: 300px;
    
    display: block;
}
	

.rightpane {
    background-color: #FFFFFF;
    flex-grow: 1;
    height:100%;
	
}

#histdataT {

	min-width: 150px;
	max-width: 150px;
	display:inline-block;
	line-height: 25px;
	vertical-align: top;
}


.colorbarContainer {
  display: flex;
  height: 100%;
  width: 50px;
  justify-content: center;
  flex-direction: column; /* Stack divs vertically */
  align-items: center;     /* Center items horizontally within the column */
  gap: 2px;               /* Spacing between divs */
}
.varLabel {

    color: #FFFFFF;
    font-size: 20px;
  
}
#vMT {
    text-align: center;
  font-size: 12px;

}

.colorbarItem {
  width: 25px;
  background-color: #555; /* Example color */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
   isolation: isolate;
  
  max-height: 60px;
  min-height: 40px;
  font-size: 12px;
}

.colorbarLeft {
  justify-content: right;
  padding-top: 5px;
  padding-bottom: 5px;
}
.colorbarRight {
  justify-content: left;
  padding-top: 5px;
  padding-bottom: 5px;
}
.colorbarCenter {
  padding-top: 5px;
  padding-bottom: 5px;
  justify-content: center;
}

.colorbarBottom {
  clip-path: polygon(0 100%, 50% 70%, 100% 100%); /* Top triangle */
  min-height: 10px;
}

.colorbarTop {
  clip-path: polygon(0 0, 50% 30%, 100% 0); /* Bottom triangle */
    min-height: 10px;
}

.verticalText {
  writing-mode: vertical-rl; /* Vertical, right-to-left */
  transform: rotate(180deg); /* Rotate to reverse the flow */
}

footer {
    height: 25px;
    background-color: #ccc;
    
    display: flex;
    justify-content: center; 
    color: gray;
    
}


#links2 {
    display: none;
  }
#links1 {
  }

.linkH {

	cursor: pointer;

}

#linkHm {

	display:none;
}


article {
    display: flex;
    flex-direction: row;
    height:100%;
    position: relative;
    background-color: #FFF;
}

#homepane {

	flex-grow: 1;
	background-color: #000;
	 position: relative;
	/*overflow: hidden;*/
	 
	 display: flex;
	 flex-direction: row;
  align-items: center;
	 
}

#demopane {

	display:none;

}
#photospane {

	position: absolute; /* Remove from document flow */
	top: 0;
	left: 300px;
    height:100%;
    width:100%;
    background-color: #FFFFFF;
    overflow:auto;
    
	display: none;

}
#researchpane {

	position: absolute; /* Remove from document flow */
	top: 0;
	left: 300px;
    height:100%;
    width:100%;
    background-color: #FFFFFF;
    overflow:auto;
    
	display:none;

}
#aboutpane {

	line-height: 25px;

	position: absolute; /* Remove from document flow */
	top: 0;
	left: 300px;
    height:100%;
    width:100%;
    background-color: #FFFFFF;
    overflow:auto;
    
	display:none;

}



@media screen and (max-width: 724px) {


#photospane {

	left: 0px;

}
#researchpane {

	left: 0px;

}
#aboutpane {



	left: 0px;

}


  .leftheader{
     justify-content: left; 
     margin-left: 20px;
  }
  
  
#homepane {
flex-direction: column;
}

.colorbarContainer {

flex-direction: row-reverse;
width:90%;
max-height: 50px;
}
.verticalText {
   writing-mode: horizontal-tb; /* Default writing mode */
    transform: rotate(0deg);     /* Reset rotation */
}

.colorbarBottom {/* Now points to the right */
  clip-path: polygon(100% 0, 60% 50%, 100% 100%);/* Now points to the left */
}

.colorbarTop {/* Now points to the left */
  clip-path: polygon(0 0, 40% 50%, 0 100%);
}

.colorbarLeft {
  justify-content: left;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 2px;
  padding-right: 2px;
}
.colorbarRight {
  justify-content: right;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 2px;
  padding-left: 2px;
}
.colorbarCenter {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 2px;
  padding-left: 2px;
  justify-content: center;
}
.colorbarItem {
  width: 25px;
  height: 25px;
  max-width: 60px;
  min-width: 25px;
  max-height: 28px;
  min-height: 28px;
}

  #links1 {
     display: none;
  }
  
  #links2 {
     display: block;
  }

  #linkHm {

	  display: block;
  }
  
  .leftpane {
    display: none;
  }
  #leftpaneX {
    display: none;
  }
  
  
}