:root {
  --c1: #222831;
  --c2: #31363F;
  --c3: #76ABAE;
  --c4: #EEEEEE;
  --c5: #CFCFD2;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/RobotoMono-Regular.woff2') format('woff2'), /* Ensure these paths match your file names */
         url('fonts/RobotoMono-Regular.woff') format('woff');
    font-display: swap; /* Recommended for better user experience */
}

body {
  font-size: 14px;
  margin: 0; /* Remove default body margin */
  background-color: var(--c1); /* Your background color */
  color: var(--c4); /* Your text color */
  font-family: 'Roboto Mono', 'Courier New', monospace; /* Your font family */
  padding-top: 20px; /* Adjust 4rem if your top-bar's actual height changes */
  padding-left: 20px; /* Retain original padding for left */
  padding-right: 20px; /* Retain original padding for right */
  padding-bottom: 20px; /* Retain original padding for bottom */
}

.content {
  padding-top: 58px;
}

h2 {
    color: var(--c4);
    text-align: center;
    margin-bottom: 20px;
}

h3 {
    color: var(--c4);
    text-align: center;
    margin-bottom: 20px;
}

#scatterPlotContainer {
    display: flex;
    align-items: center;
    height: 600px; /* Set a fixed height for the entire plot and dropdown */
    width: 100%;
}

#scatterPlot{
    flex-grow: 1;
    width: 100%;
    height: 100%; /* Ensure the plot takes the full height */
}

#caloriesPlotContainer {
    display: flex;
    align-items: center;
    height: 600px; /* Set a fixed height for the entire plot and dropdown */
}

#caloriesPlot {
    width: 80%;
    height: 100%; /* Ensure the plot takes the full height */
}


/* Boxes */

.updatemenu-item-rect:hover {
      background-color: var(--c1); /* Green hover color */
      fill: var(--c4);
  }

.updatemenu-item-text:hover {
      background-color: var(--c3); /* Green hover color */
      fill: var(--c1);
      color: var(--c1);
  }

/* Ensure plot takes up the full space */
#caloriesPlot {
    width: 100%;
    height: 100%;
}


/* BEGIN Collapsible content */

.collapsible-container {
    max-width: 800px;
    margin: auto;
    margin-top: 10px;
}

.collapsible-bar {
    background-color: var(--c2);
    color: var(--c4);
    padding: 5px 10px;
    cursor: pointer;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.collapsible-bar:active, .collapsible-bar:focus {
    background-color: var(--c2);
}

.collapsible-bar h2 {
    margin: 0;
    font-size: 1.2em;
}

.arrow {
    display: inline-block;
    font-size: 1em;
    transition: transform 0.3s ease;
}

/* Rotate arrow when bar is active */
.collapsible-bar.active .arrow {
    transform: rotate(180deg);
}

.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.collapsible-content.open {
    max-height: 1000px; /* Adjust this value to be larger than your largest table */
    padding: 0px;
}
/* END Collapsible content */

@media (max-width: 768px) { /* You can adjust this breakpoint as needed */
  body {
    padding: 0; /* Remove padding for screens up to 768px wide */
  }
}