ody {
	font-family: "Consolas", "Arial", sans-serif;
	font-size: 14px;
	text-align: center; /*Text is centered by default.*/


}

li {
  text-align: left; /*You can change this, but centered lists can look kind of weird.*/
  margin-left: 20px
  }

h1 {
  text-align: center;
  font-size: 18px;
  letter-spacing:4px;
  text-shadow: 2px 2px #81656e;
  }
h2 {
  text-align: center;
  font-size: 14px;
  letter-spacing:4px;
  }

img {
  width: 70%;	
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

img {
  border: 2px solid #00000;
  vertical-align:middle;
}

/*Use as the class of spans or divs you want to have normal left-aligned text.*/
/*You can combine classes by putting them together with a space, i.e. <div class="box left"> will be a div using "box" and "left" styles.*/
.left {
  text-align:left;
  }

.box {
  margin: 5% auto 4% auto;
  	background-color: #FFFFFF;
	background-image: url("/clowncity/bgpkbf.gif");
	border: 2px solid #1a1e2e;
	width: 50em;
	padding: 3.5em 4em;
	

/*Prevent overflow of large images.*/
.box img, .box {
  max-width: 200%;
  height: auto;
  
  }


/*For narrow screens.*/
@media (max-width: 500px) {
  .box, .box-noscroll {
    width: 85%;
    }
  }
  
/*Mobile compatibility*/
@media (orientation: portrait) {
  .box, .box-noscroll {
    width: 85%;
    }
  }
  
  
  this is a test