:root {
   
     --background_body:         #0f98a8;
     --foreground_body:         #ffffff;

     --background_header:       #0f98a8;
     --foreground_header:       #ffffff;

     --background_nav:          #444;
     --foreground_nav:          #ffffff;
     --foreground_nav_hover:    #333;

     --background_content:      #0f98a8;
     --foreground_content:      #ffffff;

     --background_footer:       #444;
     --foreground_footer:       #ffffff;

   }  


   * {
       outline-width:         0;
       margin:                0;
       border-width:          0;
       padding:               0;

       -webkit-box-sizing:    border-box;
          -moz-box-sizing:    border-box;
               box-sizing:    border-box;

       font-family:           Verdana;
       font-weight:           normal;
       font-style:            normal;
    }


    html, body {
      height: 100%;
    }


    body {
        display: flex;
        flex-direction: column;
        /* font-family: Arial, sans-serif; */
        background: var( --background_body );
        color: var( --foreground_body );        
    }


    .header {
      display: flex;
      align-items: center;
      gap: 30px;
      padding: 1px 10px 1px 10px;
      background: var( --background_header );
      color: var( --foreground_header );
    }

    .logo_container {
      width: 60px;
      height: auto;
      display: block;
    }

    .header_text h1 {
      margin: 0;
      font-size: 1.6rem;
    }

    .header_text p {
      margin: 0;
      font-size: 0.9rem;
      opacity: 0.8;
    }


    nav {
        background: var( --background_nav ) ;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    nav a {
        color: var( --foreground_nav );
        padding: 12px 20px;
        text-decoration: none;
        text-align: center;
        font-size: 16px;
    }
    nav a:hover {
        background: var( foreground_nav_hover );
    }

    a {
        color: var( --foreground_content );    
        text-decoration: none; 
        text-decoration-line: underline;   
    }

    .content {
        flex: 1 0 auto; 
        padding: 20px;
        max-width: 900px;
        margin: auto;
        background: var( --background_content );
        color: var( --foreground-content );
    }

    footer {
        flex-shrink: 0; 
        background: var( --background_footer );
        color: var( --foreground_footer );
        text-align: center;
        padding: 15px;
        margin-top: 20px;        
        font-size: 16px;
    }

    .logo_image {
      display: block;
      max-width:80px;
      height: auto;
      margin: 1px auto;
      border-radius: 6px;
    }


    .map_container {
      position: relative;
      width: 100%;
      padding-bottom: 56.25%;
      height: 0;
      overflow: hidden;
      margin: 20px 0;
      background: var( --background_content );
    }

    .map_container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }


    .home_image {
      display: block;
      max-width: 100%;
      height: auto;
      margin: 20px auto;
      border-radius: 6px;
    }


    .image_gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 15px;
      margin: 20px 0;
    }

    .image_gallery img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 6px;
      object-fit: cover;
    }


    @media (max-width: 600px) {

      .header {
          flex-direction: row;
          gap: 12px;
      }

      .header_text h1 {
          font-size: 1.3rem;
      }

       nav a {
          flex: 1 1 100%;
        }
        
    }