* {
    padding:0;
    margin:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}
body {
    width:100vw;
    height:100vh;
    display:grid;
    grid-template-columns: 15% 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
        "head head"
        "navbar sitecontent"
        "foot foot";
    gap:0;
}
.content {
    width:100%;
    height:100%;
    display:grid;
    grid-template-columns: 15% 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
        "head head"
        "navbar sitecontent"
        "foot foot";
    gap:0;
}
header {
    grid-area: head;
    width:100%;
    background-color: #f7b10a;
    background-image: linear-gradient(white, transparent, transparent, black);
    line-height:50px;
}
nav {
    grid-area: navbar;
    position:sticky left;
    background-color:#f7b00a88;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    box-sizing: border-box;
    box-shadow: 10px 10px 15px gray;
    height:300px;
}
footer {
    grid-area: foot;
    width:100%;
    background-color: #f7b10a;
    line-height:20px;
    min-height: 20px;
}
main {  
    grid-area: sitecontent;
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows:1fr;
    }

.button {
    border:3px solid black;
    border-radius: 5px;
    background-color: #f7b10a;
    background-image:linear-gradient(white, transparent, transparent, transparent, black);
    height:50px;
    width:150px;
    align-content:center;
    text-align: center;
    line-height:40px;
    font-size: larger;
    font-style: bold;
    cursor:pointer;
    margin-top:10px;
}
.button:hover {
    border:3px solid gray;
}