@import url("https://fonts.googleapis.com/css2?family=Besley&display=swap");
.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../Images/HighresScreenshot00002.jpg");
  min-height: 15em; }

.story {
  width: 100%; }

.story p {
  width: 95%; }

.story-header {
  margin: 10px;
  padding: 5px;
  font-size: 25px;
  background: #1a1a1a;
  color: #4d4d4d;
  font-weight: bolder;
  border-radius: 5px;
  text-align: center; }

.header-box {
  color: #4d4d4d;
  text-align: center; }

.story-wrapper {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch; }

.items-box ul {
  text-align: left; }

.box2 {
  font-family: 'Besley', serif;
  color: gray; }

@media all and (min-width: 0px) {
  .box1 {
    width: 100%;
    text-align: center; }
  .box2 {
    width: 100%;
    padding-left: 20px;
    margin: 5px 0px 5px 0px; }
  .box1 img {
    width: 95%; } }

@media all and (min-width: 800px) {
  .box1 {
    width: 35%; }
  .box2 {
    width: 65%;
    padding-left: 0px;
    text-align: center; }
  .box1 img {
    width: 95%;
    max-width: 700px; } }

body {
  padding: 0px;
  margin: 0px;
  background-color: #000;
  /*color: lightgray;*/ }