:root {
	--background_image: url("https://derpicdn.net/img/view/2019/10/12/2166194.jpg");
	--background-brightness: 50%;
    --background-blur: 6px;

    --hint-background-colour: #fff;
	--hint-border-colour: #ddd;
	--hint-border-width: 2px;

    --hint-font-colour: black;
    --hint-solved-colour: #aaa;
	
	--board-background-colour: #fff;
    --board-border-colour: #eee;
	--board-border-width: 2px;
	
	--board-interval-border-colour: #aaa;
	--board-interval-border-width: 2px;

    --top-left-colour: #ffffffaa;

    --input-background-colour: #fff;
    --input-border-colour: #ddd;
    --input-font-colour: black;
    --input-border-width: 2px;

    --button-background-colour: #fff;
    --button-border-colour: #ddd;
    --button-font-colour: black;
    --button-border-width: 2px;

    --spacer-height: 1.5px;
    --spacer-colour: #ccc;

    --cell-solved: rgb(54, 234, 48);
    --cell-correct: rgb(95, 175, 217);
    --cell-incorrect: rgb(138, 138, 138);
    --cell-close-highlighting: rgb(239, 219, 186);
    --cell-hovering: rgb(218, 172, 98);
    --cell-held-down: red;
    --cell-incorrect-marker: rgb(214, 63, 63);

    --stats-label-colour: black;
    --stats-background-colour: #ffffffee;
    --stats-border-colour: #00000042;

}

.dark {
  --background_image: url("https://derpicdn.net/img/view/2019/10/12/2166194.jpg");
  --background-brightness: 29%;
  --background-blur: 9px;
  --hint-background-colour: #141414de;
  --hint-border-colour: #2b2b2bbf;
  --hint-border-width: 2px;
  --hint-font-colour: #9b9b9b;
  --hint-solved-colour: #242424;
  --board-background-colour: #000000d4;
  --board-border-colour: #1c1c1c85;
  --board-border-width: 2px;
  --board-interval-border-colour: #222;
  --board-interval-border-width: 2px;
  --top-left-colour: #000000ab;
  --input-background-colour: #0f0f0f;
  --input-border-colour: #1a1a1a;
  --input-font-colour: #808080;
  --input-border-width: 2px;
  --button-background-colour: #262626;
  --button-border-colour: #1a1a1a;
  --button-font-colour: gray;
  --button-border-width: 2px;
  --spacer-height: 1.5px;
  --spacer-colour: #4d4d4d52;
  --cell-solved: rgb(83, 172, 81);
  --cell-correct: rgb(58, 139, 182);
  --cell-incorrect: rgb(57, 52, 52);
  --cell-close-highlighting: rgba(28, 25, 25, 0.94);
  --cell-hovering: rgb(117, 96, 62);
  --cell-held-down: red;
  --cell-incorrect-marker: rgb(214, 63, 63);
  --stats-label-colour: #afafaf;
  --stats-background-colour: #070707ba;
  --stats-border-colour: #2828286b;
}


* {
    margin: 0;
    user-select: none;
}

body {
	background-image: var(--background_image);
	background-size: cover;     
	backdrop-filter: blur(var(--background-blur)) brightness(var(--background-brightness));
    display: grid;
    place-items: center;
    height: 100vh;
}

#main-container {
    height: 50%;
    aspect-ratio: 1;
    display: grid;
    grid-template-columns: 10% 90%;
    grid-template-rows: 10% 90%;
}

#top-part {
    background-color: var(--hint-background-colour);
    display: flex;
    flex-direction: row;
}

#top-part>.hint {
    flex-direction: column;
	border-bottom: var(--hint-border-width)  solid var(--hint-border-colour);
	border-right:  var(--hint-border-width)  solid  var(--hint-border-colour);
}

#top-part .hintlet {
    justify-content: center;
    align-items: flex-end;
	padding-bottom: 7px;
}

#left-part {
    background-color: var(--hint-background-colour);
    display: flex;
    flex-direction: column;
}

#left-part>.hint {
    flex-direction: row;
	border-right:  var(--hint-border-width)  solid var(--hint-border-colour);
	border-bottom: var(--hint-border-width)  solid var(--hint-border-colour);
}

#left-part .hintlet {
    justify-content: flex-end;
    align-items: center;
	padding-right: 7px;
}

.hint {
    display: flex;
}

.hintlet {
    flex: 1;
    font-size: 16px;
    font-family: monospace;
    display: flex;
    color: var(--hint-font-colour);
}

.hintlet[data-complete="true"] {
    text-decoration: line-through;
    color: var(--hint-solved-colour);
}

#topleft-part {
    background-color: var(--top-left-colour);
	border-bottom: var(--hint-border-width) solid var(--hint-border-colour);
	border-right:  var(--hint-border-width) solid var(--hint-border-colour);
}

#leftest-part {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;    
    position: absolute;

    transform: translateX(-165px);
    width: 140px;
    height: 250px;

    background-color: var(--stats-background-colour);
    border: 5px solid var(--stats-border-colour);
}

#leftest-part>div {
    color: black;
    font-family: monospace;
    font-size: 16px;
}

#mistakes {
    padding-top: 15%;
}

#stats-spacing {
    height: 15%;
}

#stats-label {
    width: 100%;
    text-align: center;
    color: var(--stats-label-colour);
}

#mistakes-span {
    color: red;
}

#progress-span {
    color: green;
}

#playing-board {
    display: grid;
}


.cell {
    box-sizing:         border-box;
    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;

    aspect-ratio: 1;
    display: grid;
    place-items: center;
	border-bottom: var(--board-border-width)  solid var(--board-border-colour);
	border-right:  var(--board-border-width)  solid var(--board-border-colour);

    background-color: var(--board-background-colour);
}

.cell:hover {
    background-color: var(--cell-hovering);
}

.cell[data-correct="2"] {
    background-color: var(--cell-solved) !important;
}
.cell[data-correct="1"] {
    background-color: var(--cell-correct) !important;
}
.cell[data-correct="0"] {
    background-color: var(--cell-incorrect) !important;
}

.cell[data-close="true"] {
    background-color: var(--cell-close-highlighting);
}

.cell.held {
    background-color: var(--cell-held-down);
}

.thick-right {
    box-sizing:         border-box;
    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
}

.thick-top {
    box-shadow: 0px calc(var(--board-interval-border-width) * -1) var(--board-interval-border-colour);
}

.thick-left {
    box-shadow: calc(var(--board-interval-border-width) * -1) 0px var(--board-interval-border-colour);
}

.thick-top.thick-left {
    box-shadow: 
        0px calc(var(--board-interval-border-width) * -1) var(--board-interval-border-colour),
        calc(var(--board-interval-border-width) * -1) 0px var(--board-interval-border-colour);
}


.incorrect-marker {
    color: var(--cell-incorrect-marker);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 32px;
}

#dimension-input-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

#width-input, #height-input {
    width: 25px;
    height: 18px;
    text-align:center;
    font-family: monospace;
    font-size: 14px;
}

#dimension-text {
    text-align: center;
    width: 20px;
    color: var(--stats-label-colour);
}

input {
    border: var(--input-border-width) solid var(--input-border-colour);
    background-color: var(--input-background-colour);
    color: var(--input-font-colour);
}

button {
    border: var(--button-border-width) solid var(--button-border-colour);
    background-color: var(--button-background-colour);
    color: var(--button-font-colour);
    width: 75%;
    font-family: monospace;
    font-size: 14px;
}

#stats-spacer {
    width: 80%;
    border: var(--spacer-height) solid var(--spacer-colour);
}


.invisible {
    display: none !important;
}

#center-screen-login-popup {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;    
    position: absolute;

    width: 250px;
    height: 150px;

    background-color: var(--stats-background-colour);
    border: 5px solid var(--stats-border-colour);
}

label {
    font-family: monospace;
    font-size: 14px;
    width: 100%;
    color: var(--stats-label-colour);

}

form {
    padding: 10px;
    display: grid;
    grid-template-columns: 30% 70%;
}

form input {
    margin: 3px;
}

form label {
    display: flex;
    justify-content: center;
    align-items: center;    
}

#user-list-table {
  width: 100%;
}

#user-list-name-entry, #user-list-colour-entry {
  padding-right: 10px;
  font-family: monospace;
  font-size: 16px;
  color: var(--stats-label-colour)
}

#user-list-colour-entry {
  width: 10px !important;
  height: 10px !important;
}

#user-list-name-entry {
  float: right;
  padding-right: 10px;
}

#user-list {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;    
    position: absolute;

    top: 20px;
    right: 20px;

    background-color: var(--stats-background-colour);
    border: 3px solid var(--stats-border-colour);
}

table {
  border-spacing: 10px;
}