/*FONT LOADING*/
@font-face {
  font-family: "Roboto";
  src:
    url("fonts/RobotoMono.woff2")
}

body{
  font-family:"Roboto";
  color:#1d1d2f;
}
h1{
  font-size:50px;
}
a{
  text-decoration: underline;
  font-weight:bold;
  color:#1d1d2f;
}
code{
  background-color:#efeff5;
}
.emphasis{
  font-size:24px;
  font-weight:bold;
}
.highlight{
  background-color: #b3b3cc;
}

.rail-story{
  font-family: "Roboto";  
  font-weight:bold;
  font-size:20px;
  margin-bottom:5px;
}
.place-button{
  font-size:14px;
}
.place-button, .toc:hover{
  cursor:pointer;
  background-color: #b3b3cc;
}
.legend{
  font-family: "Roboto";  
  background:#d1d1e0;
  padding:10px;
  margin-left:25px;
  margin-bottom:25px;
}
.legend p {
  margin:0;
}
.use-rail{
  color:#8585ad;
}
.disused-rail{
  color:#ffffff;
}
#credits{
  font-size:12px;
  padding-top:50px;
  padding-bottom:50px;
}
/*RESPONSIVE DESIGN*/
@media screen and (min-width: 768px) {
  #sidebar{
    width: 35vw; 
    height: 100vh;
    padding-left:15px;
    float:left;
  }
  #map-f{
    width: 60vw; 
    height: 100vh;
    right:0;
    position:fixed;
    z-index:100;
  }
  #scroll-indicator{
    display:none;
  }
  #map-m{
    display:none;
  }
  #map-m-toc{
    display:none;
  }
}
@media screen and (max-width: 767px) {
  #sidebar{
    width: 100vw; 
  }
  #map-f{
    display:none;
  }
  #map-m{
    width: 100vw; 
    height: 60vh;
    position:sticky;
    display:block;
    top:0;
  }
  #scroll-indicator{
    position:fixed;
    display:block;
    background:white;
    top:calc(100vh - 10px);
    padding-right:5px;
    padding-left:5px;
    z-index:500;
    font-size:20px;
    right:10px;
  }
}