style.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap');
:root {
    --main-bg-color: #01426A;
    --secondary-bg-color: #F2F2F2;
    --main-text-color: #FFF;
    --secondary-text-color: #706666;
}

html, body {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    font-family: "Roboto";
  }

  .header {
    grid-area: header;
    display: grid;
    grid-template-columns: 64px auto;
    grid-template-rows: 100%;
    background-color: var(--main-bg-color);
    color: var(--main-text-color);
    grid-template-areas: "logo title"
  }
  #logo {
    height: 100%;
    grid-area: logo;
  }
  #titleText {
    font-size: 1.4rem;
    margin: 0;
    grid-area: title;
  }

  .sidebar {
    grid-area: sidebar;
    background-color: var(--secondary-bg-color);
    color: var(--secondary-text-color);
    overflow-y: auto;
  }

  .instructions {
      font-size: 0.6rem;
      font-style: italic;
  }

  .searchContainer {
      padding: 10px 0;
  }

  .searchLayerVisibilityText{
    font-size: 0.8rem;
  }

  .map {
    grid-area: map;
  }

  .wrapper {
    display: grid;
    grid-template-rows: 60px auto 40%;
    grid-template-areas:
     "header"
     "map"
     "sidebar";
    width: 100vw;
    height: 100vh;
  }

  .box {
    /* color: #fff; */
    padding: 10px;
    font-size: 20px; 
  }

  @media only screen and (min-width: 720px)  {
    .wrapper {
      grid-template-columns: 30% auto;
      grid-template-rows: 50px  auto;
      grid-template-areas:
        "header  map"
        "sidebar  map";
      }
    }