.container { 
    
    display: grid; 
    grid-template-rows: 5;   /* repeat(minmax(100px, 0.5fr))*/
    grid-template-columns:  3; /*75px minmax(300px, 0.5fr) 50px;*/
    grid-gap:50px;
    
  } 

  #background-canvas {
    max-width: 70%;
    max-height: auto;
    /*max-height: 100vh;*/
    margin: auto;
    margin-top: 5%;
    margin-bottom: 5%;
    display: grid;
    grid-column: 1 / 5;
    grid-row: 1 / 5;
  }

/*.header1 { 
    background:transparent; 
    color: rgb(165, 237, 173);
    grid-column: 2;
    grid-row: 2;
    z-index: 10; 
    font-size: large;
    font-weight: 200;
  } */

.figure { 
    color: rgb(0, 0, 0);
    grid-column: 4;
    grid-row: 2;
    z-index: 10; 
    font-style: monospace;
    margin: 0;
  } 

  .figureW { 
    color: white;
    grid-column: 4;
    grid-row: 2;
    z-index: 10; 
    font-style: italic;
    margin: 0;
  }

.content22 { 
    color: black;
    background:transparent;
    grid-column: 2;
    grid-row: 4;
    z-index: 10; 
    text-align: justify; 
  } 

  * {
    margin: 0;
    padding: 0;
}
.imgbox {
    display: grid;
    /*height: 100%;
    width: 100%;*/
    grid-column: 1 / 5;
    grid-row: 1 / 5;
}
.center-fit {
    max-width: 70%;
    max-height: 70vh;
    /*max-height: 100vh;*/
    margin: auto;
    margin-top: 5%;
    margin-bottom: 5%;
}

.view1 {
  grid-column: 1;
  grid-row: 2;
  z-index: 10;
  margin-left: 5%;
}


.content {
  position: absolute;
  top: 90%;
  left: 5%;
  overflow-y: auto;
  z-index: 3;
  color: black;
  font-family: monospace;
}

.content a{
color: #000000;

}

.content:hover {
  background-color: rgb(233, 233, 177);
}

 

body {
    margin: 0;
    background-color: rgb(128, 240, 128);
    color: #000000;
    font-family: monospace;

    height:100%;
    
}

@media (max-width: 768px) {
    /* Optimize for mobile performance */
    #background-canvas {
      will-change: transform;
    }

    .figure {
      margin-top: 75%;
    }
    .view1 {
      margin-top: 75%;
    }

    .content {
      margin-top: 5%;
    }

    #background-canvas {
      max-width: auto;
      max-height: auto;
    }
  }

/* iOS specific optimizations */
@supports (-webkit-touch-callout: none) {
  #background-canvas {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}