sudoku.css

#sudoku-grid {
    display: grid;
    grid-template-rows: repeat(9, 55px);
    grid-template-columns: repeat(9, 55px);
    grid-auto-flow: line;
    border-style: solid;
    border-color: #3b4f6d;
    border-width: 3px;
    max-width: 1px;
    margin-bottom:20px;
}

#selection-grid {
    display: grid;
    grid-template-columns: repeat(9, 55px);
    grid-auto-flow: column;
    border-style: solid;
    border-color: #3b4f6d;
    border-width: 3px;
    max-width: 1px;
}

.case {
    border-style: ridge;
    background-color: #e1e8f2;
    color: #3b4f6d;
    text-align: center;
}

.case-fixed {
    background-color: #8c97aa;
    color: #fff;
    font-weight: bold;
}

.case:nth-child(9n+3),
.case:nth-child(9n+6) {
    border-right-style: solid;
    border-right-color: #3b4f6d;
}

.case:nth-child(19),
.case:nth-child(20),
.case:nth-child(21),
.case:nth-child(22),
.case:nth-child(23),
.case:nth-child(24),
.case:nth-child(25),
.case:nth-child(26),
.case:nth-child(27),
.case:nth-child(46),
.case:nth-child(47),
.case:nth-child(48),
.case:nth-child(49),
.case:nth-child(50),
.case:nth-child(51),
.case:nth-child(52),
.case:nth-child(53),
.case:nth-child(54) {
    border-bottom-style: solid;
    border-bottom-color: #3b4f6d;
}
.case-error {
    background-color: #bc1212;
    color: #fff;
    font-weight: bold;
}
.line-selected {
    background-color: #313a49;
    color: #fff;
}

.col-selected {
    background-color: #313a49;
    color: #fff;
}

.case-selected,.case-same-number {
    background-color: #000000;
    font-weight: bold;
    color: #fff;
}

/*****************************************************************************/
/* Layout. */
/*****************************************************************************/

*, *:before, *:after {
    box-sizing: border-box;
}

.button {
    background-color: #444;
}

body {
    overflow-y: hidden; // hide vertical
    overflow-x: hidden; // hide horizontal
    margin: 40px;
    font-family: 'Open Sans', 'sans-serif';
    background-color: #fff;
    color: #444;
}

h1, p {
    margin: 0 0 1em 0;
}

.sidebar-left {
    float: left;
    width: 30%;
}

.content {
    float: right;
    width: 40%;
}

.sidebar-right {
    float: right;
    width: 30%;
}

.wrapper {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 10px;
}

.wrapper>* {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
    font-size: 150%;
    margin-bottom: 10px;
}

.header, .footer {
    grid-column: 1 / -1;
    clear: both;
}

.header {
    height: 60px;
}

.footer {
    height: 50px;
}

@supports (display: grid) {
    .wrapper>* {
        width: auto;
        margin: 0;
    }
}