body {
    --background: #1F204C;
    --number-background: #5F61BB;
    --number-shadow: #434596;
    --symbol-background: #424392;
    --symbol-shadow: #313378;
    --text: #F6F6F6;
    --text-fade: #CCCCCC;
    --text-green: #2ECC71;
    --text-red: #D8334A;
    --selected-background: #DDDDDD;
    --selected-shadow: #C8C8C8;

    background-color: var(--background);
    color: var(--text);
    margin: 0;
    font-family: 'Baloo', cursive;
    overflow-x: hidden;
}

#hidden {
    display: none;
}

#game {
    width: 100vw;
    min-height: 100vh;
    cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_default.png), auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

#game[cursor="default"] {
    cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_default.png), auto;
}

#game[cursor="1"] {
    cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_1.png), auto;
}

#game[cursor="2"] {
    cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_2.png), auto;
}

#game[cursor="3"] {
    cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_3.png), auto;
}

#game[cursor="4"] {
    cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_4.png), auto;
}

#game[cursor="5"] {
    cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_5.png), auto;
}

#game[cursor="6"] {
    cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_6.png), auto;
}

#game[cursor="7"] {
    cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_7.png), auto;
}

#game[cursor="8"] {
    cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_8.png), auto;
}

#game[cursor="9"] {
    cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_9.png), auto;
}

#game[cursor="0"] {
    cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/cursor_clear.png), auto;
}

#board {
    display: flex;
    flex-direction: column;
    transform: translateX(50px);
    min-width: 600px;
    min-height: 600px;
    max-width: 600px;
    max-height: 600px;
    margin-top: 10px;
}

#board .row {
    display: flex;
    flex-direction: row;
}

#board .row>div {
    width: 80px;
    height: 80px;
    margin: 10px;
}

#board .row>div.number,
#board .row>div.symbol,
#board .row>div.result {
    user-select: none;
    line-height: 80px;
    text-align: center;
    font-size: 60px;
}

#board .row>div.number,
#board .row>div.symbol {
    border-radius: 8px;
}

#board .row>div.number {
    background-color: var(--number-background);
    box-shadow: 0 8px 0 0 var(--number-shadow);
    transition: all .25s -.1s;
}

#board .row>div.number:active {
    transform: translateY(8px);
    box-shadow: 0 0px 0 0 #434596;
}

#board .row>div.symbol {
    background-color: var(--symbol-background);
    box-shadow: 0 8px 0 0 var(--symbol-shadow);
}

#board .row>div.result {
    position: relative;
    font-size: 40px;
}

#board .row>div.result.correct {
    color: var(--text-green);
}

#board .row>div.result.wrong {
    color: var(--text-red);
}

#keyboard {
    width: 500px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

#keyboard .key {
    width: 80px;
    height: 80px;
    line-height: 80px;
    margin: 10px;
    font-size: 52px;
    border-radius: 8px;
    text-align: center;
    user-select: none;
    background-color: var(--number-background);
    box-shadow: 0 8px 0 0 var(--number-shadow);
    transition: all 0.25s -0.1s;
}

.key.used {
    background-color: var(--symbol-background);
    box-shadow: 0 8px 0 0 var(--symbol-shadow);
}

.key.used:active {
    transform: translateY(8px);
    box-shadow: 0 0px 0 0 var(--symbol-shadow);
}

.key.used.selected {
    color: var(--symbol-background);
    background-color: var(--selected-background);
    box-shadow: 0 16px 0 0 var(--selected-shadow);
    transform: translateY(-8px);
}

.key.used.selected:active {
    transform: translateY(8px);
    box-shadow: 0 0px 0 0 var(--selected-shadow);
}

.key:not(.used):active {
    transform: translateY(8px);
    box-shadow: 0 0px 0 0 var(--number-shadow);
}

.key:not(.used).selected {
    color: var(--number-background);
    background-color: var(--text);
    box-shadow: 0 16px 0 0 var(--text-fade);
    transform: translateY(-8px);
}

.key:not(.used).selected:active {
    transform: translateY(8px);
    box-shadow: 0 0px 0 0 var(--text-fade);
}


#winner {
    position: fixed;
    top: 50%;
    left: 0px;
    right: 0px;
    transform: translateY(-50%);
    background-color: #2ABA66;
    text-align: center;
}

#winner .header {
    margin: 40px 0;
    font-size: 60px;
    margin-bottom: -20px;
}

#winner #new {
    margin-bottom: 30px;
}

#winner #close {
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 0 14px;
    font-size: 32px;
}

#winner:not(.show) {
    display: none;
}

