@font-face {
    font-family: "Courier Prime";
    src: url("../fonts/Courier_Prime/CourierPrime-Regular.ttf")
}

:root {
    --font-mono: 'Courier New', Courier, "Courier Prime", monospace;
    --main-text-color: #ffffd1; /* #FFFFD1 */
    /* --special-text-color */
    --main-background-color: rgb(0, 0, 65);
    --special-background-color: #490066; /* #3b0066 #37004d */ 
    --main-border-radius: 10px;
    /* --special-border-radius: 10px; */
}

body {
    margin: 20px;
    border: 0;
    padding: 0;
    color: var(--main-text-color);
    font-family: var(--font-mono);
    background-color: black;
    background-image: url("../star_tile.png");
    background-size: contain;
    background-repeat: repeat;
    
}

.ascii-art > span {
    white-space: pre; /* Only preserve the whitespace within the span elements, not the whitespace within the containing div */
    display: block; /* If you don't display it as block the lines of text will all end up on the same line (due to the fact that "display: inline" does not make a newline), ruining the ascii art*/
    margin: 0; border: 0; padding: 0;
}

.nav-list {
    list-style: none; /* https://www.shecodes.io/athena/25632-how-to-put-all-elements-of-an-unordered-list-in-one-line-with-css */
    background-color: var(--main-background-color);
    display: inline;
    border-radius: 50px;
    padding: 5px;
}

.nav-list > li {
    display: inline;
    margin: 0px 10px; /* Add some spacing between the list elements */
}

nav {
    margin: 20px;
    text-align: center;
}

header {
    margin-bottom: 10px;
    border-radius: var(--main-border-radius);
    background-color: var(--special-background-color);
    text-align: center;
}

header * {
    margin: 0;
}

main {
    background-color: var(--main-background-color);
    border-radius: var(--main-border-radius);
    padding: 1px 20px;
    background-color: var(--main-background-color);
}

footer {
    text-align: left;
    background-color: var(--special-background-color);
    border-radius: var(--main-border-radius);
    margin-top: 10px;
}

footer * {
    margin: 0;
}

h1, h2, h3 {
    text-align: center;
}

h2 {
    margin-bottom: 0;
}

#binary-input {
    outline: none; /* https://stackoverflow.com/questions/38133269/text-input-border-color-not-changing-correctly-on-focus */
    color: inherit;
    font-size: 1rem;
    background-color: black;
    width: 16ch;
    border: 1px solid white;
    border-radius: 5px;
}

:focus#binary-input { /*TODO: Choose a good outline color*/
    outline: none;
}

/* * { margin: 0 !important; border: 0 !important; padding: 0 !important; } */