article {
    font-family: 'Tangerine', cursive;
    padding: 0 0 10px 0;
    text-align: center;
    width: 320px;
    font-size: 18px;
}

button {
    font-family: 'Didact Gothic', sans-serif;
}

#puzzleboard {
    display: grid;
    grid-template-columns: 40px repeat(11, 40px);
    grid-template-rows: 40px repeat(11, 40px); 
}

.cell {
    border: 1px solid white; 
    justify-content: center;
    background-repeat: no-repeat;
    background-size: contain;
    text-align: center;
    font-size: 24px;
}

.topkey {
    grid-template-columns: 40px repeat(11, 40px);
    display: grid;
    text-align: center;
    font-size: 24px;
}

.positivenegative {
     position: absolute;
     top: 100px;
     left: 500px;
}

.colorCell {
	width: 50px;
	height: 50px;
	border: 5px solid white;
	border-color: grey;
	float: left;
}

.configCell {
	width: 67px;
	height: 75px;
	border: 5px solid white;
	border-color: grey;
	float: left;
	font-size: 9;
    	text-align: center;
}


.topkey div {
    display: flex;
    align-items: flex-end;
    background-color: #e6ed00;
    color: #000000;
}

.leftkey {
    text-align: right;
    padding: 2px 5px 0px 0px;
    font-size: 24px;
    background-color: #00e4ed;
    color: #000000;
    border-color: red;
}

.instr-label {
    color: black;
}

#puzzle-full {
    display: block;
}

#instructions {
    display: none;
    padding: 0 2px;
}

#instructions-text {
    width: 361px;
    height: 333px;
    text-align: justify;
    text-justify: inter-word;
    padding: -40px 2px 0 2px;
}


/* BOLD GRID LINES */
    /* Center Vertical */


    #c5r1, #c5r2, #c5r3, #c5r4, #c5r5, #c5r6, #c5r7, #c5r8, #c5r9, #c5r10 {
        border-right: 2px solid #d7d7d7;
    }
    #c6r1, #c6r2, #c6r3, #c6r4, #c6r5, #c6r6, #c6r7, #c6r8, #c6r9, #c6r10 {
        border-left: 2px solid #d7d7d7;
    }

    /* Center Horizontal */

    #c1r5, #c2r5, #c3r5, #c4r5, #c5r5, #c6r5, #c7r5, #c8r5, #c9r5, #c10r5 {
        border-bottom: 2px solid #d7d7d7;
    }
    #c1r6, #c2r6, #c3r6, #c4r6, #c5r6, #c6r6, #c7r6, #c8r6, #c9r6, #c10r6 {
        border-top: 2px solid #d7d7d7;
    }


    /* Top */
    #c1r1, #c2r1, #c3r1, #c4r1, #c5r1, #c6r1, #c7r1, #c8r1, #c9r1, #c10r1 {
        border-top: 3px solid #d7d7d7;
    }

    /* Bottom */
/*
    #c1r10, #c2r10, #c3r10, #c4r10, #c5r10, #c6r10, #c7r10, #c8r10, #c9r10, #c10r10 {
        border-bottom: 3px solid #d7d7d7;
    }
*/
    /* Left */
    #c1r1, #c1r2, #c1r3, #c1r4, #c1r5, #c1r6, #c1r7, #c1r8, #c1r9, #c1r10 , #c1r11{
        border-left: 3px solid #386286;
    }

    /* Right */
    #c10r1, #c10r2, #c10r3, #c10r4, #c10r5, #c10r6, #c10r7, #c10r8, #c10r9, #c10r10 {
        border-right: 3px solid #d7d7d7;
    }

    /* White Corner Top Left */
    #c0r0 {
        border-left: #d7d7d7;
        border-top: #d7d7d7;
    }