* {
  box-sizing: border-box;
}

html, body {
  min-height: 100vh;
  min-width: 100vw;
  display: grid;
  grid-template-areas:
  "header header"
  "sidebar main";
  grid-template-rows: 15vh 1fr;
  grid-template-columns: 17.5vw 1fr;
  grid-gap: 0;
  margin: 0;
  padding: 0;
  /* overflow: hidden; */
}

.header {
  grid-area: header;
  font-size: xx-large;
  color: white;
  background-color: black;
  overflow: hidden;
  object {
    width: 100%; /* Should be same size as header. Inherit adopts the formula not the sise. */
    height:  100%; /* Should be same size as header. Inherit adopts the formula not the sise. */
  }
}

.sidebar {
  grid-area: sidebar;
  font-size: normal;
  color: black;
  background-color: #DDDDDD;
  overflow: hidden;
  object {
    width: 100%; /* Should be same size as sidebar. Inherit adopts the formula not the sise. */
	height: 100%; /* Should be same size as sidebar. Inherit adopts the formula not the sise. */
    /* min-height: 85vh; */
    /* height: fit-content; */
  }
}

.main {
  grid-area: main;
  color: black;
  background-color: azure;
  padding-top: 5px;
  padding-bottom: 10px;
  padding-left: 5px;
  padding-right: 10px;
  /* overflow-x: auto; */
  /* overflow-y: scroll; */
}

.main h1 {
    font-weight: bold;
    font-size: x-large;
}

#submitBtn {
  cursor: not-allowed;
}