body {
    background-color: #110012;
    color: #B7DDDD;
    font-family: "Consolas", monospace;
    text-align: center;
}

body a {
    color: #B7DDDD;
    text-decoration: none;
    cursor: pointer;
}

body a:hover {
    color: #EA503A;
}

h1#title {
    color: #FF9900;
}

.container {
    display: block;
    margin-left: auto;
    margin-right: auto;
    /*
     * Not sure how these compute, inline blocks have some margin sometimes.
     * See http://css-tricks.com/fighting-the-space-between-inline-block-elements/
     * I could consider using SASS to  create variables and dynamically compute
     * width and height.
     */
    width: 812px;
    height: 606px;
}

.container div {
    margin-top: 6px;
}

.container p {
    text-align: center;
}

#blueprintbox {
    display: inline-block;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #B7DDDD black;
}

#blueprintbox canvas {
    margin-left: auto;
    margin-right: auto;
    display: inherit;
}

#circuitboard, #printedwireworld {
    width: 648px;
    height: 432px;
    display: inline-block;
    border: 1px solid #B7DDDD;
}

#blueprintbox {
    display: inline-block;
    width: 150px;
    height: 432px;
    border: 1px solid #ccc;
}

#blueprintbox div {
    padding-top: 20px;
}

#messagebox {
    display: inline-block;
    width: 648px;
    height: 150px;
    vertical-align: top;
    overflow: auto;
    border: 1px solid #B7DDDD;
    
    scrollbar-width: thin;
    scrollbar-color: #B7DDDD black;
}

#messagebox p {
    text-align: left;
    margin-left: 20px;
    margin-right: 20px;
}

#playstop {
    display: inline-block;
    width: 150px;
    height: 150px;
    border: 1px solid #B7DDDD;
}

#playstop p {
    margin-top: 60px;
}

#playstop:hover {
    color: #EA503A;
    cursor: pointer;
}

.tutorial {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 761px;
    border: 1px solid #B7DDDD;
}

.tutorial p {
    text-align: left;
    margin-left: 50px;
    margin-right: 50px;
}

.tutorial div {
    text-align: center;
}

.tutorial div canvas {
    margin: 50px;
}

.tutorial div span {
    color: #B7DDDD;
    text-align: center;
    margin: 80px
}

.tutorial canvas {
    display: inline-block;
}

.mainMenu {
    position: absolute;
    width: 640px;
    height: 480px;
    left: 50%;
    top: 50%;
    margin-left: -320px;
    margin-top: -240px;
    font-size: 200%;
}

#backtomenu {
    margin-top: 20px;
}

#credits {
    position: absolute;
    bottom: 0;
    width: 100%;
    color: #2F1E2E;
    font-size: 50%;
    text-align: center;
}

#backtomenu a,
#credits a {
    color: #2F1E2E;
}

#backtomenu a:hover,
#credits a:hover {
    color: #EA503A;
    cursor: pointer;
}