
body {
    background-color: #d0c0a4;
    box-shadow: inset 0 0 1024px #ae8665;
}

aside {
    width: 128px;
    
    background-color: #754632;
    box-shadow: 0 0 16px #0000007F, inset 0 0 64px #5D4038;
}

aside:nth-child(1) {
    border-right-width: 16px;
    
    border-right-style: solid;
    border-right-color: #381d16;
}

aside:nth-child(3) {
    border-left-width: 16px;
    
    border-left-style: solid;
    border-left-color: #381d16;
}

aside hr {
    border: none;
    border-bottom: 1px solid #280F08;
}

button {
    border-radius: 1024px;
    border-style: outset;
    border-color: #966F48;
    background-color: #65371F;
    background-color: #664526;
    color: #F5E9C3;
    
    cursor: pointer;
}

aside button {
    margin-left: -10px;
    border-left-width: 8px;
    border-right-width: 8px;
    width: 160px;
    
    border-radius: 4px;
    border-style: ridge;
    border-left-style: solid;
    border-right-style: solid;
    border-left-color: #2F1D11;
    border-right-color: #2F1D11;
    background-color: #B8964C;
    box-shadow: inset 0 -8px 16px #5E4526;
    font-family: serif;
    font-size: 16px;
    text-shadow: 0.125em 0em 0em #000000, 0.1225981600504038em 0.02438629025201603em 0em #000000, 0.11548494156391084em 0.04783542904563622em 0em #000000, 0.10393370153781815em 0.06944627912745027em 0em #000000, 0.08838834764831845em 0.08838834764831843em 0em #000000, 0.06944627912745029em 0.10393370153781815em 0em #000000, 0.04783542904563623em 0.11548494156391084em 0em #000000, 0.02438629025201604em 0.1225981600504038em 0em #000000, 7.654042494670958e-18em 0.125em 0em #000000, -0.024386290252016024em 0.1225981600504038em 0em #000000, -0.047835429045636216em 0.11548494156391084em 0em #000000, -0.06944627912745024em 0.10393370153781817em 0em #000000, -0.08838834764831843em 0.08838834764831845em 0em #000000, -0.10393370153781817em 0.06944627912745027em 0em #000000, -0.11548494156391084em 0.04783542904563624em 0em #000000, -0.1225981600504038em 0.024386290252016076em 0em #000000, -0.125em 1.5308084989341915e-17em 0em #000000, -0.1225981600504038em -0.024386290252016045em 0em #000000, -0.11548494156391086em -0.04783542904563621em 0em #000000, -0.10393370153781818em -0.06944627912745024em 0em #000000, -0.08838834764831846em -0.08838834764831843em 0em #000000, -0.06944627912745027em -0.10393370153781815em 0em #000000, -0.04783542904563629em -0.11548494156391081em 0em #000000, -0.024386290252016083em -0.12259816005040379em 0em #000000, -2.296212748401287e-17em -0.125em 0em #000000, 0.024386290252016038em -0.1225981600504038em 0em #000000, 0.04783542904563625em -0.11548494156391083em 0em #000000, 0.06944627912745023em -0.10393370153781818em 0em #000000, 0.08838834764831842em -0.08838834764831846em 0em #000000, 0.10393370153781815em -0.06944627912745027em 0em #000000, 0.11548494156391081em -0.0478354290456363em 0em #000000, 0.12259816005040379em -0.02438629025201609em 0em #000000;
    transition: filter 0.125s, margin 0.125s;
}

aside button:hover:not(:active) {
    margin-left: -8px;
    filter: brightness(1.25);
    transition: filter 0s, margin 0s;
}

aside button:active {
    filter: brightness(0.75);
    transition: filter 0.03125s, margin 0.03125s;
}

aside .dark-area {
    display: block;
}

aside .dark-area:hover {
    filter: brightness(1.25);
}

label[for] {
    cursor: pointer;
}

input[type=checkbox] {
    position: relative;
    
    visibility: hidden;
    cursor: pointer;
}

input[type=checkbox]::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    
    border-width: 1px;
    width: 100%;
    height: 100%;
    
    border-style: ridge;
    border-color: #C5BFA5;
    background-color: #0000007F;
    color: #CC2328;
    
    content: "";
    visibility: initial;
}

input[type=checkbox]:checked::before {
    content: "✔";
}




















.dark-area {
    padding-left: 4px;
    
    background-color: #2B1C15;
    box-shadow: inset 0 -16px 16px #553B2E;
    color: #F5E9C3;
    text-shadow: 0.125em 0em 0em #000000, 0.1225981600504038em 0.02438629025201603em 0em #000000, 0.11548494156391084em 0.04783542904563622em 0em #000000, 0.10393370153781815em 0.06944627912745027em 0em #000000, 0.08838834764831845em 0.08838834764831843em 0em #000000, 0.06944627912745029em 0.10393370153781815em 0em #000000, 0.04783542904563623em 0.11548494156391084em 0em #000000, 0.02438629025201604em 0.1225981600504038em 0em #000000, 7.654042494670958e-18em 0.125em 0em #000000, -0.024386290252016024em 0.1225981600504038em 0em #000000, -0.047835429045636216em 0.11548494156391084em 0em #000000, -0.06944627912745024em 0.10393370153781817em 0em #000000, -0.08838834764831843em 0.08838834764831845em 0em #000000, -0.10393370153781817em 0.06944627912745027em 0em #000000, -0.11548494156391084em 0.04783542904563624em 0em #000000, -0.1225981600504038em 0.024386290252016076em 0em #000000, -0.125em 1.5308084989341915e-17em 0em #000000, -0.1225981600504038em -0.024386290252016045em 0em #000000, -0.11548494156391086em -0.04783542904563621em 0em #000000, -0.10393370153781818em -0.06944627912745024em 0em #000000, -0.08838834764831846em -0.08838834764831843em 0em #000000, -0.06944627912745027em -0.10393370153781815em 0em #000000, -0.04783542904563629em -0.11548494156391081em 0em #000000, -0.024386290252016083em -0.12259816005040379em 0em #000000, -2.296212748401287e-17em -0.125em 0em #000000, 0.024386290252016038em -0.1225981600504038em 0em #000000, 0.04783542904563625em -0.11548494156391083em 0em #000000, 0.06944627912745023em -0.10393370153781818em 0em #000000, 0.08838834764831842em -0.08838834764831846em 0em #000000, 0.10393370153781815em -0.06944627912745027em 0em #000000, 0.11548494156391081em -0.0478354290456363em 0em #000000, 0.12259816005040379em -0.02438629025201609em 0em #000000;
}
