body {
    font-family: Times New Roman;
    background-image: linear-gradient(to bottom left, black,  midnightblue);
    color: white;
}

.center {
  text-align: center;
}

h1 {
    text-align: center;
    color: lightpink;
}

h2 {
    text-align: center;
    color: lightpink;
}

h3 {
  text-align: center;
  color: lightpink;
} 


h4 {
  text-align: center;
  color: powderblue;
} 

a {
  color: powderblue;
}

a:active {
  color: yellow;
}


h5 {
  text-align: center;
}

.frame {
  align-items: center;
}

.row {
  display: flex; 
  flex-direction: row;
	justify-content: space-around;
	align-items: center;
	align-content: center;
}

.row1 {
  display: flex; 
  flex-direction: row;
	justify-content: space-around;
	align-items: center;
	align-content: center;
} 

.row2 {
  display: flex; 
  flex-direction: row;
	justify-content: space-around;
	align-items: center;
	align-content: center;
}

/* Set each column of first row of histgrams to 1/3 */
#col1 {
  width: 33%;
  min-height: 400px;
}

#col2 {
  width: 33%;
  min-height: 400px;
}

#col3 {
  width: 33%;
  min-height: 400px;
}

/* Set each column of second row of histgrams to 1/3 */
#col4 {
  width: 33%;
  min-height: 400px;
}

#col5 {
  width: 33%;
  min-height: 400px;
}

.left {
  width: 50%;
}


.right {
  width: 50%;
}

.selected {
  opacity: 1;
  stroke: white;
  stroke-width: 1.5px;
}


.histo {
  outline: solid;
  outline-width: 1px;
  outline-color: white;
}



.histo:hover {
  fill: black;
  
}

.tooltip {
  position: absolute;
  background-color: black;
  border:  solid;
  border-width: 2px;
  border-radius: 5px;
  padding: 5px;
}

.legend-circle {
  r: 5;
}

#star {
  fill: red;
}

#galaxy {
  fill: gold;
}

#qso {
  fill: deepskyblue;
}
.text {
  font-size: 15;
}

.plot {
  border: solid;
  border-width: 2px;
  border-color: black;
}