*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

:root {
  --fw-light: 100;
  --fw-normal: 200;
  --fw-semi: 300;
  --fw-bold: 600;
  --fs-h1: 1.25rem;
  --fs-h2: 1.25rem;
  --fs-h3: 1.25rem;
  --fs-body: 1.25rem;
  --fs-xl: 4rem;
  --clr-light: #fff;
  --clr-info-bg: rgba(0, 0, 50, 0.1);
  --clr-gray: #d6d6d6;
  --clr-dark: #444;
  --clr-accent: #ac5c00;
  --clr-accent-dark: #001e70;
  --clr-primary:#001e70;
}

body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  line-height: 1.4;
  background-size: cover;
  background: rgba(0, 0, 0, 0.1);
  min-height: 100vh;
}
h1, h2, h3 {
  line-height: 1.2;
}
.data-source-info-text {
  font-size: .7rem;
  margin: 0;
  padding: -10px;
  color:var(--clr-dark);
  line-height: 1;
}
.yaxis-label-text {
  font-size: .8rem;
  font-weight: var(--fw-bold);

}
.xaxis-label-text {
  font-size: .8rem;
  font-weight: var(--fw-bold);

}

select {
  font-size: .9rem;
  cursor: pointer;
  letter-spacing: 0.5px;
  text-decoration: none;
  padding: .1em .1em .2em .2em;
  background: var(--clr-primary);
  color: var(--clr-light);;
  outline: 2px solid var(--clr-primary);
  outline-offset: -2px;
  margin-right: 2em;
} 
select:hover {
  outline: 2px solid var(--clr-primary);
  outline-offset: -2px;
}
.btn {
  cursor: pointer;
  padding: .25em 1em;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  font-weight: var(--fw-bold);
  margin-bottom: .5em;
  
}

.btn--primary {
  outline: 2px solid var(--clr-primary);
  outline-offset: -2px;
  background-color: var(--clr-primary);
  color:var(--clr-light);
}
.btn--primary:hover {
  
  outline: 2px solid var(--clr-primary);
  outline-offset: -2px;
  color:var(--clr-primary);
  background-color: var(--clr-light);
}

.btn-outline {
  outline: 2px solid var(--clr-primary);
  outline-color: var(--clr-primary);
  outline-offset: -2px;

}
.btn-outline:hover {
  outline: 3px solid var(--clr-primary);
  outline-color: var(--clr-primary);
  outline-offset: -2px;
  background-color: var(--clr-primary);
  color:var(--clr-light)
  

}

a {
  color: var(--clr-accent);
}
a:hover {
  color: var(--clr-accent-dark);
}
.main-title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--clr-accent);
  letter-spacing: 1.px;
  grid-column: 1 / -1;
}

.section-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  margin: 0;
}

.invisible {
  display:none;
}

.reading {
  font-size: var(--fs-h1);
  margin: 0;
  color: var(--clr-gray);
}

.mars-current-weather {
  background: var(--clr-light);
  padding: 2em 2em 2em;
  max-width: 1300px;
  margin: 1em;
}

.temp {
  -ms-grid-column: 2;
  -ms-grid-column-span: 2;
  grid-column: 2 / 3;
  padding: 0;
  padding: 2em 0;
}

.info{
  background: var(--clr-info-bg);
  border-radius: 1rem;
}
.spotlight-text{
  font-size: var(--fs-body);
  color: var(--clr-primary);
  font-weight: var(--fw-bold);
}

.datalabel-text{
  font-size: .6rem;
  text-anchor: middle;
  color: var(--clr-accent);
}
/* Tooltip CSS */

.tooltip {
  position: fixed;
  opacity: 0;
  pointer-events: none;
  background: #eee;
  max-width: 300px;
  
  }
  
  .tip-header {
  border-bottom: 1px solid white;
  padding: 0.4rem 1rem;
  }
  
  .tip-body {
  padding: 0.2rem 0;
  
  }
  


@media (min-width: 600px) {
  .mars-current-weather {
    display: -ms-grid;
    display: grid;
    row-gap: .5em;
    -ms-grid-columns: (12fr)[12];
    grid-template-columns: repeat(12, 12fr);
  }
  .temp {
    -ms-grid-column: 3;
    -ms-grid-column-span: 3;
    grid-column: 3 / -1;
    padding: 0;
  }
  .info {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / 2;
  }
  .cdc-nav {
    -ms-grid-column: 4;
    -ms-grid-column-span: 4;
    grid-column: 4 / -1;
  
  }
  .data-info {
    -ms-grid-column: 5;
    -ms-grid-column-span: 4;
    grid-column: 5 / -1;
    padding: 1em;
  }
}

@media (min-width: 900px) {
  :root {
    --fs-h1: 1.5rem;
    --fs-h2: 1.75rem;
    --fs-body: 1rem;
    --fs-xl: 4.5rem;
  }
  body {
    height: 100vh;
  
  }
  tspan {
    fill: black;
}
.overlay {
  fill: none;
  stroke: none;
  pointer-events: all;
}

.focusLine {
  fill: none;
  stroke: steelblue;
  stroke-width: 0.5px;
}

.focusCircle {
  fill: red;
}
  .mars-current-weather {
    padding: 0.5em;
    margin: .5em .5em 0 .5em;
    -ms-grid-columns: (12fr)[12];
        grid-template-columns: repeat(12, 12fr);
    grid-gap: 0.5em;
  }
  .temp {
    -ms-grid-column: 4;
    -ms-grid-column-span: 3;
    grid-column: 4 / -1;
    border-left: var(--border);
    border-right: var(--border);
    padding: 0 1em;
  }
  .cdc-nav {
    -ms-grid-column: 3;
    -ms-grid-column-span: 4;
    grid-column: 3 / 8;
    padding: 1em;
  }
  .data-info {
    -ms-grid-column: 5;
    margin: 0em 0em 0 0em;
    -ms-grid-column-span: -1;
    grid-column: 5 / -1;
    padding: 0em;
  }
  .data-source-info {
    -ms-grid-column: 1;
    margin: 0em 0em 0 0em;
    -ms-grid-column-span: -1;
    grid-column: 1 / -1;
    padding: 0em;
  }
  .info {
    -ms-grid-column: 1;
    -ms-grid-column-span: 4;
    grid-column: 1 / 4;
    padding: 1em;
  }
}