body {
    background: #23191e;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: #cac7ba;
    height: 100dvh;
    margin: 0;
    text-align: center;
}

#container {
    position: relative;
    width: 1024px;
    min-width: 1024px;
    margin: 0 auto;
    padding: 10px 0;
    box-sizing: border-box;
}

#demo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1408px;
    z-index: 0;
    pointer-events: none;
    display: block;
    opacity: 0.05;
    -webkit-mask-image: linear-gradient(to right, transparent 0px, black 256px, black calc(100% - 256px), transparent 100%), linear-gradient(to bottom, black 0px, black calc(100% - 256px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0px, black 256px, black calc(100% - 256px), transparent 100%), linear-gradient(to bottom, black 0px, black calc(100% - 256px), transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

#page {
    position: relative;
    background: url("../img/navbg.png") no-repeat;
    width: 1024px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 256px 768px;
    grid-template-rows: auto 1fr;
    z-index: 1;
}

.header {
    grid-column: 1 / -1;
    min-height: 64px;
    padding-left: 256px;
    box-sizing: border-box;
    text-align: left;
}

.sidebar {
    position: relative;
    margin: 0;
    padding: 24px 0px;
    min-height: 320px;
}

.badges {
    position: absolute;
    bottom: 0;
    right: 10px;
    width: 100%;
    text-align: right;
}

.content {
    margin: 0;
    padding: 24px 40px;
    min-height: 320px;
    text-align: left;
}

.footer {
    grid-column: 1 / -1;
    margin-top: 32px;
    min-height: 64px;
    box-sizing: border-box;
    text-align: center;
}

a {
    color: #f1e7b6;
}

a:visited {
    color: #a7a07e;
}