:root {
  --main-text-colour: black;
}

.Menubar {
    background-color:lightgray;
    display:flex;
    flex-wrap:wrap;
    margin: 0;
    padding: 0;
    border-style:solid;
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom: 3px solid darkgray;
    z-index: 10;
   }

@media screen and (min-width: 600px) {
  .Menubar {
    position: sticky;
    top:0;
    left:0;
    }

  .Announcement {
    margin:2em;
  max-width:100%;
  }

}

@media not (min-width: 600px) {

  .MainLinks {
     justify-content: space-evenly;
    }
}

.Menu {


  background-color:var(--main-text-colour);
  color: lightgray;
  padding: 1px;
  margin: 3px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  border: 2px solid var(--main-text-colour);
  border-radius: 4px;

}

.Menu a {
  text-decoration: none;
  color: inherit;
  padding-right: 5px;
  padding-left: 5px;
  border: 1px;
}

.Menu a:hover {
  color: white;
}



.Announcement {
  font-family: Arial, Helvetica, sans-serif;
  font-size: larger;
  border-style:solid;
  border-bottom: 2px solid;
  border-top: 2px solid;
  border-left: none;
  border-right: none;
  padding:1em;
  background-color: cornsilk;
  }


h1 {
 color:var(--main-text-colour);
 }


}
h2 {
  color:var(--main-text-colour);
  border-bottom: 2px dotted;
 }

h2 a {
  color:var(--main-text-colour);
  border-bottom: 2px dotted;
  text-decoration: none;
  color: inherit;
 }

h2 a:hover {
 color:chocolate;
}

body {
  background-color: white;
  margin: 0;
  }

.MainBody {
  margin: 1em;
  }

/* Create two equal columns that sit next to each other */
/* Sidebar/left column */
.side {
  flex: 50%;
  background-color: #f1f1f1;
  padding: 5px;
}

/* Main right column */
.rc {
  flex: 50%;
  background-color: black;
  padding: 5px;
}

/* Stories */
.stories {
  background-color: yellow;
  width: 100%;
  padding: 10px;
    color: black;
}

/* Responsive layout - when the screen is less than 1000px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1000px)
  {
  .row, .navbar
    {
    flex-direction: column;
    }
  }


/* New stuff on 19 May 2022 */

/* For the batch of stories, which wrap around */

.storySection {
  display:flex;
  flex-wrap:wrap;
  padding: 5px;
  }

.storyBox {

  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;

  border-style:solid;
  border-color:black;
  margin:0.5em;
  padding-left:1em;
  padding-right:1em;
  padding-bottom:1em;
  max-width:600px;
  background-color:#fcfcfc;
  border-radius:20px;
  overflow: auto; /* adds scrollbar if content overflows */
  box-sizing: border-box;
  }



.storyBox h1 {
  color:black;
  max-width:100%;
}

.storyImage {
  max-width:100%;
  border-style:solid;
  border-color:black;
  border-width:0.5px;
  box-shadow: 5px 6px 6px #888888;
  }

.marginAuto {
  margin:auto;
  }

.image50pc {
  width:50%;
  display: block;
  margin:auto;
  }

.image70pc {
  width:70%;
  display: block;
  margin: auto;
  }

.image80pc {
  width:80%;
  display: block;
  margin:auto;
  }


/* New stuff on 4 August 2022 */

/* For another batch of stories, which wrap around */

.storyBox2 {

  border-style:solid;
  border-color:black;
  margin:0.5em;
  padding-left:1em;
  padding-right:1em;
  padding-bottom:1em;
  max-width:700px;
  background-color:#fcfcfc;
  border-radius:20px;
  }

figure {
  width: 50%;
  display: block;
  margin: 1em auto;
  margin-top:3em;
  }

figcaption {
  text-align: center;
  }

.p2 {
  text-align: justify;
  padding-left: 30px;
  padding-right: 30px;
  font-style: italic;
  }
  
.centered-images {
    display: flex;
    justify-content: center;
    margin: auto;
}

.callout-box {
	margin-left: 30px;
	margin-right:30px;
	font-size: 1.2em; 
	font-style: italic;  
	background-color: #FFF5EE;  
	padding:0px 20px 0px 20px;  /* top right bottom left */
	width:fit-content; 
	text-align: justify; 
	border: 1px solid black;    
	box-shadow: 5px 5px 5px gray;
	border-radius: 10px;
}

.heading {
    text-align: center;
    font-weight: bold;
    font-size: larger;
    margin-top: 10px;
    margin-bottom: 10px;
    }