From b8c91f08adc7bdb0095fb61a59bc03f0d568f478 Mon Sep 17 00:00:00 2001
From: Kyle Gunger <kgunger12@gmail.com>
Date: Sat, 16 Oct 2021 17:12:32 -0400
Subject: [Formatting] Tabs instead of spaces

---
 styles/client/base.css    | 298 +++++++++++++++++++++++-----------------------
 styles/client/card.css    | 164 ++++++++++++-------------
 styles/client/desktop.css | 294 ++++++++++++++++++++++-----------------------
 styles/client/mobile.css  | 166 +++++++++++++-------------
 styles/client/tablet.css  |  86 ++++++-------
 5 files changed, 504 insertions(+), 504 deletions(-)

(limited to 'styles/client')

diff --git a/styles/client/base.css b/styles/client/base.css
index a0178fd..60631ce 100644
--- a/styles/client/base.css
+++ b/styles/client/base.css
@@ -1,348 +1,348 @@
 * {
-    font-family: 'Montserrat', sans-serif;
+	font-family: 'Montserrat', sans-serif;
 	transition-duration: 0.2s;
 }
 
 html, body {
-    margin: 0;
-    padding: 0;
+	margin: 0;
+	padding: 0;
 
-    min-width: 100vw;
-    min-height: 100vh;
+	min-width: 100vw;
+	min-height: 100vh;
 
-    display: block;
+	display: block;
 
-    background-color: var(--main-bg);
-    color: var(--main-color);
+	background-color: var(--main-bg);
+	color: var(--main-color);
 
-    overflow: hidden;
+	overflow: hidden;
 }
 
 /*    Topbar rules    */
 
 .topbar
 {
-    position: fixed;
+	position: fixed;
 
-    background-color: var(--gui-bg-main);
+	background-color: var(--gui-bg-main);
 
-    top: 0;
-    left: 0;
+	top: 0;
+	left: 0;
 
-    display: flex;
+	display: flex;
 
-    flex-direction: column;
+	flex-direction: column;
 
-    width: 100vw;
-    z-index: 1;
+	width: 100vw;
+	z-index: 1;
 }
 
 .top-buttons
 {
-    display: flex;
+	display: flex;
 }
 
 button.top-button
 {
-    border-radius: 0;
-    background-color: var(--top-bg-button);
-    color: var(--top-color-button);
-    flex: 1;
+	border-radius: 0;
+	background-color: var(--top-bg-button);
+	color: var(--top-color-button);
+	flex: 1;
 
-    border-left: 1px solid var(--top-border);
-    border-right: 1px solid var(--top-border);
+	border-left: 1px solid var(--top-border);
+	border-right: 1px solid var(--top-border);
 
-    transition-duration: 0.2s;
+	transition-duration: 0.2s;
 }
 
 button.top-button:hover {
-    background-color: var(--top-bg-button-hover);
-    color: var(--top-color-button-hover);
+	background-color: var(--top-bg-button-hover);
+	color: var(--top-color-button-hover);
 }
 
 button.top-button:active {
-    background-color: var(--top-bg-button-active);
-    color: var(--top-color-button-active);
+	background-color: var(--top-bg-button-active);
+	color: var(--top-color-button-active);
 }
 
 .top-buttons > button:first-child
 {
-    border-left: none;
+	border-left: none;
 }
 
 .top-buttons > button:last-child
 {
-    border-right: none;
+	border-right: none;
 }
 
 div.new-game
 {
-    flex: 1;
-    flex-grow: 1;
-    border-top: 2px solid var(--top-border);
+	flex: 1;
+	flex-grow: 1;
+	border-top: 2px solid var(--top-border);
 }
 
 div.mobile-settings
 {
-    flex: 1;
-    flex-grow: 1;
-    border-top: 2px solid var(--top-border);
+	flex: 1;
+	flex-grow: 1;
+	border-top: 2px solid var(--top-border);
 }
 
 div.topbar > div.status
 {
-    height: 5px;
-    flex-basis: auto;
+	height: 5px;
+	flex-basis: auto;
 
-    background-color: var(--server-bg-loading);
+	background-color: var(--server-bg-loading);
 }
 
 div.topbar > div.status[s=loading] {
-    background-color: var(--server-bg-loading);
+	background-color: var(--server-bg-loading);
 }
 
 div.topbar > div.status[s=ok] {
-    background-color: var(--server-bg-ok);
+	background-color: var(--server-bg-ok);
 }
 
 div.topbar > div.status[s=closed] {
-    background-color: var(--server-bg-closed);
+	background-color: var(--server-bg-closed);
 }
 
 /*    Content rules    */
 
 div.stats
 {
-    padding: 5px;
-    display: flex;
-    flex-direction: column;
+	padding: 5px;
+	display: flex;
+	flex-direction: column;
 }
 
 div.stats > div
 {
-    flex: 1;
-    display: flex;
+	flex: 1;
+	display: flex;
 }
 
 div.stats > div > span
 {
-    flex-basis: content;
-    display: inline-block;
+	flex-basis: content;
+	display: inline-block;
 }
 
 div.stats > div > span:last-child {
-    text-align: right;
-    flex: 1;
-    display: inline-block;
+	text-align: right;
+	flex: 1;
+	display: inline-block;
 }
 
 div.game {
-    background-color: var(--gui-bg-game);
-    color: var(--gui-color-game);
-    border-radius: 5px;
-    box-shadow: var(--gui-shadow-game) 3px 3px 2px;
-    box-sizing: border-box;
-    margin-bottom: 10px;
-    padding: 5px;
+	background-color: var(--gui-bg-game);
+	color: var(--gui-color-game);
+	border-radius: 5px;
+	box-shadow: var(--gui-shadow-game) 3px 3px 2px;
+	box-sizing: border-box;
+	margin-bottom: 10px;
+	padding: 5px;
 
-    display: block;
-    position: relative;
+	display: block;
+	position: relative;
 
-    text-align: left;
+	text-align: left;
 }
 
 div.game:last-child {
-    margin-bottom: none;
+	margin-bottom: none;
 }
 
 div.settings {
-    display:flex;
-    flex-direction: column;
-    padding: 5px;
-    overflow-y: auto;
+	display:flex;
+	flex-direction: column;
+	padding: 5px;
+	overflow-y: auto;
 }
 
 /*    Table rules    */
 
 .table {
-    position: absolute;
-    z-index: 2;
-    width: 100vw;
-    height: 100vh;
+	position: absolute;
+	z-index: 2;
+	width: 100vw;
+	height: 100vh;
 
-    animation-duration: 0.8s;
+	animation-duration: 0.8s;
 
-    background-color: var(--table-bg);
+	background-color: var(--table-bg);
 
-    overflow: hidden;
+	overflow: hidden;
 }
 
 .table[state=open] ,.table[state=close]{
-    animation-name: slide-in;
-    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
-    animation-iteration-count: 1;
-    animation-direction: normal;
-    animation-fill-mode: forwards;
+	animation-name: slide-in;
+	animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
+	animation-iteration-count: 1;
+	animation-direction: normal;
+	animation-fill-mode: forwards;
 }
 
 .table[state=close] {
-    animation-direction: reverse;
+	animation-direction: reverse;
 }
 
 .table[state=closed] {
-    transform: translate(0, -100vh);
-    opacity: 0;
+	transform: translate(0, -100vh);
+	opacity: 0;
 }
 
 @keyframes slide-in {
-    from {
-        transform: translate(0, -100vh);
-        opacity: 0;
-    }
+	from {
+		transform: translate(0, -100vh);
+		opacity: 0;
+	}
 
-    to {
-        transform: translate(0, 0);
-        opacity: 1;
-    }
+	to {
+		transform: translate(0, 0);
+		opacity: 1;
+	}
 }
 
 /*    Chat    */
 
 div.chat {
-    border-top-left-radius: 10px;
-    background-color: var(--chat-bg);
-    color: var(--chat-color);
+	border-top-left-radius: 10px;
+	background-color: var(--chat-bg);
+	color: var(--chat-color);
 
-    width: 50vw;
-    height: 50vh;
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    right: -50vw;
+	width: 50vw;
+	height: 50vh;
+	display: flex;
+	flex-direction: column;
+	position: absolute;
+	right: -50vw;
 
-    box-sizing: border-box;
+	box-sizing: border-box;
 
-    top: 50vh;
+	top: 50vh;
 
-    transition-duration: 0.2s;
+	transition-duration: 0.2s;
 
-    padding: 5px;
+	padding: 5px;
 
-    z-index: 4;
+	z-index: 4;
 }
 
 div.chat[show=true] {
-    right: 0;
+	right: 0;
 }
 
 button.toggle-chat {
-    position: absolute;
-    bottom: 5px;
-    left: -5px;
-    transform-origin: bottom left;
-    transform: rotate(-90deg);
+	position: absolute;
+	bottom: 5px;
+	left: -5px;
+	transform-origin: bottom left;
+	transform: rotate(-90deg);
 }
 
 div.chat > div {
-    box-sizing: border-box;
-    margin: 5px;
+	box-sizing: border-box;
+	margin: 5px;
 }
 
 div.chat-select, div.chat-input {
-    flex-basis: content;
-    display: flex;
+	flex-basis: content;
+	display: flex;
 }
 
 div.chat-text {
-    flex: 1;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding: 5px;
-    background-color: var(--chat-bg-text);
-    border-radius: 10px;
-    border: 5px solid rgba(0, 0, 0, 0);
+	flex: 1;
+	overflow-y: auto;
+	overflow-x: hidden;
+	padding: 5px;
+	background-color: var(--chat-bg-text);
+	border-radius: 10px;
+	border: 5px solid rgba(0, 0, 0, 0);
 }
 
 div.chat-select > button {
-    flex: 1;
+	flex: 1;
 
-    margin-right: 2px;
-    margin-left: 2px;
+	margin-right: 2px;
+	margin-left: 2px;
 }
 
 div.chat-select > button[active="false"] {
-    background-color: var(--chat-bg-inactive);
+	background-color: var(--chat-bg-inactive);
 }
 
 div.chat-select > button[active="false"]:hover {
-    background-color: var(--chat-bg-inactive-hover);
+	background-color: var(--chat-bg-inactive-hover);
 }
 
 div.chat-select > button[active="false"]:active {
-    background-color: var(--chat-bg-inactive-active);
+	background-color: var(--chat-bg-inactive-active);
 }
 
 div.chat-select > button[active="true"] {
-    background-color: var(--chat-bg-active);
+	background-color: var(--chat-bg-active);
 }
 
 div.chat-select > button[active="true"]:hover {
-    background-color: var(--chat-bg-active-hover);
+	background-color: var(--chat-bg-active-hover);
 }
 
 div.chat-select > button[active="true"]:active {
-    background-color: var(--chat-bg-active-active);
+	background-color: var(--chat-bg-active-active);
 }
 
 div.chat-select > button:first-child {
-    margin-left: 0;
+	margin-left: 0;
 }
 
 div.chat-select > button:last-child {
-    margin-right: 0;
+	margin-right: 0;
 }
 
 div.chat-input > input {
-    flex: 5;
+	flex: 5;
 
-    margin: 0;
-    margin-right: 5px;
+	margin: 0;
+	margin-right: 5px;
 
-    border-radius: 5px;
+	border-radius: 5px;
 
-    transition-duration: 0.2s;
-    border: none;
+	transition-duration: 0.2s;
+	border: none;
 
-    background-color: var(--chat-bg-input);
+	background-color: var(--chat-bg-input);
 }
 
 div.chat-input > input:hover {
-    background-color: var(--chat-bg-input-hover);
+	background-color: var(--chat-bg-input-hover);
 }
 
 div.chat-input > input:focus {
-    background-color: var(--chat-bg-input-active);
+	background-color: var(--chat-bg-input-active);
 }
 
 div.chat-input > button {
-    flex: 1;
+	flex: 1;
 }
 
 div.chat-text > div {
-    word-wrap: break-word;
-    word-break: break-all;
+	word-wrap: break-word;
+	word-break: break-all;
 }
 
 /*   Game card element   */
 
 div.game > h2 {
-    margin: 0;
+	margin: 0;
 }
 
 button.join {
-    position: absolute;
+	position: absolute;
 
-    bottom: 5px;
-    right: 5px;
+	bottom: 5px;
+	right: 5px;
 }
 
diff --git a/styles/client/card.css b/styles/client/card.css
index 0ee8f6a..b19b17a 100644
--- a/styles/client/card.css
+++ b/styles/client/card.css
@@ -1,192 +1,192 @@
 card
 {
-    position: absolute;
-    display: block;
-    width: 150px;
-    height: 230px;
-    background-color: var(--card-bg);
-    color: var(--card-color);
-    border: 2px solid var(--card-border);
-    border-radius: 10px;
-    transition-duration: 0.2s;
-    cursor: pointer;
-    flex-direction: column;
-    overflow: hidden;
-    user-select: none;
-    box-sizing: border-box;
-
-    z-index: 3;
+	position: absolute;
+	display: block;
+	width: 150px;
+	height: 230px;
+	background-color: var(--card-bg);
+	color: var(--card-color);
+	border: 2px solid var(--card-border);
+	border-radius: 10px;
+	transition-duration: 0.2s;
+	cursor: pointer;
+	flex-direction: column;
+	overflow: hidden;
+	user-select: none;
+	box-sizing: border-box;
+
+	z-index: 3;
 }
 
 card:hover
 {
-    box-shadow: 0 0 10px var(--card-hover);
+	box-shadow: 0 0 10px var(--card-hover);
 
-    z-index: 4;
+	z-index: 4;
 }
 
 card > * {
-    pointer-events: none;
+	pointer-events: none;
 }
 
 carea
 {
-    padding-left: 2px;
-    padding-right: 2px;
-    position: absolute;
-    display: flex;
-    vertical-align: middle;
-    width: 100%;
-    box-sizing: border-box;
+	padding-left: 2px;
+	padding-right: 2px;
+	position: absolute;
+	display: flex;
+	vertical-align: middle;
+	width: 100%;
+	box-sizing: border-box;
 }
 
 carea.top, carea.topl, carea.topr
 {
-    top: 0;
-    height: 8%;
-    text-align: center;
+	top: 0;
+	height: 8%;
+	text-align: center;
 }
 
 carea.topl
 {
-    width: 50%;
-    text-align: left;
+	width: 50%;
+	text-align: left;
 }
 
 carea.topr
 {
-    right: 0;
-    width: 50%;
-    text-align: right;
+	right: 0;
+	width: 50%;
+	text-align: right;
 }
 
 carea.mid
 {
-    top: 8%;
-    height: 84%;
+	top: 8%;
+	height: 84%;
 }
 
 carea.midt
 {
-    top: 8%;
-    height: 42%;
+	top: 8%;
+	height: 42%;
 }
 
 carea.midb
 {
     
-    top: 50%;
-    height: 42%;
+	top: 50%;
+	height: 42%;
 }
 
 carea.bot, carea.botl, carea.botr
 {
-    bottom: 0;
-    height: 8%;
-    text-align: center;
+	bottom: 0;
+	height: 8%;
+	text-align: center;
 }
 
 carea.botl
 {
-    width: 50%;
-    text-align: left;
+	width: 50%;
+	text-align: left;
 }
 
 carea.botr
 {
-    right: 0;
-    width: 50%;
-    text-align: right;
+	right: 0;
+	width: 50%;
+	text-align: right;
 }
 
 carea.all
 {
-    top: 0;
-    height: 100%;
+	top: 0;
+	height: 100%;
 }
 
 ctext
 {
-    display: inline-block;
-    flex: 1;
-    font-size: small;
-    height: auto;
+	display: inline-block;
+	flex: 1;
+	font-size: small;
+	height: auto;
 }
 
 cimage
 {
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: contain;
-    flex: 1;
+	background-position: center center;
+	background-repeat: no-repeat;
+	background-size: contain;
+	flex: 1;
 }
 
 card[drag=true]
 {
-    z-index: 3;
+	z-index: 3;
 }
 
 /*  Deck  */
 
 deck {
-    --ccount: 0;
+	--ccount: 0;
 
-    position: absolute;
-    width: 166px;
-    height: 250px;
+	position: absolute;
+	width: 166px;
+	height: 250px;
 
-    top: calc(var(--y) * (100vh - 250px));
-    left: calc(var(--x) * (100vw - 166px));
+	top: calc(var(--y) * (100vh - 250px));
+	left: calc(var(--x) * (100vw - 166px));
 
-    overflow: visible;
+	overflow: visible;
 
-    border-radius: 10px;
+	border-radius: 10px;
 
-    transition-duration: 0.2s;
+	transition-duration: 0.2s;
 
-    border: 3px solid var(--deck-shadow);
-    box-sizing: border-box;
+	border: 3px solid var(--deck-shadow);
+	box-sizing: border-box;
 }
 
 deck:hover {
-    border: 3px solid var(--deck-hover);
+	border: 3px solid var(--deck-hover);
 }
 
 /* Deck modes */
 
 deck[mode="stack"] > card {
-    transform: translate(5px, calc(var(--cpos) * 3px + 7px));
+	transform: translate(5px, calc(var(--cpos) * 3px + 7px));
 }
 
 deck[mode="stack"] {
-    height: calc(var(--ccount) * 3px + 250px);
-    top: calc(var(--y) * (100vh - (var(--ccount) * 3px + 250px)));
+	height: calc(var(--ccount) * 3px + 250px);
+	top: calc(var(--y) * (100vh - (var(--ccount) * 3px + 250px)));
 }
 
 
 deck[mode="strip-hl"] > card {
-    transform: translate(calc(var(--ccount) * 75px + var(--cpos) * -75px + 5px), 7px);
+	transform: translate(calc(var(--ccount) * 75px + var(--cpos) * -75px + 5px), 7px);
 }
 
 deck[mode="strip-hr"] > card {
-    transform: translate(calc(var(--cpos) * 75px + 5px), 7px);
+	transform: translate(calc(var(--cpos) * 75px + 5px), 7px);
 }
 
 deck[mode="strip-hl"], deck[mode="strip-hr"] {
-    width: calc(var(--ccount) * 75px + 160px);
-    left: calc(var(--x) * (100vw - (var(--ccount) * 75px + 160px)));
+	width: calc(var(--ccount) * 75px + 160px);
+	left: calc(var(--x) * (100vw - (var(--ccount) * 75px + 160px)));
 }
 
 
 deck[mode="strip-vu"] > card {
-    transform: translate(5px, calc(var(--ccount) * 115px + var(--cpos) * -115px + 7px));
+	transform: translate(5px, calc(var(--ccount) * 115px + var(--cpos) * -115px + 7px));
 }
 
 deck[mode="strip-vd"] > card {
-    transform: translate(5px, calc(var(--cpos) * 115px + 7px));
+	transform: translate(5px, calc(var(--cpos) * 115px + 7px));
 }
 
 deck[mode="strip-vu"], deck[mode="strip-vd"] {
-    height: calc(var(--ccount) * 115px + 240px);
-    top: calc(var(--y) * (100vh - (var(--ccount) * 115px + 240px)));
+	height: calc(var(--ccount) * 115px + 240px);
+	top: calc(var(--y) * (100vh - (var(--ccount) * 115px + 240px)));
 }
diff --git a/styles/client/desktop.css b/styles/client/desktop.css
index 10caa15..410b516 100644
--- a/styles/client/desktop.css
+++ b/styles/client/desktop.css
@@ -1,149 +1,149 @@
 @media (min-width: 600px) and (min-height: 501px) {
-    body {
-        display: flex;
-    
-        align-items: center;
-        justify-content: center;
-    }
-
-    /*
-        TopBar rules
-    */
-
-    button#newgame:before{
-        content: "Create Game";
-    }
-
-    button#settings {
-        display: none;
-    }
-
-    button#reset:before{
-        content: "Reset Connection";
-    }
-
-    /*
-        Lobby rules
-    */
-    div.lobby {
-        min-width: 70vw;
-        min-height: 70vh;
-        max-height: 70vh;
-    
-        display: flex;
-        text-align: center;
-        flex-direction: column;
-    
-        align-items: center;
-    }
-
-    div.server {
-        width: 100%;
-        display: flex;
-        flex-direction: row;
-        margin-bottom: 10px;
-        box-sizing: border-box;
-    }
-
-    span.status {
-        box-sizing: border-box;
-        font-size: larger;
-
-        margin-right: 10px;
-        padding: 10px;
-        border-radius: 10px;
-        flex-basis: content;
-
-        background-color: var(--server-bg-loading);
-        color: var(--server-color-loading);
-    }
-
-    span.status[s=loading] {
-        background-color: var(--server-bg-loading);
-        color: var(--server-color-loading);
-    }
-    
-    span.status[s=ok] {
-        background-color: var(--server-bg-ok);
-        color: var(--server-color-ok);
-    }
-    
-    span.status[s=closed] {
-        background-color: var(--server-bg-closed);
-        color: var(--server-color-closed);
-    }
-
-    span.addr {
-        font-size: larger;
-        padding: 10px;
-        border-radius: 10px;
-
-        background-color: var(--gui-bg-main);
-
-        flex: 1;
-    }
-
-    div.content {
-        min-width: 70vw;
-        min-height: 70vh;
-    
-        display: flex;
-        flex-direction: row;
-
-        box-sizing: border-box;
-    }
-
-    div.info {
-        display: flex;
-        text-align: center;
-        flex-direction: column;
-
-        flex: 1;
-
-        margin-left: 10px;
-
-        box-sizing: border-box;
-    }
-
-    div.games {
-        box-sizing: border-box;
-        overflow-y: auto;
-        overflow-x: hidden;
-        padding: 10px;
-        border-radius: 10px;
-        background-color: var(--gui-bg-main);
-        flex: 2;
-
-        border: 5px solid var(--gui-bg-main);
-    }
-
-    div.stats, div.settings {
-        border-radius: 10px;
-        background-color: var(--gui-bg-main);
-
-        box-sizing: border-box;
-
-        flex: 1;
-
-        height: auto;
-        width: 100%;
-
-        text-align: left;
-    }
-
-    div.settings {
-        margin-top: 10px;
-    }
-
-    div.game {
-        height: 20%;
-    }
-
-    /*
-        Table rules
-    */
-
-    /*
-        Chat
-    */
+	body {
+		display: flex;
+
+		align-items: center;
+		justify-content: center;
+	}
+
+	/*
+		TopBar rules
+	*/
+
+	button#newgame:before{
+		content: "Create Game";
+	}
+
+	button#settings {
+		display: none;
+	}
+
+	button#reset:before{
+		content: "Reset Connection";
+	}
+
+	/*
+		Lobby rules
+	*/
+	div.lobby {
+		min-width: 70vw;
+		min-height: 70vh;
+		max-height: 70vh;
+
+		display: flex;
+		text-align: center;
+		flex-direction: column;
+
+		align-items: center;
+	}
+
+	div.server {
+		width: 100%;
+		display: flex;
+		flex-direction: row;
+		margin-bottom: 10px;
+		box-sizing: border-box;
+	}
+
+	span.status {
+		box-sizing: border-box;
+		font-size: larger;
+
+		margin-right: 10px;
+		padding: 10px;
+		border-radius: 10px;
+		flex-basis: content;
+
+		background-color: var(--server-bg-loading);
+		color: var(--server-color-loading);
+	}
+
+	span.status[s=loading] {
+		background-color: var(--server-bg-loading);
+		color: var(--server-color-loading);
+	}
+
+	span.status[s=ok] {
+		background-color: var(--server-bg-ok);
+		color: var(--server-color-ok);
+	}
+
+	span.status[s=closed] {
+		background-color: var(--server-bg-closed);
+		color: var(--server-color-closed);
+	}
+
+	span.addr {
+		font-size: larger;
+		padding: 10px;
+		border-radius: 10px;
+
+		background-color: var(--gui-bg-main);
+
+		flex: 1;
+	}
+
+	div.content {
+		min-width: 70vw;
+		min-height: 70vh;
+
+		display: flex;
+		flex-direction: row;
+
+		box-sizing: border-box;
+	}
+
+	div.info {
+		display: flex;
+		text-align: center;
+		flex-direction: column;
+
+		flex: 1;
+
+		margin-left: 10px;
+
+		box-sizing: border-box;
+	}
+
+	div.games {
+		box-sizing: border-box;
+		overflow-y: auto;
+		overflow-x: hidden;
+		padding: 10px;
+		border-radius: 10px;
+		background-color: var(--gui-bg-main);
+		flex: 2;
+
+		border: 5px solid var(--gui-bg-main);
+	}
+
+	div.stats, div.settings {
+		border-radius: 10px;
+		background-color: var(--gui-bg-main);
+
+		box-sizing: border-box;
+
+		flex: 1;
+
+		height: auto;
+		width: 100%;
+
+		text-align: left;
+	}
+
+	div.settings {
+		margin-top: 10px;
+	}
+
+	div.game {
+		height: 20%;
+	}
+
+	/*
+		Table rules
+	*/
+
+	/*
+		Chat
+	*/
 }
diff --git a/styles/client/mobile.css b/styles/client/mobile.css
index ed2e19d..70e17dd 100644
--- a/styles/client/mobile.css
+++ b/styles/client/mobile.css
@@ -1,85 +1,85 @@
 @media (max-width: 599px), (max-height: 500px) {
-    /*
-        Hide stuff
-    */
-    div.server {
-        display: none;
-    }
-
-    div.info {
-        display: none;
-    }
-
-    div.chat {
-        display: none;
-    }
-
-    /*
-        TopBar for mobile
-    */
-
-    div.topbar > div.status {
-        height: 10px;
-    }
-
-    div.top-buttons {
-        height: 50px;
-    }
-
-    button.top-button {
-        padding: 5px;
-    }
-
-    button#reset:before, button#newgame:before, button#settings:before {
-        font-family: "IcoFont";
-        font-size: xx-large;
-    }
-    
-    button#newgame:before{
-        content: "\efc2";
-    }
-
-    button#settings {
-        display: inline-block;
-    }
-
-    button#settings:before {
-        content: "\ef3a";
-    }
-
-    button#reset:before{
-        content: "\efd1";
-    }
-
-    /*
-        Mobile lobby
-    */
-
-    div.lobby {
-        display: flex;
-        flex-direction: column;
-        height: 100vh;
-    }
-
-    div.content {
-        margin-top: 60px;
-        box-sizing: border-box;
-        flex: 1;
-    }
-
-    div.games {
-        height: 100%;
-        width: 100%;
-        overflow-x: hidden;
-        overflow-y: auto;
-
-        background-color: var(--gui-bg-main);
-        padding: 5px;
-        box-sizing: border-box;
-
-    }
-
-    div.game {
-        height: 12.5%;
-    }
+	/*
+		Hide stuff
+	*/
+	div.server {
+		display: none;
+	}
+
+	div.info {
+		display: none;
+	}
+
+	div.chat {
+		display: none;
+	}
+
+	/*
+		TopBar for mobile
+	*/
+
+	div.topbar > div.status {
+		height: 10px;
+	}
+
+	div.top-buttons {
+		height: 50px;
+	}
+
+	button.top-button {
+		padding: 5px;
+	}
+
+	button#reset:before, button#newgame:before, button#settings:before {
+		font-family: "IcoFont";
+		font-size: xx-large;
+	}
+
+	button#newgame:before{
+		content: "\efc2";
+	}
+
+	button#settings {
+		display: inline-block;
+	}
+
+	button#settings:before {
+		content: "\ef3a";
+	}
+
+	button#reset:before{
+		content: "\efd1";
+	}
+
+	/*
+		Mobile lobby
+	*/
+
+	div.lobby {
+		display: flex;
+		flex-direction: column;
+		height: 100vh;
+	}
+
+	div.content {
+		margin-top: 60px;
+		box-sizing: border-box;
+		flex: 1;
+	}
+
+	div.games {
+		height: 100%;
+		width: 100%;
+		overflow-x: hidden;
+		overflow-y: auto;
+
+		background-color: var(--gui-bg-main);
+		padding: 5px;
+		box-sizing: border-box;
+
+	}
+
+	div.game {
+		height: 12.5%;
+	}
 }
diff --git a/styles/client/tablet.css b/styles/client/tablet.css
index b9b5bd1..a4f135d 100644
--- a/styles/client/tablet.css
+++ b/styles/client/tablet.css
@@ -1,45 +1,45 @@
 @media (min-width: 600px) and (orientation: portrait) {
-    body {
-        display: flex;
-    
-        align-items: center;
-        justify-content: center;
-    }
-
-    div.lobby {
-        max-width: 500px;
-    
-        display: flex;
-        text-align: center;
-        flex-direction: column;
-    
-        align-items: center;
-    }
-
-    div.content {
-        min-width: 70vw;
-        min-height: 70vh;
-    
-        display: flex;
-        flex-direction: column;
-    }
-
-    div.info {
-        flex-direction: row;
-        margin-left: 0px;
-        margin-top: 10px;
-    }
-
-    div.settings, div.stats {
-        width: auto;
-    }
-
-    div.settings {
-        margin-top: 0px;
-        margin-left: 10px;
-    }
-
-    div.games {
-        flex: 4;
-    }
+	body {
+		display: flex;
+
+		align-items: center;
+		justify-content: center;
+	}
+
+	div.lobby {
+		max-width: 500px;
+
+		display: flex;
+		text-align: center;
+		flex-direction: column;
+
+		align-items: center;
+	}
+
+	div.content {
+		min-width: 70vw;
+		min-height: 70vh;
+
+		display: flex;
+		flex-direction: column;
+	}
+
+	div.info {
+		flex-direction: row;
+		margin-left: 0px;
+		margin-top: 10px;
+	}
+
+	div.settings, div.stats {
+		width: auto;
+	}
+
+	div.settings {
+		margin-top: 0px;
+		margin-left: 10px;
+	}
+
+	div.games {
+		flex: 4;
+	}
 }
-- 
cgit v1.2.3