/* body */

body {
  background-image: url(/ocs/assets/bgcreamsilk.jpeg);
  font-family: arial;
  color: rgb(113, 99, 65);
  padding: 5px;
}

h2 {
  margin: 10px 0 -5px 0;
  
  font-size: 50px;
  color: rgb(81, 129, 164);
  text-shadow: 0 0 5px rgb(81, 129, 164);
}

h4 {
  margin: -10px 0 -10px 0;
  font-size: 25px;
  color: rgb(81, 129, 164);
  text-shadow: 0 0 5px rgb(81, 129, 164);
}

h5 {
  margin: 5px 0 12px 0;
  
  color: rgb(81, 129, 164);
  text-shadow: 0 0 2px rgb(81, 129, 164);
  text-align: center;
  font-size: 15px;
}

h5:hover {
  color:rgb(255, 255, 255);
  text-shadow: 0 0 2px rgb(255, 255, 255);
}

a:link, :visited {
  color: rgb(81, 129, 164);
  text-shadow: 0 0 5px rgb(81, 129, 164);
}

a:hover, :active {
  color: rgb(255, 255, 255);
  text-shadow: 0 0 5px rgb(255, 255, 255);
}

/* table */

table {
  float: right;
  width: 25%;
  margin: 20px;
  
  text-align: center;
}

th {
  background-color: rgb(81, 129, 164);
  color: rgb(228, 222, 208);
  text-shadow: 0 0 2px rgb(228, 222, 208);
  
  padding: 0px 5px 0px 5px
}

td {
  background-color: rgb(151, 182, 206);
  color: rgb(81, 129, 164);
  font-style: italic;
  
  padding: 0px 5px 0px 5px;
}

/* containers */

.mainbox {
  margin: auto;
  padding: 0;
  
  text-align: center;
  
  overflow: scroll;
  
  background-color: rgba(228, 222, 208, 0.8);
  border: 2px rgb(109, 171, 171);
  
  width: 95%;
  height: 820px;
}

.mainbox .one {
  position: sticky;
  top: 0px;
  
  height: 100px;
  
  z-index: 10;
  
  background-color: rgba(228, 222, 208, 0.8);
  box-shadow: 0 0 50px rgb(228, 222, 208);
  
  /* idk why this breaks everything but it does
  background-image: linear-gradient(rgba(228, 222, 208, 0)0%, rgba(228, 222, 208, 0.8)5%, rgba(228, 222, 208, 0.8)95% rgb(228, 222, 208, 0)100%;*/
}

.mainbox .two {
  margin: 10px 25% 0 25%;
  
  width: 50%;
  height: auto;
  
  text-align: justify;
  text-justify: inter-word;
}

.mainbox .two img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.mainbox .two p {
  font-size: small;
}

.mainbox footer {
  text-align: center;
}

/* images */

.calignpic {
  vertical-align: middle;
}

/* fonts */

.font1 {
  font-family: "Felipa", serif;
  font-weight: 400;
  font-style: normal;
}













/* peek */