body{
  font-family: Serif, Monospace, sans-serif;
  font-size:15px;
  line-height:1.5;
  padding:0;
  background-color: #768889;
  margin:0;
}

/* .main */
.container{
  width:100%;
  margin:auto;
  overflow:hidden;
}

iframe{
  border-style: double;
  color: #000000;
  border-width: thick;
}

.navbar{
  width:100%;
  margin:auto;
  overflow:hidden;
}

ul{
  margin:0;
  padding:0;
}

.dark{
  background:#ffffff;
  color:#000000;
  margin-top:10px;
  margin-bottom:10px;
  border-style:solid;
  width: 75%;
  margin:auto;
  display:block;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  padding: 10px;
}

.dark-boxes{
  background:#ffffff;
  color:#000000;
  border-color: #85ac87;
  margin-top:10px;
  margin-bottom:10px;
  border-style:solid;
  width: 65%;
  margin:auto;
  display:block;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  padding: 20px;
}

.dark-capstone p{
  font-size: 16px;
  font-style: normal;
  font-family:georgia;
  margin-left:30px;
  margin-right:30px;
}

.dark-capstone{
  background:#ffffff;
  color:#000000;
  margin-top:10px;
  margin-bottom:10px;
  border-style:solid;
  width: 75%;
  margin-left:12.5%;
  margin-right:12.5%;
  overflow:hidden;
  display: block;
  overflow-x: hidden;
  align-content: center;
}

::-webkit-scrollbar {
width: 2px;
overflow-y: hidden;
scroll-behavior: smooth;
}

::-webkit-scrollbar-thumb {
background: #ffffff;
}

hr{
  border-width: thin;
  border-color:#000000;
  border-style: solid;
}

h5{
  font-size: 50px;
  text-align: center;
  margin:auto;
  color:#ffffff;
  border-style: solid;
  width:50%;
  padding:10px;
  background-color: #000000;
}

/*header background **/
  header{
    background:#85ac87;
    color:#ffffff;
    justify-content: center;
    border-bottom: #ffffff 2px solid;
    width:100%;
  }

/*menubar tabs*/
   header nav{
    margin:auto;
    width:100%;
  }

/*header links*/
  header a{
    color:#ffffff;
    justify-content: space-evenly;
    text-transform: uppercase;
    font-size:20px;
    cursor: grab;
  }

/*home, section 3, headers*/
  h1{
    font-size: 30px;
    text-decoration: underline;
    text-decoration-color: #85ac87;
    color:#000000;
    text-align: center;
    padding:10px;
    padding-left: 20px;
    padding-right: 20px;
  }

  h2{
    font-size: 30px;
  }

  h3{
    text-decoration: none;
    font-size: 60px;
    text-align: center;
    color:#ffffff;
    font-family: Garamond;
  }

  h4{
    font-family: audrey;
    font-weight: bold;
    font-size: 35px;
  }

/*home, section 3, body text*/
  p{
    font-size:18px;
    margin:auto;
    text-align: left;
    margin:15px;
    font-family:Georgia;
  }

  div.p-indent{
    text-indent: 50px;
  }

  .resume-contact-p{
    font-family: Times;
    font-size: 18px;
  }

  .TOC-header{
    text-align: center;
    font-family: Courier;
    font-size: 20px;
  }

  .header-essay{
    text-align: center;
    font-family: Times;
    font-size: 25px;
  }

  .capstone-bold{
    text-align: center;
    font-family: georgia;
  }

  .capstone-p1{
    color:#ff0000;
    font-size: 16px;
  }

/*menubar content*/
  header li{
    float:left;
    display:inline-block;
    padding:15px;
    margin:10px;
  }

  li {
    text-align: -webkit-match-parent;
  }

/*website brand name "The CN Network"*/
  header #branding{
    float:right;
    margin:auto;
    margin-right: 40px;
    display: inline-block;
  }

/*menubar highlight (bold) color*/
   header .highlight, header .current a{
     color:#000000;
     font-weight:bold;
   }

/*menubar hover*/
   header a:hover{
     color:#ffe345;
     font-weight:bold;
   }

/*home,section2*/

   #social .box img{
     padding:20px;
     margin: auto;
   }

   #social img a:hover{
     color:#ac85aa;
     font-weight:bold;
   }

   #social .highlight img .current a{
     color:#000000;
     font-weight:bold;
   }

   /* home body, section 3 */
   /*images*/
   #boxes .box img{
      align-items: center;
      border-style: solid;
      border-width:solid;
      border-color: #000000;
      cursor: grab;
   }

   #showcase .box img{
     border-style: double;
     border-width: medium;
     border-radius: 40px;
     padding:1px;
     display: block;
     margin-top: 10px;
     float:right;
     margin-top: 20px;
     margin-right: 40px;
     margin-left:10px;
   }

   #capstone .box img{
     border-color:#000000;
     border-style: double;
     border-width: thick;
     overflow: hidden;
     align-items: center;
     margin: auto;
     display: run-in;
     cursor: grab;
   }

   #capstone a{
     cursor: alias;
     color: #0000ff;
   }

   /*home headers*/
   #boxes h1{
     text-decoration: underline;
     text-decoration-color: #85ac87;
   }

/*home, section 3 content*/
   #boxes .box{
     text-align:center;
     padding:20px;
     margin:20px;
    }

/*Capstone Project text headers */
    #objective{
      text-decoration:none;
      margin:20px;
      text-align: center;
}

    #objective p{
      text-align: left;
    }

 /*footer (all pages)*/
    #footer{
      padding:15px;
      color:#000000;
      background:#85ac87;
      border-top: #ffffff 2px solid;
      text-decoration: underline;
  }

/*footer "CN Web Design..."*/
  #footer p{
    border:none;
    text-align:center;
    color:#ffffff;
    font-size:12px;
    text-decoration: underline;
  }

  table {
    font-family: Times, Arial;
    border-collapse: collapse;
    margin: auto;
    width: 90%;
  }

  td, th {
    border: 1px solid #C0C0C0;
    text-align: center;
    padding: 8px;
  }

  /*iPhone 6.7.8*/
  /*ABOUT*/
  @media (max-width:667px){
      p{
      font-size: 8px;
      }
      #boxes .box{
        text-align:center;
        padding:20px;
        margin:10px;
       }

       .box{
         padding:5px;
         font-size: 8px;
       }
       .box b{
         font-size: 8px;
       }

      header #branding{
        float:left;
        margin-left:12%;
        display: block;
      }
      h2{
        font-size: 30px;
        margin-left:8px;
      }

      #showcase .box img{
        border-style: double;
        border-width: medium;
        border-radius: 40px;
        padding:1px;
        margin-right:47px;
        float:right;
        margin-bottom:20px;
      }
      header a{
        color:#ffffff;
        text-transform: uppercase;
        font-size:10px;
        cursor: grab;
      }
      #boxes .box img{
         align-items: center;
         border-style: solid;
         border-width:solid;
         width:70%;
         border-color: #000000;
      }

      #footer p{
        border:none;
        text-align:center;
        color:#ffffff;
        font-size:6px;
        text-decoration: underline;
      }
      #footer{
        padding:2px;
        color:#000000;
        background:#85ac87;
        border-top: #ffffff 2px solid;
        text-decoration: underline;
    }
      header nav{
       display: block;
       width:100%;
       float:left;
       margin-left: 15px;
     }
     /*Capstone*/
     h3{
       text-decoration: none;
       margin-top:15px;
       font-size: 30px;
       text-align: center;
       color:#ffffff;
       font-family: Garamond;
     }

     h1{
       font-size: 16px;
       text-decoration: underline;
       text-decoration-color: #85ac87;
       color:#000000;
       text-decoration-style:bold;
       text-align: center;
       padding:10px;
       margin-top:20px;
     }
     .dark-capstone p{
       font-size: 8px;
       font-family:georgia;
       margin:15px;
     }
     .capstone-bold{
       text-align: center;
       font-family: georgia;
       font-size:8px;
     }

     .capstone-p1{
       color:#ff0000;
       font-size: 8px;
       text-align: center;
     }
     #objective{
       text-decoration:none;
       text-align: center;
       font-size: 10px;
 }
     #objective p{
       text-align: left;
     }
     .dark-boxes{
       background:#ffffff;
       color:#000000;
       border-color: #85ac87;
       border-style:solid;
       margin:auto;
       display:block;
       width:95%;
       padding:10px;
     }
     h5{
       font-size: 25px;
       text-align: center;
       margin:auto;
       color:#ffffff;
       border-style: solid;
       width:50%;
       padding:3px;
       background-color: #000000;
     }

     h4{
       font-size:16px;
       text-decoration: none;
       font-weight: bold;
     }

     .TOC-header{
       text-align: center;
       font-family: Courier;
       font-size: 12px;
     }
     .dark-capstone{
       background:#ffffff;
       color:#000000;
       margin-top:10px;
       margin-bottom:10px;
       border-style:solid;
       width: 98%;
       margin-right:1%;
       margin-left:1%;
       overflow:hidden;
       display: block;
       overflow-x: hidden;
       align-content: center;
     }
     .resume-contact-p{
       font-family: Times;
       font-size: 8px;
     }
     .dark{
       background:#ffffff;
       color:#000000;
       border-style:solid;
       width: 95%;
       margin-left: auto;
       display:block;
     }
     .header-essay{
       text-align: center;
       font-family: Times;
       font-size: 10px;
     }
     iframe{
       width:85%;
       height:25%;
     }
     #capstone .box img{
       border-color:#000000;
       border-style: double;
       border-width: thick;
       overflow: hidden;
       align-items: center;
       margin: auto;
       display: run-in;
       cursor: grab;
       width:50%;
       height:50%;
     }
     b {
       font-size:10px;
     }
     .dark b{
       font-size:8px;
     }
     p.dark-boxes b{
       font-size:8px;
     }
     div.p-indent{
       text-indent: 20px;
     }
     table {
       font-family: Times, Arial;
       border-collapse: collapse;
       margin: auto;
       width: 90%;
       font-size: 6px;
     }

     td, th {
       border: 1px solid #C0C0C0;
       text-align: center;
       padding: 4px;
     }