:root {
  --black: #000000;
  --gray: #CCCCCC;
  --light-gray: #EEEEEE;
  --dark-gray: #444444;
  --white: #FFFFFF;
  
  --blue: #3689E6;
  --dark-blue: #0D52BF;
  --darkest-blue: #002E99;
  --light-blue: #8CD5FF;
  
  --green: #68B723;
  --dark-green: #3A9104;
  --darkest-green: #206B00;
  --light-green: #9BDB4D;

  --red: #ED5353;
  --dark-red: #A10705;
  --darkest-red: #7A0000;
  --light-red: #FF8C82;
 
  --purple: #A56DE2;
  --dark-purple: #7239B3;
  --darkest-purple: #452981;
  --light-purple: #CD9EF7;
  
  --orange: #F37329;
  --dark-orange: #CC3B02;
  --darkest-orange: #A62100;
  --light-orange: #FFC27D;
  
  --pink: #DE3E80;
  --dark-pink: #BC245D;
  --darkest-pink: #910E38;
  --light-pink: #FE9AB8;
  
  --turkoise: #28BCA3;
  --dark-turkoise: #0E9A83;
  --darkest-turkoise: #007367;
  --light-turkoise: #89FFDD;
  
  --yellow: #F9C440;
  --dark-yellow: #D48E15;
  --darkest-yellow: #AD5F00;
  --light-yellow: #FFE16B;
  
  --brown: #715344;
  --dark-brown: #57392D;
  --darkest-brown: #3D211B;
  --light-brown: #8A715E;
  
  --bluegray: #485A6C;
  --dark-bluegray: #273445;
  --darkest-bluegray: #0E141F;
  --light-bluegray: #95A3AB;
}

html,
body {
 font-family: Ubuntu;
 color: var(--white);
 text-align: center;
 transition: background 0.3s ease-in;
 margin: 0px;
 overflow-x: hidden;
 font-size: 18px;
}

body.blue {
 background-color: var(--blue);
}

body.green {
 background-color: var(--green);
}

body.red {
 background-color: var(--red);
}

body.purple {
 background-color: var(--purple);
}

body.orange {
 background-color: var(--orange);
}

body.pink {
 background-color: var(--pink);
}

body.turkoise {
 background-color: var(--turkoise);
}

body.yellow {
 background-color: var(--yellow);
}

body.brown {
 background-color: var(--brown);
}

body.bluegray {
 background-color: var(--bluegray);
}

/*
div {
 transition: margin 0.3s ease-in;
 margin-left: -2000px;
 margin-right: auto;
 position: absolute;
 width: 100%;
}
*/

div.overlay {
 position: fixed;
 left: calc(50% - (500px + 2 * 25px + 2* 2px) / 2);
 top: 25%;
 width: 500px;
 border-width: 3px;
 border-style: solid;
 box-shadow: 2px 2px 5px var(--dark-gray);
 border-radius: 25px;
 padding: 25px;
 z-index: 1500;
}

div.overlay p,
div.overlay ul {
 text-align: left;
 line-height: 1.5em;
}

div.memory_board {
 width: auto !important;
 height: auto !important;
}

div.memory_row {
 clear: both;
}

div.memory_card {
 width: 50px;
 height: 50px;
 border-radius: 10px;
 border: 3px solid var(--darkest-turkoise);
 color: var(--darkest-turkoise);
 font-size: 50px;
 font-weight: bold;
 padding: 15px;
 float: left;
 margin-left: 20px;
 margin-bottom: 20px;
 line-height: 50px;
 text-align: center;
 -webkit-user-select: none;
 -ms-user-select: none;
 user-select: none;
 background: repeating-linear-gradient(45deg, var(--light-turkoise), var(--light-turkoise) 15px, var(--darkest-turkoise) 15px, var(--darkest-turkoise) 20px);
 transform: rotateY(180deg);
}

div.memory_card_turned {
 background: var(--white) !important;
 border-color: var(--black);
}

table.battleship td.transparent,
table.checkmate td.transparent,
div.corner_value {
 font-size: 15px;
}

table.battleship td.transparent,
table.checkmate td.transparent {
 color: var(--white);
 font-weight: bold;
 width: auto;
 height: auto;
 padding: 2px 6px;
}

table.battleship td.transparent {
 min-width: 15px;
}

div.corner_value {
 position: absolute;
 padding: 4px 6px;
 color: var(--black);
}

body.blue div.overlay {
 border-color: var(--darkest-blue);
 background-color: var(--dark-blue);
}

body.green div.overlay {
 border-color: var(--darkest-green);
 background-color: var(--dark-green);
}

body.red div.overlay {
 border-color: var(--darkest-red);
 background-color: var(--dark-red);
}

body.purple div.overlay {
 border-color: var(--darkest-purple);
 background-color: var(--dark-purple);
}

body.orange div.overlay {
 border-color: var(--darkest-orange);
 background-color: var(--dark-orange);
}

body.pink div.overlay {
 border-color: var(--darkest-pink);
 background-color: var(--dark-pink);
}

body.turkoise div.overlay {
 border-color: var(--darkest-turkoise);
 background-color: var(--dark-turkoise);
}

body.yellow div.overlay {
 border-color: var(--darkest-yellow);
 background-color: var(--dark-yellow);
}

body.brown div.overlay {
 border-color: var(--darkest-brown);
 background-color: var(--dark-brown);
}

body.bluegray div.overlay {
 border-color: var(--darkest-bluegray);
 background-color: var(--dark-bluegray);
}

table.mastermind,
table.gamefield {
 border-collapse: collapse;
 margin-left: auto;
 margin-right: auto;
}

#minesweep {
 border-collapse: separate;
 border-spacing: 1px;
}

table.mastermind {
 margin-bottom: 20px;
}

#lettersudoku,
#sudoku {
 border: 4px solid var(--black);
}

table.gamefield tr:nth-child(odd) td:nth-child(odd) table.sudoku td textarea,
table.gamefield tr:nth-child(even) td:nth-child(even) table.sudoku td textarea {
 background-color: var(--light-blue);
}

table.gamefield tr:nth-child(odd) td:nth-child(odd) table.lettersudoku td textarea,
table.gamefield tr:nth-child(even) td:nth-child(even) table.lettersudoku td textarea {
 background-color: var(--light-pink);
}

table.gamefield tr:nth-child(2) table.lettersudoku tr:nth-child(2) td textarea {
 background-color: var(--pink);
}

table.hangman td,
table.tenttree td,
table.mastermind td,
table.checkmate td,
table.queens td {
 width: 50px;
 height: 50px;
 font-size: 30px;
 color: var(--black);
 background-color: var(--white);
 user-select: none;
 -webkit-user-select: none;
}

table.mastermind td {
 background-color: var(--light-red);
}

table.checkmate tr:nth-child(odd) td:nth-child(odd),
table.checkmate tr:nth-child(even) td:nth-child(even) {
 background-color: var(--dark-gray);
}

table.checkmate td.selected {
 background-color: var(--dark-orange) !important;
}

table.checkmate td.highlight::after {
 content: "●";
 color: var(--light-orange);
}

table.tenttree tr:first-child td,
table.tenttree tr td:first-child {
 background-color: var(--black);
 color: var(--white);
 font-weight: bold;
}

table.tenttree tr:first-child td:first-child {
 background-color: transparent;
 border: none;
}

table.mastermind tr td:nth-child(5) {
 border: none;
 background-color: transparent;
 width: 10px;
}

table.mastermind td,
table.hangman td,
table.tenttree td,
table.nonogram td,
table.gamefield td,
table.queens td {
 border: 2px solid var(--black);
 padding: 0px;
}

table.filippine td.highlight {
 border-left-width: 4px;
 border-right-width: 4px;
}

table.filippine tr:first-child td.highlight {
 border-top-width: 4px;
}

table.filippine tr:last-child td.highlight {
 border-bottom-width: 4px;
}

table.filippine td.highlight textarea {
 background-color: var(--light-green);
}

table.futoshiki td {
 width: 27px;
 height: 27px;
 font-weight: bold;
 font-size: 18px;
 background-color: transparent;
 border: none;
 color: var(--black);
}

table.gamefield textarea,
table.minesweep td,
table.mastermind td,
table.tenttree td,
table.queens td,
table.hangman td,
table.nonogram td,
table.matrix td,
table.checkmate td,
table.dominosa td,
table.tictactoe td,
table.battleship td,
table.logikwis td,
table.gamefield td.black {
 width: 50px;
 height: 50px;
 text-align: center;
 font-size: 30px;
 border-radius: 0px;
 padding: 5px;
 font-family: Ubuntu;
 background-color: var(--white);
}

table.tictactoe td {
 width: 100px;
 height: 100px;
 font-size: 60px;
 font-weight: bold;
 background-color: transparent;
 border: 4px solid var(--black);
 -webkit-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

table.tictactoe td.highlight {
 animation: fade-red 0.6s linear 0s infinite alternate;
}

table.tictactoe tr:nth-child(1) td {
 border-top: 0px;
}

table.tictactoe tr td:nth-child(1) {
 border-left: 0px;
}

table.tictactoe tr td:nth-child(3) {
 border-right: 0px;
}

table.tictactoe tr:nth-child(3) td {
 border-bottom: 0px;
}

table.dominosa td {
 background-color: transparent;
 border: 2px solid transparent;
 width: 40px;
 height: 40px;
 font-weight: bold;
 -webkit-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

table.dominosa td.wrong {
 color: var(--red) !important;
}

table.dominosa td.highlight_1 {
 color: var(--light-yellow);
}

table.dominosa td.highlight_2 {
 color: var(--light-blue);
}

table.dominosa td.hover {
 background-color: var(--dark-purple);
}

table.dominosa td.selected {
 background-color: var(--darkest-purple);
}

table.battleship td.fog {
 background-color: var(--gray);
}

table.battleship td.fog:hover {
 background-color: var(--light-gray);
}

table.battleship td.hit {
 background-color: var(--dark-red);
}

table.dominosa td.selected.left,
table.dominosa td.hover.left {
 border-top-left-radius: 15px;
 border-bottom-left-radius: 15px;
}

table.dominosa td.selected.right,
table.dominosa td.hover.right {
 border-top-right-radius: 15px;
 border-bottom-right-radius: 15px;
}

table.dominosa td.selected.top,
table.dominosa td.hover.top {
 border-top-left-radius: 15px;
 border-top-right-radius: 15px;
}

table.dominosa td.selected.bottom,
table.dominosa td.hover.bottom {
 border-bottom-left-radius: 15px;
 border-bottom-right-radius: 15px;
}

table.dominosa tr:nth-child(even) td {
 height: 7px;
}

table.dominosa td:nth-child(even) {
 width: 7px;
}

table.nonogram td {
 background-color: var(--light-bluegray);
}

#nonogram td.row_hints,
#nonogram td.column_hints {
 border: none;
 font-weight: bold;
 letter-spacing: 3px;
}

#nonogram td.row_hints {
 height: 61px;
 width: 60px;
 padding-right: 5px;
 text-align: right;
}

#nonogram td.column_hints {
 min-width: 20px;
 height: 64px; /* ios fix */
 padding-bottom: 5px;
 vertical-align: bottom;
}

table.nonogram td.marked {
 background-color: var(--dark-bluegray);
}

table.nonogram td.unmarked {
 background-color: var(--white);
 color: var(--black);
}

td.nonogram_left {
 border-right: 0px !important;
}

td.nonogram_right {
 border-left: 0px !important;
}

td.nonogram_top {
 border-bottom: 0px !important;
}

td.nonogram_bottom {
 border-top: 0px !important;
}

table.matrix td:not(.nohover, .marked):hover {
 background-color: var(--light-pink);
}

table.matrix td.marked {
 background-color: var(--dark-pink);
}

table.matrix td.highlight {
 background-color: var(--darkest-pink);
}

table.minesweep td {
 background-color: var(--darkest-brown);
}

table.minesweep td.revealed {
 background-color: var(--dark-brown);
 border-color: var(--brown);
}

table.hangman td {
 background-color: var(--light-turkoise);
}

table.tenttree td,
table.checkmate td,
table.battleship td,
table.queens td {
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}

table.tenttree td {
 background-color: var(--white);
 padding: 3px;
 background-blend-mode: multiply;
}

table.lettercode td,
table.filippine td {
 background-color: var(--black) !important;
 color: var(--white) !important;
}

table.battleship td.transparent,
table.filippine td.transparent,
table.checkmate td.transparent {
 background-color: transparent !important;
 border: none;
}

table.gamefield textarea {
 border: none;
 resize: none;
 overflow: hidden;
 line-height: 49px;
 height: 50px;
 width: 50px;
 margin: 0px;
 display: block;
}

table.futoshiki textarea {
 border: 2px solid var(--black);
}

table.gamefield textarea:focus {
 background-color: var(--gray);
 outline: none;
}

table.gamefield textarea.comments {
 width: 52px;
 height: 53px;
 font-size: 16px;
 padding: 2px 0px 5px 8px;
 letter-spacing: 9px;
 line-height: 18px;
 text-align: left;
 font-family: "Ubuntu Mono";
}

table.highscores {
 margin-left: auto;
 margin-right: auto;
 padding-bottom: 20px;
}

table.highscores th,
table.highscores td {
 text-align: left;
 padding: 0px 10px;
}

table.highscores tr.highlight td {
 font-weight: bold;
}

table.session_list {
 text-align: left;
 border-spacing: 0;
 border-width: 0;
 width: 100%;
}

table.session_list tr th:last-child {
 width: 100px;
}

body.blue table.session_list tr:not(:first-child):hover {
 background-color: var(--darkest-blue);
 cursor: pointer;
}

table.session_list th,
table.session_list td {
 padding: 5px 20px;
 border: none;
}

table.battleship td {
 background-color: var(--light-blue);
}

table.lingo tr:last-child td textarea {
 background-color: var(--dark-brown);
 color: var(--white);
 font-weight: bold;
}

/* text alginment fix for iOS devices */
@supports (-webkit-overflow-scrolling: touch) {
	table.gamefield textarea.comments {
	 width: 57px;
	 padding: 2px 0px 5px 3px;
	}
}

h1 {
 font-size: 50px;
 text-shadow: 2px 2px 5px var(--dark-gray);
}

h2 {
 font-size: 30px;
}

img.difficulty {
 margin: 0px 3px;
 transition: filter 0.2s linear;
 -webkit-filter: grayscale(0);
 filter: grayscale(0);
 margin-bottom: 20px;
}

img.gray {
 -webkit-filter: grayscale(1);
 filter: grayscale(1);
}

img.gray:hover, 
img.difficulty:hover {
 cursor: pointer;
}

svg.hangman {
 display: block;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 10px;
}

svg.hangman line {
 stroke: var(--black); 
 stroke-linecap: round;
}

svg.hangman line.gallows {
 stroke-width: 12px; 
}

svg.hangman line.body {
 stroke-width: 6px; 
}

#hangman_letters,
#lettersudoku_letters {
 font-size: 40px;
 font-weight: bold;
 letter-spacing: 25px;
 margin: 15px 0px 15px 25px;
}

#checkmate_moves,
#checkmate_color,
#tictactoe_player_symbol {
 font-weight: bold;
}

input[type=button] {
 padding: 10px 20px;
 font-size: 20px;
 font-weight: bold;
 font-family: Ubuntu;
 margin: 5px;
 background-color: var(--light-yellow);
 border: 3px solid var(--dark-yellow);
 color: var(--darkest-yellow);
 border-radius: 25px;
 cursor: pointer;
 box-shadow: 2px 2px 5px var(--dark-gray);
 transition: background-color 0.1s ease-in;
 -webkit-appearance: none;
 z-index: 2;
}

input[type=button]:hover {
 background-color: var(--yellow);
}

input[type=button]:active:hover {
 background-color: var(--dark-yellow);
}

input.previous-game,
input.next-game {
 position: absolute;
 top: 40px;
 margin: 0px;
 width: 175px;
}

input.next-game {
 right: 0px;
 border-top-right-radius: 0px;
 border-bottom-right-radius: 0px;
 border-right: none;
}

input.previous-game {
 left: 0px;
 border-top-left-radius: 0px;
 border-bottom-left-radius: 0px;
 border-left: none;
}

table.gamefield + input {
 margin-top: 20px;
}

.hidden {
 display: none;
}

textarea.bold {
 font-weight: bold;
}

textarea.red {
 color: var(--dark-red);
}

textarea.yellow {
 color: var(--dark-yellow);
}

textarea.green {
 color: var(--dark-green);
}

textarea.red-bg {
 color: var(--white);
 background-color: var(--dark-red) !important;
}

textarea.yellow-bg {
 color: var(--white);
 background-color: var(--dark-yellow) !important;
}

textarea.green-bg {
 color: var(--white);
 background-color: var(--dark-green) !important;
}

td.red {
 background-color: var(--light-red) !important;
}

td.yellow {
 background-color: var(--light-yellow) !important;
}

td.green {
 background-color: var(--light-green) !important;
}

span.hint {
 display: none;
 position: absolute;
 border: 1px solid var(--darkest-green);
 background-color: var(--dark-green);
 padding: 7px 10px;
 font-size: 17px;
 border-radius: 7px;
 margin-top: 51px;
 margin-left: 10px;
 opacity: 0.95;
 z-index: 2;
 box-shadow: 2px 2px 5px var(--dark-gray);
}

td.black {
 cursor: help;
}

td.black:hover span.hint {
 cursor: help;
 display: block;
}

th.vertical {
 writing-mode: vertical-rl; 
 transform: rotate(180deg);
}

div.table {
 width: calc((2.25 * 35px + 2 * 5px) * 7);
 height: 600px;
 margin-left: auto;
 margin-right: auto;
 display: inline-block;
}

div.column,
div.card,
div.stock,
div.pile {
 width: calc(2.25 * 35px);
 height: calc(3.5 * 35px);
 overflow: hidden;
 border-radius: 12px;
 -webkit-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

div.column,
div.stock,
div.pile {
 margin: 5px;
 background-color: var(--light-yellow);
 color: var(--yellow);
 font-size: 35px;
 line-height: 2em;
 cursor: pointer;
}

div.stock {
 float: left;
}

div.column,
div.pile {
 float: right;
}

div.card {
 border: 1px solid var(--black);
 background-color: var(--white);
 position: absolute;
 box-shadow: 1px 1px 1px var(--black);
 cursor: pointer;
 font-size: 30px;
 font-weight: bold;
 text-align: center;
 line-height: 1.7em;
 transition: left .2s ease, top .2s ease;
}

div.card:not(.backside):not(.selected):hover {
 background-color: var(--light-gray);
}

div.card.selected {
 background-color: var(--gray);
}

div.card span {
 font-size: 70px;
}

div.backside {
 background: radial-gradient(transparent 79%, var(--white) 80%);
 background-size: 0.88em 1.03em;
 background-color: var(--darkest-yellow);
 opacity: 1
}

div.red {
 color: var(--dark-red);
}

div.black {
 color: var(--black);
}

object.risk-board {
 width: 100%;
 min-height: 200px;
 max-height: calc(100vh - 350px);
 object-fit: contain;
 display: block;
 margin-left: auto;
 margin-right: auto;
}

@font-face {
 font-family: 'Ubuntu';
 font-style: normal;
 font-weight: 300;
 src: local(''), url('fonts/ubuntu-v15-latin-300.woff2') format('woff2');
 font-display: swap;
}

@font-face {
 font-family: 'Ubuntu';
 font-style: italic;
 font-weight: 300;
 src: local(''), url('fonts/ubuntu-v15-latin-300italic.woff2') format('woff2');
 font-display: swap;
}

@font-face {
 font-family: 'Ubuntu';
 font-style: normal;
 font-weight: 400;
 src: local(''), url('fonts/ubuntu-v15-latin-regular.woff2') format('woff2');
 font-display: swap;
}

@font-face {
 font-family: 'Ubuntu';
 font-style: italic;
 font-weight: 400;
 src: local(''), url('fonts/ubuntu-v15-latin-italic.woff2') format('woff2');
 font-display: swap;
}

@font-face {
 font-family: 'Ubuntu';
 font-style: normal;
 font-weight: 500;
 src: local(''), url('fonts/ubuntu-v15-latin-500.woff2') format('woff2');
 font-display: swap;
}

@font-face {
 font-family: 'Ubuntu';
 font-style: italic;
 font-weight: 500;
 src: local(''), url('fonts/ubuntu-v15-latin-500italic.woff2') format('woff2');
 font-display: swap;
}

@font-face {
 font-family: 'Ubuntu';
 font-style: normal;
 font-weight: 700;
 src: local(''), url('fonts/ubuntu-v15-latin-700.woff2') format('woff2');
 font-display: swap;
}

@font-face {
 font-family: 'Ubuntu';
 font-style: italic;
 font-weight: 700;
 src: local(''), url('fonts/ubuntu-v15-latin-700italic.woff2') format('woff2');
 font-display: swap;
}

@font-face {
 font-family: 'Ubuntu Mono';
 font-style: normal;
 font-weight: 400;
 src: local(''), url('fonts/ubuntu-mono-v10-latin-regular.woff2') format('woff2');
 font-display: swap;
}

@font-face {
 font-family: 'Ubuntu Mono';
 font-style: italic;
 font-weight: 400;
 src: local(''), url('fonts/ubuntu-mono-v10-latin-italic.woff2') format('woff2');
 font-display: swap;
}

@font-face {
 font-family: 'Ubuntu Mono';
 font-style: normal;
 font-weight: 700;
 src: local(''), url('fonts/ubuntu-mono-v10-latin-700.woff2') format('woff2');
 font-display: swap;
}

@font-face {
 font-family: 'Ubuntu Mono';
 font-style: italic;
 font-weight: 700;
 src: local(''), url('fonts/ubuntu-mono-v10-latin-700italic.woff2') format('woff2');
 font-display: swap;
}

@keyframes fade-red {
	from {
	 color: var(--white);
	}
	
	to {
	 color: var(--dark-red);
	}
}

@media screen and (max-width: 767px) {
	body {
	 margin-top: 40px;
	}
	
	h1 {
	 font-size: 45px;
	 margin-bottom: 15px;
	}
	
	div.overlay {
	 top: 20%;
	 left: calc(10% - (2 * 25px + 2 * 2px ) / 2);
	 width: 80%;
	 font-size: 15px;
	}
	
	table.battleship td.transparent,
	table.checkmate td.transparent,
	div.corner_value {
	 font-size: 9px;
	}
	
	div.corner_value {
	 padding: 1px 2px;
	}
	
	table.session_list tr th:last-child {
	 width: 50px;
	}
	
	table.battleship td.transparent,
	table.checkmate td.transparent {
	 padding: 1px 3px;
	}
	
	img.difficulty {
	 height: 50px;
	}
	
	svg.hangman {
	 width: 40%;
	 height: 40%;
	}
	
	/*table.gamefield td,
	table.mastermind td {
	 border-width: 1px;
	}*/
	
	table.gamefield textarea,
	table.minesweep td,
	table.mastermind td,
	table.tenttree td,
	table.queens td,
	table.hangman td,
	table.filippine td,
	table.nonogram td,
	table.matrix td,
	table.checkmate td,
	table.dominosa td,
	table.battleship td,
	table.logikwis td,
	table.gamefield td.black {
	 width: 20px;
	 height: 20px;
	 font-size: 16px;
	}
	
	table.tictactoe td {
	 width: 75px;
	 height: 75px;
	 font-size: 48px;
	}
	
	table.dominosa td {
	 width: 15px;
	 height: 15px;
	}
	
	table.dominosa tr:nth-child(even) td {
	 height: 1px;
	}

	table.dominosa td:nth-child(even) {
	 width: 1px;
	}
	
	table.dominosa td.selected.left,
	table.dominosa td.hover.left {
	 border-top-left-radius: 7px;
	 border-bottom-left-radius: 7px;
	}

	table.dominosa td.selected.right,
	table.dominosa td.hover.right {
	 border-top-right-radius: 7px;
	 border-bottom-right-radius: 7px;
	}

	table.dominosa td.selected.top,
	table.dominosa td.hover.top {
	 border-top-left-radius: 7px;
	 border-top-right-radius: 7px;
	}

	table.dominosa td.selected.bottom,
	table.dominosa td.hover.bottom {
	 border-bottom-left-radius: 7px;
	 border-bottom-right-radius: 7px;
	}
	
	table.matrix td {
	 font-size: 14px;
	}
	
	table.highscores {
	 font-size: 14px;
	}
	
	table.highscores td,
	table.highscores th {
	 padding-left: 0px;
	 padding-right: 5px;
	}
	
	#nonogram td.row_hints,
	#nonogram td.column_hints {
	 font-size: 13px;
	 letter-spacing: 1px;
	}
	
	#nonogram td.row_hints {
	 height: 31px; /* ios fix */
	 width: 35px;
	}

	#nonogram td.column_hints {
	 height: 49px;
	}
	
	table.gamefield textarea {
	 line-height: 19px;
	}

	table.gamefield textarea.comments {
	 width: 26px;
	 height: 26px;
	 font-size: 10px;
	 padding: 2px 0px 2px 4px;
	 letter-spacing: 3px;
	 line-height: 8.5px;
	}
	
	input[type=button] {
	 font-size: 16px;
	 padding: 8px 13px;
	}
	
	input.previous-game,
	input.next-game {
	 top: 18px;
	 width: 150px;
	}
	
	span.hint {
	 margin-top: 26px;
	 margin-left: 5px;
	 font-size: 13px;
	}

	#lettersudoku,
	#sudoku {
	 border: 2px solid var(--black);
	}
	
	#nonogram table td,
	#lettersudoku table td,
	#sudoku table td {
	 border: 1px solid var(--black);
	}
	
	#hangman_letters,
	#lettersudoku_letters {
	 font-size: 19px;
	}
	
	div.table {
	 width: calc((2.25 * 20px + 2 * 3px) * 7);
	 height: 500px;
	}
	
	div.memory_card {
	 width: 35px;
	 height: 35px;
	 margin-left: 5px;
	 margin-bottom: 5px;
	 font-size: 28px;
	 line-height: 35px;
	 padding: 5px;
	 background: repeating-linear-gradient(45deg, var(--light-turkoise), var(--light-turkoise) 10px, var(--darkest-turkoise) 10px, var(--darkest-turkoise) 14px);
	}
	
	div.column,
	div.card,
	div.stock,
	div.pile {
	 width: calc(2.25 * 20px);
	 height: calc(3.5 * 20px);
	}
	
	div.column,
	div.stock,
	div.pile {
	 margin: 3px;
	 font-size: 20px;
	}
	
	div.card {
	 font-size: 18px;
	}
	
	div.card span {
	 font-size: 35px;
	}
}