.page-header h1 { text-align: center }
.page-header .new-game { position: absolute; right: 0; margin-right: 5px; }


.topnav {
  overflow: hidden;
  position: relative;
  margin-bottom: 15px;
}

.topnav h1 { display: inline-block; padding: 0; margin: 0; text-align: center; }
.topnav #nav_menu { display: none; border: solid 1px #000; background: #26a69a; padding: 10px; }

.topnav .top { display: flex; }
.topnav .menu { margin-left: auto; }

.topnav a.icon {
  text-decoration: none;
  font-size: 19px;
  color: black;
  display: block;
  height: 100%;
  padding: 0 7px;
}
.topnav #nav_menu a { color: white; text-decoration: none; }

.fa-bars:before {
  content: "\002630";
  font-size: 21px;
}

.topnav a:hover, .topnav a.selected {
  background: #26a69a;
  color: white;
  border: solid 1px #000;
  z-index: 1;
  border-bottom: 0;
}

#game_intro { width: 80%; margin: auto; }
#loading { padding: 5px; }
.error { background: #ff8c8c; border: solid 1px #000; padding: 10px; }

#loading .header { text-align: center; font-size: large; }
#loading .header img { display: block; text-align: center; margin: auto; }
#loading .message { font-size: larger; text-align: center; }
.help { text-align: center; font-style: italic; }

h2 { text-align: center; }

/* This centers the float elems */
/* .characters-container { float: left; position: relative; left: 50%; } */
/* #characters { position: relative; left: -50%; } */

#main_screen { width: 90%; text-align: center; margin: auto; }
#characters { text-align: center; }
#characters .character { display: inline-block; margin-left: 5px; margin-right: 5px;  }
#characters .character img { width: 128px; height: 128px; cursor: pointer; }
#characters .character .victim { border: solid 2px red; border-radius: 3px; }
#characters h3 { text-align: center; font-size: 18px; margin: 0; }
#rooms h3 { text-align: center; font-size: 14px; margin-top: 3px; }

/* This centers the float elems */
/* .rooms-container { float: left; position: relative; left: 50%; } */
/* #rooms { position: relative; left: -50%; } */

#rooms { text-align: center; }
#rooms .room { display: inline-block; margin-left: 5px; margin-right: 5px; }
#rooms .room img { width: 128px; height: 128px; cursor: pointer; }

.interrogate h2 { display: inline; }
.interrogate table { width: 80%; margin: auto; }
.interrogate table td { vertical-align: top; }
.interrogate table td { width: 50%; }
.interrogate textarea { width: 95%; font-size: 16px; }
.interrogate .mugshot, .interrogate .room-image { width: 400px; height: 400px; }
.interrogate .reply { min-height: 100px; }

.table {  }
.table-header { width: 80%; margin-bottom: 10px; }
.table-content { margin: auto; }
.table-image, .table-text{ float: left; width: 450px; text-align: center;  }
.table-text { margin-bottom: 10px; }
button.submit { margin-bottom: 10px; }
button.accuse { display: block; margin: auto; }

#characters .character img { width: 128px; height: 128px; cursor: pointer; }
.interrogate .mugshot, .interrogate .room-image { width: 100%; object-fit: cover; }
@media (min-width: 800px) {
  .interrogate .mugshot, .interrogate .room-image { object-fit: contain; }
}
.table-image, .table-text{ width: 100%; }
.table-header { text-align: left; margin-top: 1em; width: auto; }
.table-content { width: 80%; }

.left { float: left; width: 45%; }
.right { float: left; width: 45%; }

.clear { clear: both; line-height: 0; height: 0; }

.button {
  border: solid 1px #777;
  position: relative;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
  z-index: 1;
  transition: .3s ease-out;
  text-decoration: none;
  color: #fff;
  background-color: #26a69a;
  text-align: center;
  letter-spacing: .5px;
  border-radius: 4px;
  height: 36px;
  line-height: 36px;
  padding: 0;
  padding-left: 10px;
  padding-right: 10px;
  font-weight: bold;
}
.button:hover {
  background: #015249;
}
button.button {
  border: 0;
  font-weight: bold;
  font-family: sans-serif;
  border: solid 1px #015249;
  letter-spacing: auto;
  line-height: 0;
  font-size: medium;
}
.material-icons {
  background-size: 36px 36px;
  background-repeat: no-repeat;
  width: 32px;
  height: 32px;
  display: inline-block;
  filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(192deg) brightness(107%) contrast(101%);
}
.icon-back { background-image: url("assets/back.svg") }
#examine_room .objects { text-align: center; margin: auto; width: 60%; }
#examine_room .objects li { display: inline-block; text-align: left; margin: auto; padding: 3px 15px; }

#accusation h2 { color: red; }
#accusation .answer-wrong { color: red; }
#accusation .answer-correct { color: green; }

#new_game .loading { text-align: center; display: none; }
#new_game .form, #new_game .loaded { font-size: 24px; text-align: center; }
#new_game .form select { font-size: 20px; }
#new_game .help { font-size: 17px; }
#new_game .form input, #new_game form select { font-size: 24px; }
#new_game .row { margin: auto; margin-bottom: 10px; }

.progress-bar-wrapper{ width: 100%; margin-top: 10px; }
.progress-bar {
    width: 80%; margin: auto;
    background-color: #e0e0e0;
    padding: 3px;
    border-radius: 3px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
  }
.progress-bar-fill {
    display: block;
    height: 22px;
    background-color: #659cef;
    border-radius: 3px;
    transition: width 500ms ease-in-out;
}



#recent_stories ul { list-style: none; text-align: center; padding: 0; margin: 0; }
#recent_stories ul li { padding: 5px 0; }
#recent_stories ul a { font-size: larger; }