/*main stuff*/

:root {
	--background: #000000;
	--text: #C5AAF5;
	--accent: #8A2BE2;
}

body {
	background-color: var(--background);
	color: var(--text);
	font-family:"courier new", monospace;
	margin:0px;
}

a:link, a:visited, a:hover {
	color: var(--accent);
	text-decoration:none;
}

button, input, select {
    background-color: var(--text);
    border: 1px solid var(--accent);
}

/* splash screen */

.splash {
	text-align:center;
	margin-top:100px;
}

/* header */

header {
	/* var accent --> black */
	background: -webkit-linear-gradient(rgba(138, 43, 226, 1)10%, rgba(0, 0, 0, 1)90%, rgba(0, 0, 0, 0));
	background: -o-linear-gradient(rgba(138, 43, 226, 1)10%, rgba(0, 0, 0, 1)90%, rgba(0, 0, 0, 0));
	background: -moz-linear-gradient(rgba(138, 43, 226, 1)10%, rgba(0, 0, 0, 1)90%, rgba(0, 0, 0, 0));
	background: linear-gradient(rgba(138, 43, 226, 1)10%, rgba(0, 0, 0, 1)90%, rgba(0, 0, 0, 0));
	width:100%;
	height:100px;
	margin:0px;
	padding-top:30px;
	padding-left:20px;
	z-index:1;
	position:fixed;
	top:0px;
}

.home {
	color: var(--accent);
	width:100px;
	border:0px;
	text-align:center;
	padding-top:10px;
	padding-bottom:10px;
	font-weight:bold;
	font-family:"courier new", monospace;
	cursor:pointer;
	font-size: large;
  border-radius:10px;
}

/* main */

main {
	margin:140px 20px 20px 20px;
}

hr {
	border:0px;
	height:1px;
	background-color: var(--text);
	background: -webkit-linear-gradient(left, var(--background), var(--accent), var(--text), var(--accent), var(--background));
	background: -o-linear-gradient(right, var(--background), var(--accent), var(--text), var(--accent), var(--background));
	background: -moz-linear-gradient(right, var(--background), var(--accent), var(--text), var(--accent), var(--background));
	background: linear-gradient(to right, var(--background), var(--accent), var(--text), var(--accent), var(--background));
}

table, td, th {
  margin-left:auto;
  margin-right:auto;
	border: 1px solid var(--accent);
	border-collapse: collapse;
	text-align: left;
}

td, th {
	padding: 5px;
}

/*style tweak classes*/

.outline {
	border:1px solid var(--text);
}

.center {
	text-align:center;
}

/* make images responsive */

img {
	border:0px;
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

/* games */

#results, .code {
	text-align:left;
	color: var(--background);
	background-color: var(--text);
	border: 1px solid var(--accent);
	width:80%;
	padding:10px;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	margin-bottom:10px
}

.start, .table, .bank, .kitchen, .passw, .dogs {
  cursor: pointer;
  color: var(--accent);
}