:root {
    --main-color: rgb(232, 128, 0);
    --bright-color: rgb(255, 200, 18);
    --darker-color: rgb(202, 108, 0);
    --code-color: rgb(255, 200, 168);
    --default-font-size: 12pt;
}
body {
    background-color: #222222;
    color: var(--main-color);
    font-family: "Courier New", monospace;
    font-size: var(--default-font-size);
    max-width: 1024px;
    margin: auto;
    margin-top: 20px;
}
h3 {
    font-size: 13pt;
}
h4 {
    font-size: 12pt;
}
h5 {
    font-size: 11pt;
}
strong, b {
    font-size: 11pt;
}
a {
    text-decoration: none;
    color: var(--main-color);
}
a:hover, a:focus {
    color: var(--bright-color);
}
code {
    font-family: "Courier New", monospace;
    color: var(--code-color);
    font-size: 11pt;
}
pre code {
    font-family: "Courier New", monospace;
    font-size: 11pt;
}
hr {
    height: 1px;
    border-width: 0;
    color: var(--main-color);
    background-color: var(--main-color);
}
li {
    margin-top: 5px;
    margin-bottom: 5px;
}
.wrapper {
    display: grid;
    gap: 10px;
    grid-template-areas: "hd hdn hdn"
                         "hdl hdl hdl"
                         "ct ct ct"
                         "ft ft ft"
                         "ftl ftl ftr";
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 30px, auto, 30px;
}
.header_logo {
    grid-area: hd;
    font-size: 14pt;
    text-shadow: 0 0 2px var(--main-color), 0 0 5px var(--main-color);
}
.header_nav {
    grid-area: hdn;
    text-align: right;
    font-size: 13pt;
    //text-shadow: 0 0 2px var(--main-color), 0 0 5px var(--main-color);
}
.header_line {
    grid-area: hdl;
    margin-bottom: 40px;
}
.content {
    grid-area: ct;
}
.footer_line {
    grid-area: ft;
}
.footer_left {
    grid-area: ftl;
    margin-bottom: 20px;
}
.footer_right {
    grid-area: ftr;
    text-align: right;
    margin-bottom: 20px;
}