html {
background-color: thistle;
margin: 0;
height:90vh;
}

body {
      margin: 0;
      background-image:linear-gradient(0deg, #1797c0 10%,#F6F6F6);
      font-family:-apple-system, BlinkMacSystemFont, sans-serif;
      text-decoration: none;
      color:#5B5D60;
      font-size:0.95em;
      font-weight: normal;
      
}
* {
 margin:0;
 padding:0;
 font-family:-apple-system, BlinkMacSystemFont, sans-serif;
 color:#5B5D60;
 font-weight: normal;
}
    .grid {
     height:110vh;
    display: grid;
    grid-gap:5px;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas:
    "title title"
    "header header"
    "sidebar sidebar"
    "content content"
    ". footer";
    }
.title {grid-area:title;}
.header {grid-area:header;
 justify-self:center;
 align-self:top;
 z-index:10;
      }
.sidebar {grid-area:sidebar; min-height:100px;      }

.footer {
 grid-area:footer;
 display: flex; /* Added */
 align-items: right; /* Added */
 align-text: right;
      }
.logo {
 grid-area: logo;
 justify-self:left;
 align-self:center;
 margin-left:8px;
 margin-top:10px;
}
.headline {
 grid-area:headline;
 align-self:center;
  justify-self:center;
}
.user-menu {
 grid-area:user-menu;
justify-self:end;
 align-self:center;
  color:#1797c0;
}
#main_page {
  margin-top:4%;
  text-align:left;
  background-image:linear-gradient(0deg, #1797c0 10%,#F6F6F6);
}
.user_button {
 align-self:end;
 font-size:0.85em;
  padding:10px;
  margin-right:5px;
              }
/* unindent each unordered list */
#menu ul {
  margin-left: -2.5em;
}
/* turn each list item into a solid gray block */
#menu li {
  list-style-type: none;
  float:left;
  border: black solid 1px;
  margin-left:20px;
  Width:12em;
  padding:8px;
  background-color: #EEEEEE;
  text-align: center;
  box-shadow: 8px 8px 8px #808080;
  border: 2px gray outset;
  border-radius: 5px;
}
#left-menu li {
  list-style-type: none;
  border: black solid 1px;
  margin-top:10px;
  margin-left:10px;
  Width:8em;
  padding:8px;
  background-color: #EEEEEE;
  text-align: center;
  box-shadow: 8px 8px 8px #808080;
  border: 2px gray outset;
  border-radius: 5px;
}
/* set anchors to act like buttons */
#menu a {
  font-family:-apple-system, BlinkMacSystemFont, sans-serif;
  font-size:1.0em;
  position:relative;
  text-align:center;
  color: black;
}

/* collapse nested lists */
#menu li ul {
  display: none;
}
/* display sublists on hover */
#menu li:hover > ul {
  display: block;
}
/* indent third-generation lists */
#menu li li li {
  margin-left: 1em;
}
#menu li:hover{
  background-color: lightcyan;
}

#left-menu li:hover{
  background-color: lightcyan;
}

@media screen and (min-width: 736px)
{
    .grid {
    display: grid;
    grid-gap:5px;
    width: 100%;
    grid-template-columns: minmax(max-content,150px) 5fr 1fr 0.5fr;
    grid-template-rows: 80px 40px 40px 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
    "title title title title"
    "sidebar header header header"
    "sidebar header header header"
    "sidebar content content ."
    "sidebar content content ."
    "sidebar content content ."
    "sidebar content content ." 
    "footer content content .";
           }
           
    .top-grid {
    display: grid;
    justify-self:center;
    align-self:center;
    color:#1797c0;
    grid-gap:10px;
    grid-template-columns:  1fr 5fr 1fr 0.25fr;
    grid-template-rows: 5fr;
    grid-template-areas:
    "logo headline user-menu user-menu";
    }
    
    .content{
      max-width:800px;
      margin: 5px auto;
      overflow:auto;
      padding: 5px;
      font-family:-apple-system, BlinkMacSystemFont, sans-serif;
      text-decoration: none;
      color:#5B5D60;
      font-size:0.95em;
      font-weight: normal;
      align-items:start;
      display: grid;
          grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
          grid-template-areas:
    ". titling titling titling ."
    "lab-summary inp-summary inp-summary inp-summary inp-summary"
    "lab-owner inp-owner lab-rbd inp-rbd ."
    "lab-ref inp-ref inp-ref inp-ref ."
    "lab-detail inp-detail inp-detail inp-detail inp-detail"
    "lab-detail inp-detail inp-detail inp-detail inp-detail "
             ". inp-detail inp-detail inp-detail inp-detail "
    "lab-priority lab-priority lab-priority . ."
    ". inp-priority inp-priority inp-priority ."
    ". btn-submit btn-submit btn-submit .";
    }
    
    .content div{
    padding:18px;
    Height:auto;
    width:auto;
    display: flex; /* Added */
    align-items: left; /* Added */
    align-text: left;
    }

      #titling{grid-area:titling; justify-self:center; text-decoration:underline;font-size:1.2em}
      #lab-summary{grid-area:lab-summary}
      #inp-summary{grid-area:inp-summary}
      #lab-owner{grid-area:lab-owner}
      #inp-owner{grid-area:inp-owner}
      #lab-rbd{grid-area:lab-rbd;width:115px}
      #inp-rbd{grid-area:inp-rbd;}
      #lab-ref{grid-area:lab-ref}
      #inp-ref {grid-area:inp-ref}
      #lab-detail {grid-area:lab-detail}
      #inp-detail {grid-area:inp-detail}
      #lab-priority {grid-area:lab-priority;padding:5px;}
      #inp-priority {grid-area:inp-priority}
      #btn-submit {grid-area:btn-submit}
      #btn-save {grid-area:btn-save}
      #btn-clear {grid-area:btn-clear}
      
      .content button{font-family:-apple-system, BlinkMacSystemFont, sans-serif;
      text-decoration: none;
      color:#5B5D60;
      font-size:0.95em;width:80px;margin-left:20px; border: 2px gray outset;border-radius: 5px;}
      
      .content input{font-family:-apple-system, BlinkMacSystemFont, sans-serif;
      
      color:#5B5D60;
      margin-right:5px;
      font-size:0.95em;margin-left:20px; }
}