body{
    background-color: #f5f5f5;
    color:darkslategray;
    margin-right:auto;
    margin-left:auto;
    margin: 0 auto;
    width:100%;
    display:flex;
    justify-content: center;
}
#resturant_photo{
    
    border: 1px solid steelblue;
    height:auto;
    max-width: 250px;
}

  
#bar_container {
    display:block;
    justify-content: center;
    width: 950px;
    max-width: 100%;
    margin: 0 auto;
  }

a{
    color:darkslategray;
    /* text-decoration: none; */
}

#filter-container{
   display:flex;
   margin-top:1px;
   justify-content: center;
}

svg{
    margin: 0 auto;
    display: block;
    max-width: 100%;
    height: auto;

}
svg text{
    font-size: 9px;  
}


#hed_dek_byline{
    text-align: center;
}   

#story_body{
    max-width: 100%;
    margin-right:auto;
    margin-left:auto;
}

body p, h1{
    max-width:650px;
    margin-right:auto;
    margin-left:auto;
}


#adams_clip{
    display: flex;
    justify-content: center;
    margin-top:30px;
    border-radius: 2px;
    border: 1px solid steelblue;
    margin-bottom:30px;
    margin-right:auto;
    margin-left:auto;
    height:315px;
    width:100%;
    max-width: 550px
}


#byline{
    text-align:center;
    margin-top:10px;
    margin-bottom:30px;
}

#map-container{
    margin-top:30px;
    margin-bottom:30px;
}

#map{ /* https://www.jawg.io/docs/integration/maplibre-gl-js/change-style/ – styling resources */ 
    max-width:650px;
    min-height: 400px;
    height: 100%;
    margin-right:auto;
    margin-left:auto;
}

#hed{
    font-size:28px;
    margin-top:30px;
    padding-top:30px;
    margin-bottom:0;
}

#dek{
    font-size: 20px;
}

@media (min-width: 2440px), screen and (orientation: portrait), not (orientation:landscape){
    #story_body{
    margin-right:auto;
    margin-left:auto;
    }
    #map{ 
        min-height: 400px;
        height:100%;
        margin-right:auto;
        margin-left:auto;
        max-width:650px;
    }
  #line_chart{
        margin-left:auto;
        margin-right:auto;
        width:650px;
        max-width:650px;
    }
}


@media (max-width: 460px), screen and (orientation: portrait), not (orientation:landscape){
    body {
      max-width:400px;
      width:100%;
      margin:0 auto;
    }
    body p, h1{
        max-width:320px;
        margin-right:auto;
        margin-left:auto;
    }
    
    #nav{
        margin-left:auto;
        margin-right:auto;
        text-align:center;
        display:flex;
        flex-direction:row;
        flex-wrap: wrap;
        justify-content:center;
        padding-top:10px;
        padding-bottom:20px;
    }
    #bar_container{
        width: 400px;
        height: 100%;
        max-width: 100%;

      }
      #bar_container svg text, #bar_container svg a {
        font-size: 9px;
      }

      #bar_container svg .tick text{
        font-size: 6.65px;
      } 

      
    }

    @media (max-width: 390px), screen and (orientation: portrait), not (orientation:landscape){
        
        #bar_container{
            width: 350px;
            height: 100%;
            max-width: 100%;
    
          }
          #bar_container svg text, #bar_container svg a {
            font-size: 9px;
          }
    
          #bar_container svg .tick text{
            font-size: 6.65px;
          } 

          #map{             
            max-width:300px;
            min-height: 200px;
            height: 100%;
            width:100%;
            margin-right:auto;
            margin-left:auto;
            display:block;
            margin: 0 auto;
        }

        #adams_clip{
          
            width:100%;
            max-width: 330px
        }
        
    
          
        }