.sidenav {
  height: 100%;
  width: 160px; 
  position: fixed; 
  z-index: 1;
  top: 0; 
  left: 0;
 background-color: rgba(157, 14, 14, 0.8);
  overflow-x: hidden; 
  padding-top: 20px;
font-family: Arial;
text-align: center;
}


.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}


.sidenav a:hover {
  color: #f1f1f1;
}


.main {
  margin-left: 160px; 
  padding: 0px 10px;
}


@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

body {
	line-height: 1;
	background-color: rgb(143, 23, 23);
		background-image: url("img/theatrepagebackground.png");
         background-size: cover;
         background-repeat: no-repeat;
	text-align: center;
}

h1 {
  font-family: 'Times New Roman', Times, serif;
  font-size: 35px;
  color: white;
  
}


p{
	font-size: 110%;
	font-family: serif;
	color: white;
	line-height: 125%;
	padding: 10px;
	padding-top: 15px;
	background-color: rgba(98, 25, 25, 0.8);
	outline: 1px solid black;
	margin: 50px;
}

p a{
	color:white;
	text-decoration: underline;
}
p a:hover{
	color: #0099ff;
}

/* BINDER CSS */
.tabcontent {display: none;}

/* Wrapper and background for the whole widget */
.pixelbinder {
  width: fit-content;
  position: relative;
  padding: 10px;
  background-image: url("theatre/theatreimg/marbleslab.jpeg");
  margin-left: auto;
  margin-right: auto;
  border: 2px solid black;
  text-align: center;
  image-rendering: pixelated;
}

/* Setting the binder section in place */
.pixelbinderbg {
  width: 181px;
  height: 100px;
  position: relative;
  margin: 10px 0 10px 0;
  text-align: left;
}

/* Setting the images in place */
.tabcontent img{position: absolute;}
#binderbackground{z-index:1}
#page1, #page2{z-index:2}
#page1 {left: 17px;top: 9px;} /* For the left pixelbill */
#page2 {left: 110px;top: 9px;} /*For the right pixelbill */

/* Image opacity on hover, you can change this to be whatever you want them to do */
.pixelbinder a img:hover{
opacity: .5;
transition: .5s;
}

/* Styling the buttons */
.pixelbinder button{
  background-color: #fff;
  border: none;
  color: #444951;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: 'Garamond', serif;
  font-size: 16px;
}

/* Buttons on hover */
.pixelbinder button:hover{
  background-color: #FFEB3B;
  cursor: pointer;
}
/* BINDER CSS */