body {
   font-family:verdana, sans-serif;
   font-size:1vw
  
}

/*heading rules */

h1 {
   font-variant:small-caps;
   color:#0EACE6;
   font-family:Andalé mono, Helvetica, monospace;
   font-size:4em;
   text-align:center;
   padding:0;
   margin:0;
   background-color:#FAE3FF;
   
}

h2 {
   font-family:serif;
   color:#000088;
   font-weight:bold;
   font-style:italic;
   font-size:3em;
   border-bottom:1px dashed #BBBBBB;
   
}

h3 {
   text-transform:uppercase;
   font-size:15pt;
}

/*paragraph*/

p {
   text-align:justify;
   text-indent:2em;
}

/*two types of classes of lists that have the icon indent or not indent the list*/

.outsideList  {
   list-style-position:outside;
   list-style-image:url("/Images/pokeballicon.png");
}

.insideList  {
   list-style-position:inside;
   list-style-image:url("/Images/pokeballicon.png");
}

/*list rules*/

ul li {
   list-style-image:url('/Images/listarrow.gif');
}

li ul li {
   list-style-type:circle;
   list-style-image:none;
}

ol li {
   list-style-type:upper-roman;
}

/*description list*/

dt {
   font-weight:bold;
   font-family:"lucida console", monospace;
   text-transform:uppercase;
   background-color:#DDDDFF;
   background-image:url("/Images/samplegradient.gif");
   background-repeat:repeat-x;
}

dd {
   font-style:italic;
   margin-bottom:0.5em;
   margin-left:2em;
   border-left:3px solid #DDDDFF;
   border-bottom:1px solid #DDDDFF;
   padding-left:0.5em;
}

/* attempting a list with bug eye emojis as bullets */

.funList{
    list-style: none;
    padding: 10px 30px;
    background-image: url("/Images/bugeyes.gif");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 20px;
}

/*Rules for tables*/

table {
    margin:auto;
    width:50%;
    border-spacing: 4px;
}

td, th {
    border:1px solid #BBBBBB;
    border-radius: 10px;
    border-collapse: collapse;
    padding:15px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
tr:nth-child(odd) {
    background-color: #555555;
    color:white;
}

caption{
    text-transform:uppercase;
    font-size:15pt;
    font-weight: bold;
}

/* link css rules */

a:link, a:visited {
    text-decoration:none;
    color:#0000AA;
    font-weight:bold;
}

a:hover, a:active {
    background-color:#EEEEFF;
}

/*these affect image links */

a:link img, a:visited img {
    border:0;
}

a:hover img, a:active img {
    background:#EEEEFF;
}

/*float images with this class */

.floatLeft{
    float:left;
}

.header{
    background-image: url("headerimage.jpg");
    background-size: cover;
    text-align: center;
    padding-top:3em;
    width: 100%;
    height: 90px;
    background-color:#FAE3FF;
}

/* this code makes most of the text in a section on the left */

.leftBox {
    float: left;
  width: 70%;
  padding: 0 20px;
  overflow: hidden;
   border:2px solid #000000;
}

/*this code makes a panel on the right side. I used flex box css to let the navigation menu stretch to fill it. I may need to still adjust the height later */

.navMenuBox {
    float: left;
    width: 15%;
    padding: 10px 10px;
    margin-top: 7px;
    display: flex;
    justify-content: center;
    align-items: stretch;
    height: 1000px;
    right:0;
    border:2px solid #BBBBBB;
}

.iFrameInBox{
    width: 100%;
    height: 100%;
   
}

@media only screen and (max-width:800px) {
  /* For tablets: */
  .leftBox {
    width: 100%;
    padding: 0;
  }
  .navMenuBox{
    width: 100%;
    height: 1000px;
  }
  .iFrameInBox {
      width: 80%;
    height: 1000px;
  }
  
  .mainBody{
      font-size: 150%;

  }
  .navBody{
      font-size: 250%;

  }
  .footer{
      width:100%;
    float: left;
    font-size: 3vw;
  }
}
@media only screen and (max-width:500px) {
  /* For mobile phones: */
  .leftBox, {
    width: 200%;
  }
  .navMenuBox,{
      max-width: 100%
      height: 2000px;
  }
  .iFrameInBox {
      max-width: 100%
      height: 2000px;
  }
  .mainBody{
      font-size: 180%;

  }
  .navBody{
      font-size: 250%;

  }
}

/*These rules apply to the iframe inside of the navMenuBox. The iframe references the navigation menu on a separate html page */

#navIFrame {
    font-size: 5vw;
}

#navIFrame ul {
    margin:0;
    padding:0;
    list-style-type:none;
}

#navIFrame li {
    font-weight:bold;
    font-variant:small-caps;
    background:url('/Images/samplegradient.gif') repeat-x rgba(191, 227, 255, 1);
    padding:0.1em 0.5em;
}

#navIFrame li ul li {
    font-weight:normal;
    font-variant:normal;
    background:transparent;
    padding:0;
    display: inline;
    text-transform: capitalize;
}

#navIFrame li ul li a:link, #menu1 li ul li a:visited {
    display:block;
    color:#000088;
    padding:0.1em 0.5em;
    text-decoration:none;
    border-bottom:1px solid #DDDDFF;
}

#navIFrame li ul li a:active, #menu1 li ul li a:hover {
    background:#EEEEFF;
    color:#333388;
}

.footer{
    text-align: center;
    padding-top:3em;
    margin-left:0px;
    margin-right:00px;
    background-color:#FAE3FF;
}

.footer p{
    text-align: center;
}
/*various rules that can highlight text in different ways*/

span {
   background-color:#92F7A1;
   font-weight:bold;
}

pre {
   background-color:#EEEEEE;
   margin:0 1em;
   padding:0.5em;
   overflow:auto;
}

code {
   background-color:#EEEEEE;
}

article{
    background-color: #D1D1D1;
    font-family: monospace;
}