body {
  display: flex;
  flex-direction: column;
}
#TommyBoiHeaderDiv a {
  border-radius: 4px;
  color: black;
  float: left;
  font-size: 18px; 
  line-height: 25px;
  padding: 12px;
  text-align: center;
  text-decoration: none;
}
#TommyBoiHeaderDiv #TommyBoiHeaderAnchor {
  font-size: 25px;
  font-weight: bold;
}
#TommyBoiHeaderDiv a:hover {
  background-color: #ddd;
  color: black;
}
#TommyBoiHeaderDiv a.active {
  background-color: dodgerblue;
  color: white;
}
#TommyBoiLinksDiv {
  float: right;
}
#IntroBlurbDiv {
  margin: auto;
  width: 100%;
}
#TommyBoiImgDiv {
  margin: auto;
  text-align: center;
  width: 100%;
}
/* The hero image */
#TommyBoiHeroImageDiv {
  /* Use "linear-gradient" to add a darken background effect to the image. This will make the text easier to read. */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("assets/images/TommyBoiBlur.jpg");

  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
/* Place text in the middle of the image */
#TommyBoiHeroImageTextDiv  {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: grey;
}
#TommyBoiHeroImageSizer {
  border: 0px;
  height: 800px;
  width: 0%;
}
#TommyBoiHeroImageCaptionDiv {
  margin: auto;
  width: 100%;
}
#OutroBlurbDiv {
  margin: auto;
  width: 100%;
}
#AboutMeTable td {
  border: 1px solid #000000;
  padding: 5px;
}
/* Style the buttons that are used to open and close the accordion panel */
button.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
button.accordion.active, button.accordion:hover {
  background-color: #ccc;
}
/* Style the accordion panel */
div.panel {
  padding: 0 18px;
  background-color: white;
  overflow: hidden;
}
/* accordion when collapsed */
button.accordion:after {
  content: "+";
  font-size: 16px;
  color: #777;
  float: right;
  margin-left: 5px;
}
/* accordion when expanded */
button.accordion.active:after {
  content: "-";
}

@media screen and (max-width: 600px) {
  #TommyBoiHeaderDiv a {
    display: block;
    float: none;
    text-align: left;
  }
  #TommyBoiLinksDiv {
    float: none;
  }
  #TommyBoiHeroImageSizer {
    border: 0px;
    height: 400px;
    width: 0%;
  }
}