*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: inherit;
}

html { 
	font-size: 62.5%;
}

body {
	box-sizing: border-box;
	font-size: 1.6rem;
	background: #ccc;
}

.debug { border: 1px solid red; box-shadow: 0 0 10px 10px orange; }
.large-container { display: flex; justify-content: space-around; align-content: space-around; flex-wrap: wrap; height: 100vh; }

.signin { display: flex; flex-direction: column; justify-content: center; padding: 35px; height: 300px; width: 500px; text-align: center; background: #fff; font-family: monospace; }
.signin h1 { margin-bottom: 40px; }
.signin form { display: contents; }
.signin label { text-align: left; font-size: 10px; }
.signin input { margin-bottom: 12px; }
.signin button { font-family: monospace; padding: 5px; }
.signin .errorMsg { position: relative; height: 0; bottom: -10px; color: #f00; }

.round-edge { border: 2px solid black; border-radius: 5px; }
.box-shadow { box-shadow: 0 0 10px 2px; }
.footnote { position: absolute; bottom: 10px; right: 10px; font-family: monospace; font-size: 12px; }

.navHeader { position: absolute; width: 100vw; height: 50px; background: #000; box-shadow: 0 0 5px 1px; }
.navDiv { float: right; margin: 10px 5px; height: 30px; box-shadow: 0 0 2px 1px white; }
.navButton { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; color: #ccc; float: right; margin: 5px; border-radius: 5px; height: 40px; width: 40px; box-shadow: inset 0 0 10px; }
.navButton:hover { cursor: pointer; color: #fff; box-shadow: inset 0 0 10px 2px; }
.navButton.disabled { box-shadow: inset 0 0 10px 5px #999; cursor: wait!important; }

.main-container { font-family: monospace; font-size: 0.8em; }
.main-container table{ background: #000; }
.main-container th { padding: 5px; border: 1px solid #fff; color: #fff; min-width: 40px; }
.main-container tbody{ background: #fff; }
.main-container tbody td{ padding: 0 0.5em }

.main-container tbody td.userInput{ padding: 0 }
.main-container tbody td.userInput input{ padding: 0 0.5em; border: none; }

.tableButton { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; color: #000; float: right; margin: 1px; border-radius: 2px; height: 16px; width: 16px; box-shadow: inset 0 0 10px #ccc; }
.tableButton:hover { cursor: pointer; color: #f00; }
