body {
  /*Just to make the main pages look a little nicer.*/
  font-family: "Cantarell", Verdana, sans-serif;
  font-size: 0.95em;
  background: #353842;
  }
  
a {
  color: #dedee0;
  }
  
tt {
  font-size: 1.05em; /* since it's pretty small by default */
  }

/*No style, used to keep footer et al contained.*/
.main-container {
  }

/*Pages go in here.*/
.story-container {
  width: 480px;
  height: 680px;
  border: 1px solid #000;
  margin: 0 auto;
  margin-top:20px;
  overflow: hidden;
  }

/*Individual pages of the story.*/
.page {
  width: 480px;
  height: 680px;
  overflow: auto;
  position:relative;
  }
  
.page-content {
  padding: 25px 15px 15px 15px;
  /*Extra padding at top is for the page number - remove if unused.*/
  }
  
.page-number {
  position: absolute;
  float: right;
  right:0;
  padding: 15px;
  }
  
/*To keep choices always at the bottom of the page.*/
.stick-to-bottom {
  position:absolute;
  bottom:0;
  width: 480px;
  }
  
/*Optional footer buttons.*/
.footer {
  width: 480px;
  margin: 0 auto;
  margin-top: 15px;
  padding-bottom: 15px;
  }
  
.left {
  float: left;
  padding-left:2px;
  }
  
.right {
  float: right;
  right: 0;
  padding-right:2px;
  }
  
  
/*Standard page styling base.*/

.page {
  background: #eee url(https://sirenwebarchive.neocities.org/images/paper2.jpg); /*REPLACE WITH YOUR OWN - DO NOT HOTLINK*/
  color: #000;
  }
  
.page a {
  color: #006653;
  }
  
.page a:focus, .page a:hover {
  color: #00977b;
  }
  
.page a:focus {
  outline: 1px solid #006653;
  }

  
/*Special styling for the example game.*/

.ancient {
  background: url(https://sirenwebarchive.neocities.org/images/cliffs.jpg); /*REPLACE WITH YOUR OWN - DO NOT HOTLINK*/
  box-shadow: inset 0 0 25px 0px rgba(15,5,0,0.9);
  font-family: "Symbola", Symbola, Goudy Stout, Palatino, serif;
  font-weight:bold;
  color: #000;
  }
  
.ancient hr {
  height:2px;
  border:0;
  margin-left:0;
  margin-right:0;
  background: linear-gradient(to left, rgb(0,0,0,0), #421810 ,rgb(0,0,0,0));
  }
  
.ancient a {
  color: #3d120a;
  }
  
.ancient a:focus, .ancient a:hover {
  color: #661608;
  }
  
.ancient a:focus {
  outline: #421810 1px solid;
  }
  
.ancient .page-number {
  padding: 20px 20px 10px 10px;
  }
  
.ancient .page-content {
  padding: 40px;
  }
  
.ancient .stick-to-bottom {
  padding-bottom: 40px;
  padding-right: 40px;
  width: 400px;
  }
  
.byline {
  font-size: 0.9em;
  font-style:italic;
  }


/*Support for mobile and narrow screens*/
@media(max-width: 480px) {
  .story-container, .footer, .page, .ancient .page {
    margin:0;
    padding:0;
    width: 100%;
    }
  .ancient .stick-to-bottom {
    margin:0;
    padding:0;
    width: 85%;
    position: static;
    }
  .ancient .stick-to-bottom {
    padding-bottom: 5%;
    margin: 0 auto;
    }
  }