.layout {
    width: auto;
    height:100%;

    display: grid;
    grid:
    "leftSide header rightSide" auto
    "leftSide body rightSide" 1fr
    "footer footer footer" auto
    / auto 1fr auto;
    gap: 8px;
}
body {
   background-color: lavender;
}

html {
  font-family: "Courier New", "Lucida Console", "Monaco";
}

.textcenter {
  text-align: center
}

aside {
  grid-area: leftSide;
  text-align: left;
  color: #9416ca;
  border: outset;
  display: block;
  overflow: auto;
  height: 95vh;      /* Sets the height to exactly 100% of the viewport height */
  max-height: 95vh;  /* Prevents it from expanding beyond the screen height */
  overflow-y: auto;   /* Adds a vertical scrollbar only when content overflows */
  box-sizing: border-box; /* Ensures padding/borders don't push it past 100% */
}

main {
    grid-area: body;
    text-align: center;
    color: #717166;
    border: dotted;
    border-top-color: currentcolor;
    border-right-color: currentcolor;
    border-bottom-color: currentcolor;
    border-left-color: currentcolor;
    border-color: rgb(182, 51, 197);
    display: block;
    overflow: auto;
    height: 83.5vh;      /* Sets the height to exactly 100% of the viewport height */
    max-height: 83.5vh;  /* Prevents it from expanding beyond the screen height */
    overflow-y: auto;   /* Adds a vertical scrollbar only when content overflows */
    box-sizing: border-box; /* Ensures padding/borders don't push it past 100% */
}