:root {  
    --main-color: #931101;
}

html, body {
    font-family: 'Cantarell', sans-serif;
    font-size: calc((.2em + .7vmin) + (.2em + .7vmax));
}

body {
    display: grid;
    grid-template-areas:
        "header"
        "article"
        "footer";
    grid-template-rows: auto 1fr auto;
    grid-row-gap: 0;
    height: 100vh;
    margin: 0;
}

#header {
    grid-area: header;
    display: grid;
    !grid-template-columns: 30% 70%;
    background-color: #e57801;
    color: white;
    padding-left: 12%;
    padding-top: 1.6em;
    padding-bottom: 0.5em;
    padding-right: 10%;
}

#article {
    grid-area: article;
    background-color: #fcfcfc;
    padding-top: 2.2em;
    padding-left: 12%;
    padding-right: 10%;
    color: #444;
}

#footer {
    grid-area: footer;
    !background-color: #f2eed6;
    !color: #fcfcfc;
    text-align: center;
    font-style: italic;
    font-size: smaller;
    padding-top: 1.2em;
    padding-bottom: 1.2em;
}

#gnu-nav {
    !background-color: #111;
    margin-top: -1.4em;
    !margin-left: -1.2em;
    !margin-right: -2em;
    !margin-bottom: 1.2em;
    !padding-top: 1.0em;
    !padding-left: -1em;
    font-size: calc((.2em + .25vmin) + (.2em + .25vmax));
    font-weight: bold;
    text-align: center;
}

#title {
    !background-color: #111;
    !margin-top: -3.3em;
    !margin-left: 2em;
    !margin-bottom: -20px;
}

#site-nav {
    !background-color: #333;
    margin-left: -1.0em;
    padding-top: .2em;
    padding-bottom: .8em;
    !font-size: calc((.2em + .75vmin) + (.2em + .75vmax));
    font-size: smaller;
    font-weight: bold;
}


p.ul {
    !margin-left: 1em;
}

p.ulstrong {
    margin-left: 1em;
    font-weight: bold;
}

p.join-fsf {
    margin-top: calc(-1 * ((.6em + .3vmin) + (.6em + .3vmax)));
}

p.title {
    !color: #aad8f1;
    margin-top: 0.1em;
     !font-size: 3.3em;
    font-size: calc((.2em + 3.5vmin) + (.2em + 3.5vmax));
    font-weight: bold;
}

p.subtitle {
    !color: #00bc9b;
    !color: #aad8f1;
    color: var(--main-color);
    margin-top: -3.2em;
    !margin-bottom: 1.4em;
    !font-size: 1.2em;
    font-size: calc((.2em + 0.98vmin) + (.2em + 0.98vmax));
    font-weight: bold;
}

img.logo {
    border: none;
    vertical-align: middle;
    margin-top: 0.4em;
    width: 10%;
}

img.yourlogo {
    border: none;
    display: block;
    width: 25%;
    margin-left: auto;
    margin-right: auto;
}

img.center {
    !background-color: #222;
    border: none;
    display: block;
    width: 60%;
    !height: auto;
    margin-top: -0.6em;
    margin-left: auto;
    margin-right: auto;
}

img.adwhori {
    !background-color: #222;
    border: none;
    display: block;
    width: 90%;
    !height: auto;
    margin-top: -1.2em;
    margin-left: auto;
    margin-right: auto;
    !margin-bottom: 1em;
}

img.adw {
    !background-color: #222;
    border: none;
    display: block;
    width: 60%;
    !height: auto;
    margin-top: -1.2em;
    margin-left: auto;
    margin-right: auto;
    !margin-bottom: 1em;
}

#title a:link {
    color: #ffffff;
    text-decoration: none;
}

#title a:visited {
    color: #ffffff;
    text-decoration: none;
}

#title a:hover:link {
    color: #ffffff;
    !text-decoration: none;
}

#title a:hover:visited {
    color: #ffffff;
    !text-decoration: none;
}

/* the fsf banner color #b11107 */

#gnu-nav a:link {
    color: #fff;
    !color: #8a5167;
    !color: #aad8f1;
    !text-decoration: none;
    padding-left: 1em;
}

#gnu-nav a:visited {
    color: #fff;
    !text-decoration: none;
}

!#gnu-nav a:hover:link {
!    color: #ffffff;
!    background-color: #333;
!}

!#gnu-nav a:hover:visited {
!    !color: #c18928;
!    color: #ffffff;
!    background-color: #333;
!}


/*
 * site-nav
 */

#site-nav a:link {
    color: #fff;
    padding-left: 0.8em;
}

#site-nav a:visited {
    color: #fff;
    text-decoration: none;
}

#site-nav a:hover:link {
    color: #ffffff;
}

#site-nav a:hover:visited {
    color: #ffffff;
}

a:link,
a:visited {
    !color: #D0343F;
    !color: #00bc9b;
    !color: #8db5a7;
    !color: #6c8c80;
    !color: #c15a27; /* orange */
    !color: #8a5167; /* mauve */
    !color: #9e3034;  /* dark red */ 
    !color: #915167;
    !color: var(--main-color);
    !color: #a33900;
    !color: #D0343F;
    !color: #edb927;
    color: #cd8001;
    text-decoration: none;
}

a:active, a:focus, a:hover {
    text-decoration: underline;
}


h1 {
    font-size: calc((.2em + 2vmin) + (.2em + 2vmax));
}

h1, h2, h3 {
    color: var(--main-color);
    margin-top: 5%;
}

h2 {
    font-size: calc((.2em + 1.4vmin) + (.2em + 1.4vmax));
}

h3 {
    font-size: calc((.2em + .7vmin) + (.2em + .7vmax));
}

h4 {
    margin-top: 2%;
    color: var(--main-color);
    border-bottom: 1px solid #999;
}

.clear {
      clear: both;
    }

ul.code {
    margin: 8px 10px 10px -10px;
    list-style-type: none;
    font-family: monospace;
    font-size: smaller;
    color: #1e3f18;
    text-align: left;
}

ul.ni {
    !margin: 8px 10px 10px -10px;
    list-style-type: none;
    !font-family: monospace;
    !font-size: 0.8em;
    !color: #1e3f18;
    text-align: left;
}

code {
    font-family: monospace;
    font-size: smaller;
    color: #1e3f18;
    text-align: left;
    /* #702070; mauve */
    /* #c18928; orange claws-mail */
    /* #1e3f18; dark green */    
}

b {
    font-weight: bold;
}

k {
    !font-weight: bold;
    !color: #c18928;
    !color: #00bc9b;
    !color: #770;
    !color: #c15a27;
    !color: #915167;
    !color: #6c8c80;
    color: #770;
}

kb {
    font-weight: bold;
    !color: #c18928;
    !color: #00bc9b;
    color: #770;
}

l {
    color: #800;
}

m {
    padding-left: 1.2em;
    !color: #999;
    color: var(--main-color);
}

fu {
    !color: #008;
}

st {
    color: #555;
}


r {
    font-weight: bold;
    !color: #c18928;
    color: #D0343F;
    /* color: #080; */
}

v {
    !font-size: 1.1em;
    font-weight: bold;
    color: #1e3f18
}

p.pre {
    background-color: #ccc;
    margin-left: 2em;
    margin-right: 4em;
    font-family: monospace;
    font-size: smaller;
}

p.one {
    margin-left: 1em;
}

p.inli {
    margin-left: 1em;
    margin-right: .7em;
    text-align: left;    
}

p.note {
    !margin-left: 1em;
    !margin-right: 1em;
    font-size: smaller;
}

p.enote {
    margin-left: 2em;
    font-size: smaller;
}

p.corenote {
    margin-left: 2em;
    margin-right: 3em;
    font-size: smaller;
}

p.corenoteindent {
    margin-left: 3em;
    margin-right: 3em;
}

p.h3 {
    margin-left: 2em;
    margin-right: 3em;
    color: var(--main-color);
    border-bottom: 1px solid #999;
    font-size: smaller;
}

p.h32 {
    !margin-left: 2em;
    !margin-right: 3em;
    color: var(--main-color);
    border-bottom: 1px solid #999;
    font-size: smaller;
}

p.center {
    display: block;    
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

p.imgsrc {
    display: block;
    margin-top: -0.4em;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

p.adwcaption {
    display: block;
    margin-top: -0.8em;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}


p.ipa {
    display: block;    
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

p.warn {
    display: block;    
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-family: monospace;
    font-size: smaller;
    !background-color: #ccc;
    color: #555;
}

p.invi {
    color: #f2eed6;
    !background-color: #ccc;
    height: 30px;
}

inv {
    color: #f2eed6;
}

ul.pre {
    background-color: #f2eed6;
    border-radius: 9px;
    list-style-type: circle;
    font-family: monospace;
    font-size: smaller;
    padding-top: 0.7em;
    padding-bottom: 0.01em;
}


/*
 * G-Golf stats table
 */

.table {
    display: table;
    background-color: #f2eed6;
    border-radius: 9px;
    width: 82%;
    margin-top: -0.2em;
    margin-left: 2em;
    margin-right: auto;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
    padding-right: 0.7em;
}

.table .row {
    display: table-row;
}

.table .cellone {
    display: table-cell;
    width: 20%;
    text-align: right;
}

.table .cellthree {
    display: table-cell;
    padding-left: 1em;
    padding-right: 0.5em;
}

.table .cellra {
    display: table-cell;
    width: 20%;
    padding-right: 0.5em;
    text-align: right;
}

p.tablecaption {
    display: block;
    margin-top: -0.3em;
    margin-left: auto;
    margin-right: 3em;
    text-align: right;
    font-size: smaller;
}


.tabledonate {
    display: table;
    background-color: #f2eed6;
    border-radius: 9px;
    width: 82%;
    margin-top: -0.2em;
    margin-left: 2em;
    margin-right: auto;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
    padding-right: 0.7em;
    !font-size: smaller;
}

.tabledonate .row {
    display: table-row;
}

.tabledonate .cellone {
    display: table-cell;
    width: 35%;
    color: var(--main-color);
    text-align: right;
    font-weight: bold;
}

.tabledonate .cell {
    display: table-cell;
    !width: 62%;
    padding-left: 0.7em;
}


.tabledonatesummary {
    display: table;
    background-color: #f2eed6;
    border-radius: 9px;
    width: 100%;
    margin-top: -0.2em;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
    font-size: smaller;
}

.tabledonatesummary .row {
    display: table-row;
}

.tabledonatesummary .cellh {
    display: table-cell;
    padding-left: 0.7em;
    color: var(--main-color);
    text-align: center;
    font-weight: bold;
}

.tabledonatesummary .cell {
    display: table-cell;
    padding-left: 0.7em;
}

.tabledonatesummary .celle {
    display: table-cell;
    text-align: center;
}

.tabledonatesummary .cellra {
    display: table-cell;
    text-align: right;
}

/*
 * footer
 * a link
 */


/*
 * Stack the layout on small devices/viewports.
 */

@media all and (max-width: 575px) {
    html, body {
        font-size: calc((.2em + .8vmin) + (.2em + .8vmax));
    }
    h3 {
        font-size: calc((.2em + .8vmin) + (.2em + .8vmax));
    }
    #header {
        padding-left: 2.2em;
        padding-right: 2.2em;
    }
    
    #article {
        padding-left: 2.2em;
        padding-right: 2.2em;
    }

    .site-nav {
    }

    .site-nav ul {
    }

    .site-nav ul li {
    }
}


pre.example,
pre.lisp,
pre.verbatim {
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    border-radius: 9px;
    border: 1px solid #d4cbb6;
    color: #eaeacb;
    background-color: #111;
    /* background-color: #f1f8e9; /* libfive h1 */
    /* background-color: #e8f5e9; /* libfive h2 */
    /* background-color: #e0f2f1; /* libfive h3 */
    /* background-color: #e0f7fa; /* libfive h4 */
    /* background-color: #e1f5fe; /* libfive h5 */
    /* margin-left: -3.5em; */
    padding: .8em;
    !font-size: smaller;
    font-size: calc((.2em + .42vmin) + (.2em + .42vmax));
}


/*
 * Syntax Highlighting
 */
 
.syntax-special,
.syntax-element {
    color: #b6a0ff; /* magenta-alt-other */
}
  
.syntax-procedure-name {
    color: #feacd0; /* magenta */
}

.syntax-type {
    /* font-lock-type-face */
    color: #6ae4b9; /* cyan-alt-other */
}

.syntax-quoted-symbol {
    /* font-lock-type-face */
    color: #b08600; /* yellow-graph-1-bg */
}

.syntax-string {
    color: #79a8ff; /* blue-alt */
}

.syntax-number {
    color: #aa9e9f; /* fg-whitespace */
    !color: #bfc0c4 /* fg-inactive */
}

.syntax-keyword,
.syntax-attribute {
    color: #f78fe7; /* magenta-alt */
}
 
.syntax-comment,
.syntax-comment-delimiter {
    !color: #999;
    color: #a8a8a8; /* fg-alt */
}

 
.syntax-open,
.syntax-close {
    !color: #999;
    color: #eaeacb;
}