/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
    height: 100%;
    width: 100%;
    bottom: 3em;
}
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}
/* 
   * Optional: Makes the sample page fill the window. 
   */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

main {
    background-color: rgba(238,131,34,0.9);
    color: white;
    position: absolute;
    right: 3em;
    top: 3em;
    max-width: 25em;
    z-index:1001;
    padding: 1.5em;
    border-radius: 20px;
}
@media only screen and (max-width: 768px) {
    main {
    background-color: rgba(238,131,34,0.9);
    color: white;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    max-width: 100%;
    padding-top:0em;
    padding-bottom: 0em;
    z-index:1001;
    border-radius: 0px;
    }
    #elevation_chart {
        display: none;
    }
    main p:first-child {
        width: 15%;
        height: 3em;
        position: relative;
        display: inline-block;
        padding: 0 !important;
        padding-top: 1em !important;
    }
    main p:first-child img{
        height: 100%;
        max-height: 100%;
        max-width: unset;
    }
    p.lead {
        width: 84%;
        display: inline-block;
        position: relative;

    }
  }
small a {
    color: rgba(238,131,34,0.9);
    text-decoration: none;
}
small {
    font-size: x-small;
}
#elevation_chart {
    bottom: 4em;
    left: 25%;
    position: absolute;
    width: 50%;
    height: 180px;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 0.5em;
}
footer {
    background-color: white;
    position: absolute;
    bottom: 0px;
    height: 3em;
    width: 100%;
    z-index:1001;
}