
:root {
 --background-color: #8f3946;
 --text-color: #CBEDF6;
 --important-text-color: #F6AB65;
 --border-radius: .5rem;
 --border: 1px solid #231123;
 --text-shadow: 4px 1px 0px #39A9DB;
 --box-color: #58232B;
 --na-color: #58232B;
 --a-color: #99DBEA;
 --a-visit: #67CAE0;
 --a-hover: #39A9DB;
 --a-active: #39A9DB;
 --c1: #1F3370;
 --c2: ;
 --c3: ;
}

@font-face {
  font-family: myFont;
  src: url(/css/monof55.ttf);
}

body {
font-family: "myFont", monospace;
background-color: #2d212f;
background-image:  radial-gradient(circle farthest-side at 0% 50%, #2d212f 23.5%, transparent 0), radial-gradient(circle farthest-side at 0% 50%, #58232B 24%, transparent 0), linear-gradient(#2d212f 14%, transparent 0, transparent 85%, #2d212f 0), linear-gradient(150deg, #2d212f 24%, #58232B 0 26%, transparent 0 74%, #58232B 0 76%, #2d212f 0), linear-gradient(30deg, #2d212f 24%, #58232B 0 26%, transparent 0 74%, #58232B 0 76%, #2d212f 0), linear-gradient(90deg, #58232B 1.6%, #2d212f 0 98.4%, #58232B 0);
background-position: 16px 23px, 14px 23px, 0 0, 0 0, 0 0, 0 0;
background-size: 30px 45px;
color: var(--text-color);
}

ul {
  list-style-type: '  ·  ';
}

.footer, .maindiv, .nav {
padding: .5rem;
margin: 0 auto;
}

.bigdiv {
padding: .5rem;
margin: 0 auto;
width:35rem;
min-height:25rem;
border-radius: var(--border-radius);
background: var(--background-color);
text-align: center;
}

.maindiv {
background: var(--box-color);
border-radius: var(--border-radius);
text-align: left;
}

.nav {
  margin-bottom: .2rem;
font-size: .8rem;
background: var(--na-color);
border-radius: var(--border-radius);
max-width: 20rem;
}

header {
margin: .2rem;
font-weight:bolder;
font-size: 2.5rem;
text-shadow: var(--text-shadow);
border: var(--border);
border-radius: var(--border-radius);
background-size: cover;
background-image: url("")
}

/* unvisited link */
a:link {
  color: var(--a-color);
}

/* visited link */
a:visited {
  color: var(--a-visit);
}

/* mouse over link */
a:hover {
  color: var(--a-hover);
  text-decoration: underline;
  font-weight: bolder;
  cursor: alias;
}

/* selected link */
a:active {
  color: var(--a-active);
  cursor: alias;
}

.myButton {
	box-shadow:inset 0px 1px 0px 0px #54a3f7;
	background:linear-gradient(to bottom, #006da8 5%, #004b80 100%);
	background-color:#006da8;
	border-radius:3px;
	border:1px solid #124d77;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:1.063rem;;
	font-weight:bold;
	padding:0.375rem 1.375rem;;
	text-decoration:none;
	text-shadow:0px 1px 0px #154682;
}
.myButton:hover {
	background:linear-gradient(to bottom, #004b80 5%, #006da8 100%);
	background-color:#004b80;
}
.myButton:active {
	position:relative;
	top:1px;
}

.box {
    padding: .5rem;
    background-color: var(--c1);
    border: var(--border);
    border-radius: var(--border-radius);
}

table {
  width: 50%;
}

th {
    margin: 0.5rem;
    padding: .7rem;
    text-align: right;
    color: var(--important-text-color);
}

td {
    border: var(--border);
    border-radius: var(--border-radius);
    margin: 0.5rem;
    padding: .7rem;
    text-align: center;
    background-color: var(--c1);
    color: var(--text-color)
}