/* style.css */

body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  
  header {
    position: relative;
    background-color: #ffffff;
    padding: 10px 20px;
    border-bottom: 1px solid #ddd;
    height: 70px;
  }
  
  .header-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 20px;
    height: 100%;
    position: relative;
  }
  
  .logo {
    height: 50px;
    z-index: 2;
  }
  
  .site-title {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin: 0;
    pointer-events: none;
  }
  
  main {
    flex-grow: 1;
    height: 100%;
    position: relative;
  }
  
  #map {
    height: 100%;
    width: 100%;
  }
  
  footer {
    background-color: #f4f4f4;
    text-align: center;
    padding: 10px 20px;
    font-size: 14px;
    border-top: 1px solid #ddd;
    color: #333;
  }
  
  @media screen and (max-width: 600px) {
    .site-title {
      font-size: 1.2rem;
    }
  
    .logo {
      height: 40px;
    }
  
    footer {
      font-size: 12px;
    }
  }