@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;600&display=swap');
:root {
    --white: #FFFFFF;
    --black: #000000;
    --highlighter: #D5F900;
    --neutral: #191823;
    --green: #13E280;
    --teal: #19D7CF;
    --aqua: #00CFE9;
    --blue: #006FF9;
    --indigo: #683EF7;
    --orchid: #8E06FF;
    --magenta: #C523DA;
    --fuchsia: #FF42A3;
    --coolred: #DE2D59;
    --warmred: #FF5348;
    --yellow: #FFD651;
    --background: #F6F8FA;
    --border: #EEEEED;
    --shadow: #CCCCCC;
    --gray: #AAAAAA;
    --darkgray:#333333;
    --darkblue: #005FD7;
}
html {
height: -webkit-fill-available;
}  	
body {
    font-family: 'Montserrat', arial,sans-serif;
    text-align:center;
    margin:0;
    padding:0;
    color:var(--neutral);			
    background-color: var(--background);
}	
main {
    max-width: 500px;
    position: relative;
    margin: 0 auto;
    width:100%;
}
header {
    font-weight: 100;
    font-size: 40px;
    letter-spacing: 0.2em;
    padding-top:10px;
}
nav {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:40px;
    font-size:24px;
    line-height:40px;
}
nav > * {
    position:absolute;
    top:20px;
    cursor:pointer;
}
nav > *:first-child {
    left:30px;
}
nav > *:last-child {
    right:30px;
}
#game {
    display:inline-block;
    max-width:100%;
    margin:20px auto;
}
#keyboard {
    display: flex;
    width: 100%;
    height: auto;
    justify-content: space-around;
    font-size: 20px;
    margin-top: 20px;
}
#keyboard .key {
    color: var(--white);
    padding: 15px 2px;
    background: var(--gray);
    border-radius: 3px;
    width: 25px;
    text-align: center;
    flex-grow:1;
    margin:3px;
}
#keyboard .key:hover {  
    background: var(--darkgray);
    cursor: pointer;
}
#keyboard .key.active {
    background: var(--green);
}
#keyboard .key.hidden {
    visibility: hidden;
}
table {
    border: none;
    padding: 0px;
    margin: 0px;
    border-collapse: collapse;
    background: var(--white);
}
td {
    padding: 0px;
    border: 2px solid var(--neutral);
}
#parent {
    border: 2px solid var(--neutral);
}
#parent table {
    width:120px;
    height:120px;
}
#parent table td {
    width: 40px;
    height: 40px;
    border: 1px solid var(--gray);
    font-size: 28px;
    font-weight: bold;
}
#parent table tr:last-child td {
    border-bottom: 0px;
}
#parent table tr:first-child td {
    border-top: 0px;
}
#parent table td:first-child {
    border-left: 0px;
}
#parent table td:last-child {
    border-right: 0px;
}
#parent table td:not(.clue):hover {
    cursor: pointer;
    background-color:var(--gray);
}
#parent table td.highlight, #parent table td.highlight:hover {
    background-color:var(--highlighter);
}
#parent table td.active {
    cursor: pointer;
    background-color:var(--green);
    color:var(--blue);
}
#parent table td.guessed {
    color:var(--blue);
}
#parent table td.invalid {
    color:var(--coolred);
}

#statistics {
    display:none;
}
#numbers i {
    width: 18px;
    margin-right: 5px;
    text-align: center;
}
.numbers {
    display: flex;
}
.number {
    flex-grow: 1;
}
.digit {
    font-weight: bold;
    font-size:24px;
    word-break: keep-all;
}
#status {
    margin-top: 10px;
    text-align: left;
}
#status > div {
    width: 49%;
    display: inline-block;
    vertical-align: top;
}
#status > div:not(:first-child) {
    text-align: right;
}
button {
    cursor: pointer;
}
#status button {
    min-width: 40px;
    min-height: 30px;
    border: none;
    border-radius: 3px;
    margin-top: 8px;
}
#solve, #clue {
    color:var(--white);
    background-color: var(--blue);
}
#lock {
    color:var(--white);
    background-color: var(--coolred);
}
#lock.active {
    background-color: var(--green);
}
@media (prefers-color-scheme: dark) {
    body {
        color: var(--white);
        background-color: var(--neutral);
    }
    table {
        color: var(--neutral);
    }
}