*
{background-color: #0000AA;
color:#FFFFFF;
font-family: "Lucida Console", monospace;
}

nav {
    border: 2px solid #FFFFFF;
    padding: 4px;
    font-family:  monospace;
}

nav a {
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    
}

nav a:hover {
    color:  gray;
}

footer {
    font-size: .5em;
    padding-top: 5em;
}

.codeSpace {
    background-color: #012456;
    border: 1px solid gray;
    display: inline-block;
    padding: 2px;
}

.javaScriptLogo-wrapper {
    display: flex;
    justify-content: center;

}
.javaScriptCartographerLogo {
    text-align: center;
    background-image: url("images/jSCartographerLogo512.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat; 
    width: 512px;
    height: 512px;
    display: block;
}
.logoFont {
    display: block;
    justify-content: center;
    font-size: 2em;
    text-align: center;
}

table {
    width: 100%;
    color: #FFFFFF;
    border-collapse: collapse;
    border: solid; 
}

td, th {
    border: solid;
    border-collapse: collapse;
    border: 1px solid #FFFFFF;
    padding: 10px;
}

.htmlSpace {
    background-color: #0B1C0B;
    border: 1px solid gray;
    display: inline-block;
    padding: 2px;
    color: #33FF33;
}

div {
    margin-top: 16px;
    margin-bottom: 16px;
    display: block;
}

pre.codeSpace, pre.htmlSpace, pre.innerHTMLSpace {
    display: block;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    white-space: pre;
}

button {
    background-color:#C0C0C0;
    color:#0000AA;
    font-weight: bold;
    padding: 4px;
}

button:hover {
    background-color: #FFFFFF;
}

.innerHTMLSpace {
    background-color: #0000AA;
    border: 1px solid #000000;
    display: inline-block;
    padding: 2px;
    color: #FFFFFF;
}