html {
  width: 100%;
  height: 100%;
  margin: 0;
  font-size: 16px; /* base size for rem */
  background-color: black;
}



body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: sans-serif;
    font-size: 16px; /* base size for rem */
    background-color: black; /* your original background */
    margin: 0;               /* remove default spacing */
    /*background-image: url("/images/background.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;*/
}

#svg-container {
    width: 100%; /* Full width of the viewport */
    height: 100%;
    overflow: hidden; /* allows the svg to overflow its container and trigger scroll bars */
    position: relative;
    touch-action: pan-x pan-y; /* allows smooth finger scrolling on mobile */
    background: black;
}

#mysvg {
  display: block;
  background-color: black; /* ensure SVG also has black background */
}
  

.tooltip {
    /*background: none;*/
    background-color: rgba(255, 255, 255, 0.075);
    backdrop-filter: blur(1px);
    border: none; /*0.02px solid white;*/
    border-radius: 50px;
    padding: 8px 15px 6px 15px;
    position: absolute;
    font-family: 'Work Sans', sans-serif;
    pointer-events: none;
    text-align: center;
    color: white;
    white-space: nowrap; /* Allow text wrapping if necessary */
    /*max-width: 150px;*/
}

.tooltip img {
  border-radius: 0px;  /* same or different value as tooltip */
  display: block;      /* prevents weird inline spacing */
  max-width: 100%;     /* optional, to fit tooltip */
}


.tooltip-text span {
  position: relative;
  display: inline-block;
}

.tooltip-text span::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: black;
  text-shadow:
    -1px -1px 0 black,
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 black;
  z-index: -1;
}
/* main text */
.arrivecamp,
.camplocation {
  color: white;
}

.tooltip .arrivecamp {
    font-family: 'Work Sans', sans-serif;
    font-size: .8rem;
}

.tooltip .camplocation {
    font: 'Work Sans', sans-serif;
    font-size: .7rem;
    font-style: italic;
}

.superheader {
    font-family: 'Work Sans', sans-serif;
}

.supersubheader {
    font-family: 'Work Sans', sans-serif;
    font-style: italic;
}

.header {
    font-family: 'Work Sans', bold;
    pointer-events: none;
    opacity: .8;
}

.subheader {
    font-family: "Work Sans", sans-serif;
    pointer-events: none;
    fill: white;
    text-anchor: start;
    opacity: .6;
}

.sumstatannotation {
    font-family: "Work Sans", sans-serif;
    fill: white;
    text-anchor: middle;
}

.class219nights {
    font-family: "Work Sans", sans-serif;
    fill: white;
    text-anchor: middle;
}

.monthlabels {
    /*font-family: 'Inria Serif', sans-serif;*/
    font-family: "Work Sans", sans-serif;
}

.nameandlink {
    font-family: "Work Sans", sans-serif;
    opacity: 1;
    fill: white;
    text-anchor: start;
}

.legendtitles {
    font-family: "Work Sans", sans-serif;
    fill: white;
    text-anchor: start;
    pointer-events: none;
    opacity: 1;
}

.legendbullets {
    font-family: "Work Sans", sans-serif;
    fill: white;
    text-anchor: start;
    pointer-events: none;
    opacity: .8;
}

.dynamic-button {
    position: absolute;
    border-radius: 0px;
    border: none;
    cursor: pointer;
}

.buttontext {
    cursor: pointer;
    font-family: "Work Sans", sans-serif;
    text-anchor: middle;
    fill: white;
}


#paceSlider {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 8px;
    background: white;
    border-radius: 5px;
    outline: none;
}

/* Style the slider thumb for WebKit browsers (Chrome, Safari) */
#paceSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;  /* Thumb color */
}

/* Style the slider thumb for Firefox */
#paceSlider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;  /* Thumb color */
}

.slider-header {
    font-family: "Work Sans", sans-serif;
    fill: white;
    text-anchor: middle;
    pointer-events: none;
}

.hillshade {
  mix-blend-mode: multiply;
  opacity: .8; /* adjust */
}

.zoomtimelinelabels {
    font-family: 'Work Sans', sans-serif;
}