body {
  margin: 0;
    padding: 1rem;
  font-family: Helvetica, Arial, sans-serif;
}

.header { margin: -1rem -1rem 1rem; 

position: relative;
    z-index: 10;

}


.responsive {
  width: 80%;
 max-width: 400px;
  height: auto;
}
.top-container {
  background-color: blue;
  padding: 10px;
  text-align: left;

}

.header {
  padding: 10px 16px;
  background: #8D3D8D;
text-align: left;
  color: #f1f1f1;
z-index:2;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 1rem;
  width: 100%;
}

.sticky + .content {
  padding-top: 10px;
}



    .navbar2 {
        overflow: hidden;
        background-color: white;
        padding: 10px;
        position: fixed;
        bottom: 0;
        width: 100%;
        display: grid;
       /*  grid: 1fr / auto-flow 1fr;  rows by size / columns (auto-flow = no limit) */
      grid: 1fr 1fr / auto-flow 1fr;  /* uses 2 rows instead of 1 */
        gap: 5px;
        box-sizing: border-box;
    }