body {
        /*max-width: 600px;*/
        margin: 0;
        background-color: #E5D879;
        padding: 0;
        min-height: 100vh;
      }

      .main_poem {
        display: flex;
        flex-direction: column;
        justify-content: center;
        
        font-family: Georgia, serif;
        font-size: 18px;
        margin-top: 150px;
        margin-left: 12vw;
        padding-left:5vw;
        margin-right: 5vw;
      }
      
      .main_essay {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center; 
        font-family: Georgia, serif;
        font-size: 18px;
        margin-top: 150px;
        margin-left: 20vw;
        margin-right: 20vw;
      }
      

      
      #header {
        position: fixed;
        width:100vw;
        height:8vw;
        z-index: 4; /* Stay on top */
        top: 0px;
        font-family: Helvetica, sans-serif;
        color: darkgreen;
        background-color: #9B6E26;
        text-align: left;
        font-size: 4vw; 
        border: 0.5vw solid darkgreen;
        border-radius: 1px;
        padding: 0px 0px;
        margin: 0 0 0 0px;
        overflow: hidden;
        text-wrap: none;
      }
      
      #header a {
        float: left;
        color: darkgreen;
        /*text-align: center;*/
        padding: 0px 0px;
        text-decoration: none;
        font-size: inherit; 
        overflow: hidden;
        text-wrap:none;
      }
      #header a:hover {
          background-color:  #9B6E26;
         color: black;   
      }
      #header sub { /*a trick to squeeze extra title on the anthology page*/
        vertical-align: baseline;
        position: relative;
        top: 0em; /* Adjusts how far below the baseline it sits */
        font-size: 95%; /* Scales the text down */
        line-height: 0; /* Prevents it from affecting adjacent lines */
      }
      .corner_image_new {
        float: left;
        height: 8vw;
        padding-right: 1.5vw;
      }
      
      #index-grid {
          margin-left:13vw;
          margin-top: 10vw;
          width: 84vw;
          height: calc(100vh - 10vw);
          display: grid;
          grid-template-columns: repeat(8, 1fr);
          grid-template-rows: repeat(4, 1fr);
          column-gap: 10px;
          grid-row-gap: 10px;
          grid-template-areas:
            "f f b b b c c c"
            "f f b b b c c c"
            "d d d d d e e e"
            "d d d d d e e e";

      }
      #chatbox_container {
        grid-area: e;
        
      }
      #stubbs-container {
        grid-area: f;
        display: flex;
        border: 2px solid black;
        justify-content: center;
        align-items: center;
        overflow: hidden
      }
      #stubbs-container img {
        width: 100%;
        height: 110%;
        object-fit: fill;
      }
      
      #audio-playback-container {
        grid-area: c;
        
      }

            
      /* TOP NAVIGATION BAR */
      .top_nav {
        min-width: 100vw;
        min-height: 80px;
        position: fixed;
        z-index: 3; /* Stay on top */
        top: 0px;
        font-family: Helvetica, sans-serif;
        color: darkgreen;
        background-color: #9B6E26;
        /*background: url("/esnupi.bmp");*/
        text-align: left;
        font-size: 5vh; 
        border: 0.5vh solid darkgreen;
        border-radius: 1px;
        padding: 0px 0px;
        margin: 0 0 0 0px;
        overflow: hidden;
        /*box-shadow: 0 4px 8px rgba(0, 0, 0.2)*/
      }
      .top_nav a {
        float: left;
        color: darkgreen;
        /*text-align: center;*/
        vertical-align: middle;
        line-height: 120px;
        padding: 0px 0px;
        text-decoration: none;
        font-size: 8vh; 
        overflow: hidden;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
      }
      .top_nav a:hover {
        background-color:  #9B6E26;
         color: black;       
      }
      .corner_image {
        float: left;
        max-height: 120px;
        padding-right: 20px;
      }
      /* END TOP NAVIGATION BAR */
      
      
      /* SIDEBAR */
      .sidenav {
        height: calc(100vh); /* Full-height: remove this if you want "auto" height */
        width: 10vw; /* Set the width of the sidebar */
        position: fixed; /* Fixed Sidebar (stay in place on scroll) */
        padding: 6px 8px 6px .5vw;
        z-index:3; 
        top: 0px; /* Stay at the top */
        left: 0;
        background-color: #9B6E26; 
        overflow-x: hidden; /* Disable horizontal scroll */
        padding-top: 150px;
        border: 0.5vw solid darkgreen;
        font-family: "Times New Roman", Times, serif;
        font-size: 2vw;
      }
      
      /* The navigation menu links */
      .sidenav a {
        text-decoration: none;
        /*font-family: "Times New Roman", Times, serif;*/
        color: darkgreen;
        display: block;
        font-size: inherit; 
        overflow: hidden;
        text-wrap:none;
      }
      
      /* When you mouse over the navigation links, change their color */
      .sidenav a:hover {
        color: black;
        background-color:  #9B6E26;
      }
      /* END SIDEBAR */
      

      a {
        color: mediumvioletred;
      }
      a:hover {
        background-color: gold;
      }