body {
    font-family: Noto Sans;
    font: 14px "Noto Sans", Helvetica, Arial, sans-serif;
    margin: 2px;
}

a {
    color: #00B7FF;
}

.container {
    all:unset;
    border: none; /* Removes all borders */
    margin: 0.5vh 0.5vw; /* Removes all outer spacing (margins) */
    padding: 0; /* Removes all inner spacing (padding) */
    box-sizing: border-box;
    display: grid;
    width: 99vw;
    height: 99vh;
    grid-template-columns: 1fr 8fr 1fr;
    grid-template-rows: 1.5fr 8fr 1fr;
    grid-template-areas:
        "hdl hdc lgo"
        "nav con tab"
        "stl ftr str";
    overflow:clip;
}


headerLeft {
    grid-area: hdl;
    background-color: green;
    text-align: center;
    align-content: center;
    font-size:x-large;
    font-weight: bolder;
    overflow: clip;
}

headerCenter {
    grid-area: hdc;
    background-color: forestgreen;
    text-align: center;
    align-content: center;
    font-size: xx-large;
    overflow: clip;
}

statusR {
    grid-area: str;
    background-color: gold;
    text-align: right;
    align-content: center;
    padding: 0 4px 0 0;
    overflow: clip;
}

nav {
    grid-area: nav;
    background-color: blue;
    text-align: left;
    overflow: clip;
}

content {
    grid-area: con;
    background-color:palegoldenrod;
    text-align: left;
    overflow:auto;
    padding: 4px;
}

tabs {
    grid-area: tab;
    background-color: cyan;
    text-align: right;
    overflow: clip;
}

statusL {
    grid-area: stl;
    background-color: gold;
    text-align: left;
    align-content:center;
    padding:0 0 0 4px;
    overflow: clip;
}

footer {
    grid-area: ftr;
    background-color: gold;
    text-align: center;
    align-content:center;
    overflow: clip;
}

logo {
    grid-area: lgo;
    background-color: green;
    text-align: center;
    align-content:center;
    
    overflow: clip;
}

/*
padding: 1px 4px 7px 4px;
*/

.btn {
    display:inline-block;
    color:darkblue;
    border-radius: 6px;
    border: 3px solid maroon;
    font-weight: bold;
    font-size: medium;
    cursor: pointer;
    height: 2em;
    width: 100%;
    background: radial-gradient(circle, rgba(255, 136, 136, 1) 0%, rgba(255, 0, 0, 1) 50%);
    text-align: center;
    align-content: center;
    text-shadow: 0px 1px 0px #528ecc;
    text-decoration: none;
    
    margin: 2px;
    /*padding: 0.5em 1em 0.5em 1em;*/
    box-sizing:border-box;
}

.btn:hover {
    background: radial-gradient(circle,rgba(255, 136, 136, 1) 0%, rgba(255, 68, 68, 1) 50%);
}

.btn:active {
    background: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 50%);
}

.tabcontent {
  margin: 0 4em 0 4em;
  display:none;
}

.tab {
  height: 2em;
  width: stretch;
  background-color: #a0a0a0;
  text-align: left;
  align-content: center;
}

.tab:hover {
  background-color: #c0c0c0;
}