body{
  background-color: black;
  color: white;
}

img.logo{
  height: 35px;
  margin-bottom: 3rem;
}

p.subtitle{
  color: white;
}
#image-compare {
    width: 100%;
    height: 66vh;
  }

  .popular-city{
    cursor: pointer;
  }

  h1.title{
    line-height: 4rem;
    color: white;
  }

  .welcome-box{
    border: solid 1px white;
    border-radius: 4px;
    padding: 1rem 2rem 2rem 2rem;
  }

  img-comparison-slider{
    border-radius: 1rem;
  }

  #city-picker-input{
    background-color: black;
    border: solid 1px white;
    border-radius: .5rem;
    color: white;
  }

  #city-picker{
    margin-top: 2rem;
    margin-bottom: 1rem;
  }
h5{
  margin-top: 1rem;
  margin-bottom: .5rem;
}
  #city-name
  {
    font-size: 2rem;
  }
  .modal .modal-title{
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  #footer{
    margin-top:3rem;
    font-size: .9rem;
  }

  #footer a{
    color: white;
    text-decoration: underline;
  }

  #countdown-modal h1{
    font-size: 5rem;
  }

  /* slider labels */

  .before,
  .after {
    margin: 0;
  }

  .before figcaption,
  .after figcaption {
    background: #fff;
    border: 1px solid #c0c0c0;
    border-radius: 12px;
    color: #2e3452;
    opacity: 0.8;
    padding: 12px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    line-height: 100%;
  }

  .before figcaption {
    left: 12px;
  }

  .after figcaption {
    right: 12px;
  }