body {
  background-color: white;
}

body {
    margin: 0 auto; /* Center the content */
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center horizontally */
    justify-content: center; /* Center vertically if you want */
}

.map {
  position: fixed; /* Allows using top, left, etc. */
  top: 0; /* Aligns it to the top */
  left: 0; /* Aligns it to the left */
  right: 0; /* Aligns it to the right */
  z-index: 1; 
  opacity: 0; /* Initially hidden */
  transition: opacity 2.5s ease-in; /* Fade effect */
}

.graticule {
  stroke-width: 0.5px;
  stroke: lightgray;
  fill: none;
}

header {
  position: fixed;
  top: 0; /* Aligns it to the bottom */
  left: 0; /* Aligns it to the left */
  width: 100%; /* Makes it span the full width */
  margin: 0;
  clear: both; /* Ensure it stays below floated elements */
  z-index: 20;
}

#resetButton, #showCirclesButton, #showColorSwatchesButton, #showTaxonomyButton {
  font-family: "Kodchasan", sans-serif;
  font-weight: 500;
  font-size: 10pt;
  color: gray;
  position: fixed;
  padding: 10px 20px; /* Add padding */
  background-color: #ffcc00; /* Background color */
  color: black; /* Text color */
  border: none; /* Remove border */
  cursor: pointer; /* Pointer cursor */
}

#resetButton {
  top: 15px;
  right: 15px;
}

#showCirclesButton {
  top: 15px;
  right: 125px;
}

#showColorSwatchesButton {
  top: 15px;
  right: 245px;
}

#showTaxonomyButton {
  top: 15px;
  right: 365px;
}

#title h1, h2 {
  font-family: "Kodchasan", sans-serif;
  color: black;
  display: inline-block;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 1920px;
}

#title h2 {
  margin-left: 15px;
  font-weight: 400;
}

footer {
  position: fixed; 
  bottom: 0; /* Aligns it to the bottom */
  left: 0; /* Aligns it to the left */
  width: 50%; /* Makes it span the full width */
  clear: both; /* Ensure it stays below floated elements */
  z-index: 10;
}

footer h3, p {
  letter-spacing: 0.1em;
}

footer h3 {
  font-family: "Kodchasan", sans-serif;
  color: gray;
  font-size: 10pt;
}
footer p {
  font-family: "Kodchasan", sans-serif;
  color: gray;
  font-size: 9pt;
}

#creditsDiv {
  background-color: white;
  padding-left: 35px;
  padding-right: 35px;
  padding-top: 20px;
  padding-bottom: 20px;
}

#NudiDivs {
  z-index: 15;
  position: fixed;
  top: 68px;
  right: 0;
  width: 50%;
  overflow-y: auto; 
  max-height: 97vh;
  opacity: 0; /* Initially hidden */
  transition: opacity 3s ease-in; /* Fade effect */
  box-sizing: border-box;
  padding-bottom: 20px;
}

#NudiColors {
  z-index: 15;
  position: fixed;
  top: 68px;
  left: 0;
  width: 50%;
  overflow-y: auto; 
  max-height: 97vh;
  opacity: 0;
  transition: opacity 3s ease-in;
  box-sizing: border-box;
  padding-bottom: 15px;
}

#NudiTaxi {
  z-index: 15;
  position: fixed;
  top: 68px;
  left: 0;
  width: 50%;
  height: 100%;
  max-height: 97vh;
  opacity: 0;
  transition: opacity 3s ease-in;
  box-sizing: border-box;
  padding-bottom: 15px;
}

.clickable {
  pointer-events: all;
  cursor: pointer; 
}

.not-clickable {
  pointer-events: none;
  cursor: default; 
}

.radio {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 400;
}

.radio-Reds {
  --md-sys-color-primary: red;
  --md-radio-hover-icon-color: orangered;
  --md-radio-hover-state-layer-color: red;
  --md-radio-icon-color: orangered;
  --md-radio-pressed-icon-color: red;
}
.radio-Purples {
  --md-sys-color-primary: purple;
  --md-radio-hover-icon-color: mediumorchid;
  --md-radio-hover-state-layer-color: purple;
  --md-radio-icon-color: mediumorchid;
  --md-radio-pressed-icon-color: purple;
}
.radio-Blues {
  --md-sys-color-primary: blue;
  --md-radio-hover-icon-color: dodgerblue;
  --md-radio-hover-state-layer-color: blue;
  --md-radio-icon-color: dodgerblue;
  --md-radio-pressed-icon-color: blue;
}
.radio-Greens {
  --md-sys-color-primary: green;
  --md-radio-hover-icon-color: lightgreen;
  --md-radio-hover-state-layer-color: green;
  --md-radio-icon-color: lightgreen;
  --md-radio-pressed-icon-color: green;
}
.radio-Blacks {
  --md-sys-color-primary: black;
  --md-radio-hover-icon-color: dimgray;
  --md-radio-hover-state-layer-color: black;
  --md-radio-icon-color: dimgray;
  --md-radio-pressed-icon-color: black;
}
.radio-Browns {
  --md-sys-color-primary: brown;
  --md-radio-hover-icon-color: chocolate;
  --md-radio-hover-state-layer-color: brown;
  --md-radio-icon-color: chocolate;
  --md-radio-pressed-icon-color: brown;
}
.radio-Other {
  --md-sys-color-primary: gray;
  --md-radio-hover-icon-color: darkgray;
  --md-radio-hover-state-layer-color: gray;
  --md-radio-icon-color: darkgray;
  --md-radio-pressed-icon-color: gray;
}
.radio-Yellows {
  --md-sys-color-primary: yellow;
  --md-radio-hover-icon-color: lightgoldenrodyellow;
  --md-radio-hover-state-layer-color: yellow;
  --md-radio-icon-color: lightgoldenrodyellow;
  --md-radio-pressed-icon-color: yellow;
}
.radio-Oranges {
  --md-sys-color-primary: orange;
  --md-radio-hover-icon-color: gold;
  --md-radio-hover-state-layer-color: orange;
  --md-radio-icon-color: gold;
  --md-radio-pressed-icon-color: orange;
}
.radio-Whites {
  --md-sys-color-primary: white;
  --md-radio-hover-icon-color: whitesmoke;
  --md-radio-hover-state-layer-color: white;
  --md-radio-icon-color: whitesmoke;
  --md-radio-pressed-icon-color: white;
}

#NudiContainers {
  background: black;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: "Kodchasan", sans-serif;
  opacity: 0; /* Initially hidden */
  transition: opacity 0.5s ease-in; /* Fade effect */
}

.NudiContainers.visible {
  opacity: 1; /* Fully visible */
}

img {
  width: 100%; /* Thumbnail size */
  height: auto; /* Maintain aspect ratio */
}

#toggleContainer {
  z-index: 3; /* Ensure it appears above other content */
  padding-bottom: 10px;
  width: 25%;
}

.toggle-section {
  margin: 10px 0;
}

.toggle-section button {
  margin-left: 10px;
  font-family: "Kodchasan", sans-serif;
  font-weight: 500;
  font-size: 16pt;
  color: gray;
}

.content {
  margin-top: 5px; /* Space between button and content */
  margin-left: 10px;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 200;
  font-size: 14pt;
  color: gray;
}

.NudiTaxonomy div {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.tax_kingdom,
.tax_phylum,
.tax_class,
.tax_subclass,
.tax_order,
.tax_family,
.title {
  display: inline-block; /* Ensures all are inline blocks */
  padding: 5px 15px; /* Common padding for all */
}

.tax_kingdom {
    background-color: #87898c;
}

.tax_phylum {
  background-color: #7c7d80;
}

.tax_class {
  background-color: #707173;
}

.tax_subclass {
  background-color: #636466;
}

.tax_order {
  background-color: #555658;
}

.tax_family {
  background-color: #474749;
}  

.title {
  background-color: #373537;
}

#section h3, h4, h5, h6, p {
  font-family: "Kodchasan", sans-serif;
  max-width: 1920px;
  margin-bottom: 0;
  margin-top: 0;
}

h1 {
  font-weight: 700;
  font-size: 28pt;
  color: black;
}

.TaxTooltip h2 {
  margin-top: 0;
  font-weight: 400;
  font-size: 18pt;
  color: #262262;
}

h3 {
  font-weight: 500;
  font-size: 16pt;
  color: #262262;
}

h4 {
  font-weight: 700;
  font-size: 12pt;
  text-transform: uppercase;
  margin-left: 0px;
}

h5 {
  font-weight: 700;
  font-size: 12pt;
  letter-spacing: 1px;
  color: white;
}

p {
  font-weight: 300;
  font-size: 14pt;
}

.mapTooltip {
  display: flex;
  align-items: center;
  z-index: 100;
}

.NudiTooltip {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  align-items: center;    /* Center align the items */
  z-index: 4;
}
.tooltip-title {
  font-family: 'Kodchasan', sans-serif;
  color: white;
}

.mapTooltip img {
  width: 100px; /* Thumbnail size */
  height: auto; /* Maintain aspect ratio */
  z-index: 4;
}

.NudiTooltip img {
  width: 300px; /* Thumbnail size */
  height: auto; /* Maintain aspect ratio */
  z-index: 4;
}

.TaxTooltip, .SwatchTooltip, .NudiSwatchTooltip, .TaxonomyTooltip {
  z-index: 7000; /* Make sure it's above other elements */
  font-family: 'Kodchasan', sans-serif;
  color: white;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
}


@media (max-width: 1024px) {
  /* Styles for tablets */

  header {
    position: fixed;
    top: 0; /* Aligns it to the bottom */
    left: 0; /* Aligns it to the left */
    width: 50%; /* Makes it span the full width */
    margin: 0;
    clear: both; /* Ensure it stays below floated elements */
    z-index: 10;
  }

  #NudiDivs {
    z-index: 3;
    position: fixed;
    top: 0;
    right: 0;
    width: 50%;
    overflow-y: auto; 
    max-height: 100vh;
    opacity: 0; /* Initially hidden */
    transition: opacity 3s ease-in; /* Fade effect */
  }

  #resetButton {
    font-family: "Kodchasan", sans-serif;
    font-weight: 500;
    font-size: 9pt;
    color: gray;
    position: fixed;
    padding: 5px 10px; /* Add padding */
    background-color: #ffcc00; /* Background color */
    color: black; /* Text color */
    border: none; /* Remove border */
    cursor: pointer; /* Pointer cursor */
  }
  
  #resetButton {
    top: 115px;
    left: 15px;
    width: 150px;
  }
  
  #showCirclesButton, #showColorSwatchesButton, #showTaxonomyButton {
    display: none;
  }

}




/*

// Reminder to self of the Kodchasan styles
.kodchasan-extralight {
  font-family: "Kodchasan", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.kodchasan-light {
  font-family: "Kodchasan", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.kodchasan-regular {
  font-family: "Kodchasan", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.kodchasan-medium {
  font-family: "Kodchasan", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.kodchasan-semibold {
  font-family: "Kodchasan", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.kodchasan-bold {
  font-family: "Kodchasan", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.kodchasan-extralight-italic {
  font-family: "Kodchasan", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.kodchasan-light-italic {
  font-family: "Kodchasan", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.kodchasan-regular-italic {
  font-family: "Kodchasan", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.kodchasan-medium-italic {
  font-family: "Kodchasan", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.kodchasan-semibold-italic {
  font-family: "Kodchasan", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.kodchasan-bold-italic {
  font-family: "Kodchasan", sans-serif;
  font-weight: 700;
  font-style: italic;
}

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.fraunces-<uniquifier> {
  font-family: "Fraunces", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "SOFT" 0,
    "WONK" 0;
}

*/