:root {
    --accent: #C84422;
    --accent-hover: #B63A1C;
    --accent-soft: #F7E9E4;
    --accent-text: #A8351A;
}
body{
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 100px auto;
    grid-auto-rows: 50px auto;
    width: 100vw;
    height: 100vh;
    grid-template-areas:
            "leftMenu topMenu"
            "leftMenu siteContent";
    user-select: none;
}
.topMenu{
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.2);
    grid-area: topMenu;
}
.leftMenu{
    background: var(--accent);
    grid-area: leftMenu;
    color: #fff;
}
.leftMenu a{
    display: block;
    color: var(--accent-soft);
    text-decoration: none;
    width: 100px;
    height: 100px;
    text-align: center;
}
.leftMenu a:hover{
    background: var(--accent);
}
.siteContent{
    grid-area: siteContent;
    padding-top: 10px;
}
.tabContent[active]{
    display: block;
}
.tabContent{
    display: none;
    border-top: 10px var(--accent-hover) solid;
}
.tab{
    display: block;
    border-left: 1px gray solid;
    border-right: 1px gray solid;
    padding: 5px;
    font-size: 20px;
    margin: 0 3px;
}
.tab[active]{
 }
.tab:hover{
    background: var(--accent-hover);
}
.tab{
     display: block;
     border: 1px gray solid;
     padding: 5px;
     font-size: 20px;
     margin: 0 3px;
 }
.settingsFrame__tabList{
    padding: 0;
    display: flex;
    margin: 0;
}