html {
height: 100%;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow: hidden;
padding: 0px;
width: 100%;
}

body {
background-color: #7777;
height: 100%;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow: hidden;
padding: 0px;
width: 100%;
}

button {
background-color: blue;
height: 80%;;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding: 0px;
width: 12%;
}

iframe {
background-color: transparent;
border: 0px none transparent;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding: 0px;
overflow: hidden;
width: 100%;
}

img {
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding: 0px;
max-height: 100%;
max-width: 100%;
}

#toolbar {
background-color: black;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding: 0px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
@media all and (max-width: 800px) {

body {
display: flex;
flex-direction: column;
}

#home {
visibility: visible;
}

#mainview {
height: 90%
}

#menu {
display: block;
display: none;
height: 100%;
}

#toolbar {
height: 10%;
}

}
@media all and (min-width: 801px) {

body {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: 4fr 1fr;
grid-template-areas:
  "menu main"
  "toolbar main";
column-gap: 0px;
row-gap: 0px;
align-items: stretch;
justify-items: stretch;
}

#menu {
display: block;
grid-area: menu;
}

#home {
visibility: hidden;
}

#mainview {
grid-area: main;
}

#toolbar {
grid-area: toolbar;
}

}