* {
  font-family: Helvetica;
  box-sizing: inherit;
}

body {
  background-color: #999999;
  margin: 0;
  height: 100%;
}

span#name {
  font-size: 32px;
  font-weight: bold;
}

header{
  /* max-width: 800px; */
  background-color: #333333;
  color: #FFFFFF;
  padding: 1em;
  overflow: hidden;
  margin: auto;
  height: 55px;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
}

div#name-area{
  float: left;
  background-color: inherit;
}

div#name-area * {
  background-color: inherit;
}

div#contact-info {
  float: right;
  text-align: center;
  font-size: 18px;
  background-color: inherit;
}

div#contact-info * {
  background-color: inherit;
}

div#contact-info a {
  text-decoration: none;
  color: #FFFFFF;
  padding-right: 1em;
}

div#contact-info a:hover {
  color: #AAAAAA;
}

.navbar {
  margin: auto;
  max-width: 800px;
  background-color: inherit;
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid #AAAAAA;
  box-sizing: inherit;
  padding-top: 2em;
}

.navbar a {
  color: black;
  text-decoration: none;
  float: left;
  padding:0.375em 1em; 
  border-radius: 25px;
}

.navbar a:hover, 
.navbar a.selected {
  background-color: #AAAAAA;
}

.background {
  background-color: #999999;
}

.mainArea {
  max-width: 800px;
  padding: 0em 2em 1em;
  margin: auto;
  background-color: white;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
}

.mainArea * {
  background-color: inherit;
}

div.resume-title{
  display:table;
  width:100%;
}

div.resume-title span {
  display: table-cell;
  text-align: center;
  font-weight: bold;
}

div.resume-title span:first-child {
  text-align: left;
}
div.resume-title span:last-child {
  text-align: right;
}

.header {
  visibility: hidden;
  text-decoration: none;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
}

/* TODO Is there a better way of doing this link thing? */
#resume:hover .header, 
#parser:hover .header, 
#cpp-purple-air:hover .header,
#isolation-game:hover .header {
  visibility: visible;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.languages {
  font-weight: bold;
}

pre code {
  background-color: #112244 !important;
  border: 1px solid #555555;
  display: block;
  padding: 20px;
  white-space: normal;
  overflow-wrap: anywhere;
  color: #CCCCCC;
}