/* Responsive design via CSS using media queries. */
/* Users of IE8 will not benefit from this, but users of mobile technologies and modern browsers will. */

/* Inform mobile devices that we don't want them to treat it as a zoomed in full page, since we are using responsive design. */

@viewport (viewport-fit:contain){
    zoom: 1.0;
    width: extend-to-zoom;
}

/* Too small to center */
@media screen and (max-width: 60em) {
    div.column
    {
       /* background-color: #c5e1f7; */
       /*background:url('field_light.jpg') top left;*/
       background-attachment:fixed;
       width: auto;
       margin-left: 0.5em;
       margin-right: 0.5em;
    }

    h1{
        padding-bottom: 0;
        margin-bottom: 0;
    }
    ul.nav
    {
      display: block;
    }
}

/* phone screen size */
@media screen and (max-width: 37em) {
    /* Convert to a vertical menu when too thin. */
    ul.nav{
        position: center;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    ul.nav li{
        width: 100%;
        font-size: 16pt;
    }

    .hamburger{
        background-color: #284d7b;
        width: auto;
        color: white;
        vertical-align: middle;
    }

    .hamburger a{
        color: white;
        text-decoration: none;
        font-size: 28px;
        text-align: center;
        vertical-align: baseline;
        display: block;
        margin: auto;
        padding: 0.5em;
    }

    .hamburger a:link {
        color: white;
        text-decoration: none;
    }

    .hamburger a:visited {
        color: white;
        text-decoration: none;
    }

    h1
    {
      font-size: calc(10pt + 1.5vw); /* 12% of viewport width */
    }
    a img {
      width:calc(9pt + 1.5vw);
      height:calc(9pt + 1.5vw);
    }
}

/* So small text jumps instead of wraps - center image and header */
@media screen and (max-width: 360px) {
  /* No more room for floating. */
  .float_right{
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
  }
  h1{
    text-align: center;
  }
}

/* Very tiny devices! */
/* Focus on content - put menu on bottom */
@media screen and (max-width: 255px) {
  body
  {
    padding: 0;
    margin: 0;
  }
  div.column
  {
    margin: 0;
    padding: 0;
    grid-template-areas: "content"
                          "menu";
  }

  /* Everything with as few margins and padding as possible */
  div.content
  {
    padding: 0.5em;
    margin: 0;
  }
  h1
  {
    margin-top: 0.25em; /* Reduce height for tiny devices */
  }

  ul.nav{
    display:none;
    margin-left:0;
    margin-right:0;
  }

  ul.nav li a
  {
    font-size: 12vw; /* 12% of viewport width */
    padding-left:0;
    padding-right:0;
    margin-left:0;
    margin-right:0;
  }

  ul.nav li a.disabled
  {
    padding-left:0;
    padding-right:0;
    margin-left:0;
    margin-right:0;
  }
  /* It's a hack, but I have no way of testing on iPhone X or smart watches */
  /*@supports(padding: max(0px)){
      div.column {
          margin-left: max(1em, env(safe-area-inset-left));
          margin-right: max(1em, env(safe-area-inset-right));
          margin-top: max(1em, env(safe-area-inset-top));
          margin-bottom: max(1em, env(safe-area-inset-bottom));
      }
  }*/
}