@font-face {
    font-family: 'Architect_Bold';
    src: url('Architect_Bold.woff2') format('woff2'),
        url('Architect_Bold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


body {
  background-color: #000000;
  margin: 0;
  color: #c0c0c0;
  font-family: Trebuchet, Tahoma, sans-serif;
  font-size: 1em;
  line-height: 1.2em;
  font-weight: 300;
  width:100%;
  }
  
h1 {font-size: 1.6em; line-height: 1.2em;}

h2 {font-size: 1.6em; 
	line-height: 2.6em;
	text-align: center;
	margin: 10px;}
	
h5 {font-size: 1em;
font-weight: bold;}

a:link {color: #808080; text-decoration: underline;} 
a:visited {color: #ff6300;}
a:active {color: #c0c0c0;}
a:hover {color: #1e9843;}
  
hr {
	margin:auto;
	margin-top: 32px;
	margin-bottom: 32px;
}
  
#bgalt {
	background-color: #000000;
	background-image: url('pendybg.jpg');
	background-size: 300px;
	background-repeat: repeat;
	color: #c0c0c0;
}

.main-border {
width:90%;
max-width: 800px;
background-image: url('vbord.jpg'), url('hbord.jpg'), url('vbord.jpg'), url('hbord.jpg');
background-repeat: repeat-y, repeat-x, repeat-y, repeat-x;
background-position: top left, top center, top right, bottom center; 
  margin: 30px auto;
  padding: 5px;

  }
  
.main {
	margin: 20px; 
	padding: 20px 40px 0 40px;
	background: rgba(0,0,0,0.0);
	}
  

.main h1 {
	font-size: 1.6em;
	line-height: 1.2em;
	margin: 15px 0 15px 0;
	color: #fff;
	background-color: #000000;
}

.sec-border {
	background-color: #000000;
	width:90%;
	max-width: 800px;
	border: 7px double #fff;
	margin: auto;
	padding: 5px;
}

h4 {
	font-size: 1.35em;
	margin: 15px 0 24px 0;
	color: #fff;
}

h4::after {
	margin-top:6px;
	width: 100%;
	border-bottom: 2px solid #fff;
	text-align:right;
	font-size: 10pt;
	font-weight: 300;
	line-height: 1.1em;
	content: 'Pendrell Stories';
	display: inline-block;
	position: relative;

} 
.menu {
	font-family: 'Architect_Bold', cursive;
	font-size: 1.2em;
	font-weight: 600;
	letter-spacing: 1px;
	text-shadow: 0 0 4px #ff6300, 0 0 8px #ff6300, 0 0 12px #ff6300, 0 0 18px #f77300, 0 0 22px #f77300, 0 0 26px #f77300, 0 0 30px #f77300, 0 0 4px #1e9843, 0 0 8px #1e9843;
	text-align: center;
	margin: 5px 0 20px 0;
}

.menu-item::before {
	color: #fff;
    content: url('forward.gif');
    padding: 0 15px 0 0;
    position: relative;
    top: 17px;
	
}

.menu-item::after {
	color: #fff;
    content: url('backward.gif');
    padding: 0 0 0 15px;
    position: relative;
    top: 17px;
}

	
.menu h3 {
	font-size: 1.35em;
	font-weight: 400;
	padding: 10px 0 46px 0;
}
	
.menu-item-top::before {
    content: url('topright.jpg');
    padding: 0 6px 0 0;
    position: relative;
    top: 2px;
	
}

.menu-item-top::after {
    content: url('topleft.jpg');
    padding: 0 0 0 6px;
    position: relative;
    top: 2px;
}


.menu a:link, .menu a:visited {color: #c0c0c0; text-decoration: none;}

.menu-bottom {
	line-height:2.2em; 
	padding: 1em;
	text-shadow: 0 0 4px #f77300, 0 0 10px #f77300, 0 0 16px #f77300, 0 0 24px #f77300, 0 0 30px #f77300, 0 0 2px #000, 0 0 4px #000, 0 0 8px #000, 0 0 12px #ff6300, 0 0 16px #ff6300;
}

.menu-bottom a:link {color: #ff6300; text-decoration: none;} 
.menu-bottom a:visited {color: #808080;}
.menu-bottom a:active {color: #c0c0c0;}
.menu-bottom a:hover {color: #35ff72;} 

.indent {
	margin: 1em;
	padding-left: 2em;
	padding-bottom: 1em;
}


@media only screen and (max-width: 700px) {

.main-border {width:96%;
	margin:auto;}

.main {width: 92%;
	padding: 20px 5px 10px 5px;
	margin: auto;}
img {max-width: 100%;}
  }