:root {
  --nav_color: #2c6698;
  --grey_nav: #A2A2A2;
  /*Alternate Colors: 343a40 3D007A 337194 337194 2068a8*/
}

/*Navigation*/
.bg-dark {
  /*Overrides Bootstrap defaults*/
  background-color: var(--nav_color) !important;
  padding: 0px 16px;
}

.navbar-brand {
  font-size: 35px;
  font-family: serif;
  padding-left: 20px;
  padding-right: 20px;
  margin: auto;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: var(--nav_color);
}

nav ul li {
  float: left;
  font-size: 17px;
}

nav ul li a {
  display: block;
  color: black;
  background-color: var(--nav_color);
  text-align: center;
  text-decoration: none;
  min-width: 60px;
}

nav ul li a:hover {
  color: white;
  background-color: black;
}

.nav-top-text:hover {
  /*Overrides Bootstrap defaults*/
  color: white !important;
}

.active .nav-top-text:hover {
  background-color: var(--grey_nav);
}

.drop-active .nav-top-text:hover {}

.dropdown-toggle {
  /*Overrides Bootstrap defaults*/
  padding-left: 10px !important;
}

.active a {
  background-color: #FFF;
  color: white;
}

.dropdown-menu {
  background-color: black;
  min-width: 9rem;
  padding-top: 0px;
  padding-bottom: 0px;
  border-top: 2px;
  border-bottom: 2px;
  border-color: black;
  border-style: solid;
}

.dropdown-item {
  padding-left: .25rem;
  padding-right: .25rem;
  border-color: black;
  border-top: 2px;
  border-bottom: 2px;
  border-style: solid;
  overflow: hidden;
  text-align: center;
  /* CSS3 */
  white-space: pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -moz-pre-wrap;
  /* Opera 4-6 */
  white-space: -pre-wrap;
  /* Opera 7 */
  white-space: -o-pre-wrap;
  /* Internet Explorer */
  word-wrap: break-word;
  background-color: #4080b8 !important;
  color: black !important;
}

.dropdown-item:hover {
  background-color: black !important;
  color: white !important;
  border-color: black;
}

.dropdown-item.drop-active {
  background-color: white !important;
  color: black !important;
}

.dropdown-item.drop-active:hover {
  background-color: var(--grey_nav) !important;
  color: white !important;
}

/* html */
html {
  width: 80%;
  margin: 0 auto;
  background-color: black;
  /*#2e2727; #120d0d*/
  height: 97%;
}

/*Header*/
h1 {
  background-color: var(--nav_color);
  /*3F8CB8*/
  padding: 5px 16px;
  border: 1px solid #000;
  font-family: serif;
  font-size: 35px;
}

h2 {
  font-family: serif;
  text-align: center;
  margin-top: 50px;
}

h3 {
  font-family: serif;
  text-align: center;
  width: 55%;
  margin: auto;
  margin-top: 50px;
}

.working {
  font-style: italic;
  margin-top: 20px;
  font-size: 1.3em;
}

/*Body*/
body {
  /*Alternative bg colors
  background-color: #C9C9C9;
  background-color: #D4D4D4;
  background-color: #EAEAEA;
  */
  background-color: #FCFCFC;
  padding: 15px 15px 50px 15px;
  min-height: 100%;
  height: auto;
}

ul {
  padding-left: 40px;
  list-style-type: none;
  margin: auto;
}

p {
  text-align: justify;
  align-self: center;
  margin-right: auto;
  margin-left: auto;
  max-width: 52%;
  margin-bottom: 25px;
  margin-top: 25px;
}

.date {
  font-style: italic;
}

.recent {
  text-indent: 50px;
  font-style: italic;
}

.playlist {
  text-indent: 50px;
}

.condensed {
  margin-bottom: 2px;
  margin-top: 2px;
  padding-bottom: 2px;
  padding-top: 2px;
}

.lyrics {
  text-align: center;
  font-family: serif;
}

.stage-dir {
  font-family: serif;
  font-style: italic;
}

.no-italics {
  font-style: normal;
}

.subhead {
  text-align: center;
  font-family: serif;
  font-size: 1.3em;
}

.subtitle {
  text-align: center;
  font-family: serif;
  font-size: 1.1em;
}

/* Images */
.profile {
  display: block;
  margin: auto;
  transition: 0.5s;
  border-radius: 3%;
}

.profile:hover {
  transition: 0.5s ease;
  border-top-left-radius: 45%;
  border-top-right-radius: 20%;
  border-bottom-left-radius: 45%;
}

/*contact*/
.contact {
  text-align: center;
}

.contact ul {
  display: inline-table;
  text-align: left;
}

.contact li {
  display: inline;
}

.contact li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
  border: 2px solid transparent;
}

.contact li a:hover {
  border: black 2px solid;
}

/*Games*/
.games p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.game-image {
  width: 40% !important;
}

.header {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.header-image {
  margin-top: 20px;
  width: 90%;
  max-height: 300px;
}

.closer-image {
  margin-top: 20px;
  max-width: 90%;
}

/*Flex Box*/
section {
  display: flex;
}

aside {
  flex: 1
}

article {
  flex: 4
}

hr {
  align-content: center;
  margin-right: auto;
  margin-left: auto;
  max-width: 70%;
}

/*Media Queries*/
@media (max-width: 767px) {

  /* html */
  html {
    width: 95%;
    margin: 0 auto;
    background-color: black;
    height: 97%;
  }

  h3 {
    width: 90%;
    font-size: 20px;
  }

  .bg-dark {
    background-color: black !important;
    border-bottom: black 3px solid;
    padding-right: 10px;
  }

  nav ul {
    width: 55%;
    margin: auto;
    border-right: black 2px solid;
    border-left: black 2px solid;
  }

  .navbar-brand {
    margin: auto;
    padding-left: 2em;
    margin-left: auto;
    color: white !important;
  }

  .navbar-toggler {
    background-color: var(--nav_color);
    align-items: flex-end;
  }

  nav ul li {
    padding: none;
  }

  .dropdown-item {}

  p {
    max-width: 80%;
  }

  hr {
    max-width: 90%;
  }

  .game-image {
    width: 60% !important;
  }
}