body {
    background-color: rgba(156,158,170,1);
    } /** backup color codes rgba(156,158,170,1) rgba(207,209,210,1) rgba(107,111,131,1) rgba(21,46,76,1); **/
p {
    font-family: "Times New Roman", Times, serif;
    font-size: 18px 
    }
h1 {
    font-family: Impact, fantasy;
    }
h2 {
    font-family: Impact, fantasy;
    font-size: 40px;
    padding-top: 40px;
    padding-bottom: 0px;
    }
h3 {
    font-family: Impact;
    font-size: 25px;
    padding: 5px
    }
.floatl {
    float: left;
    padding: 0px 0px;
    margin: 0px 50px 10px 20px 
    }/** for the logos in the head and footer to "hopefully" look decent **/
#content {
    margin: 30px auto;
    border: black 1px solid;
    background-color: rgba(107,111,131,1);
    width: 1300px;
    text-align: center;
    overflow: auto;
    border-radius: 5px;
    }/** to improve readability and make it absolutely clear to a not tech savvy person where the content they are looking for is **/
#content a:link {
    color: rgba(21,46,76,1)
    }
#content a:visited {
    color: black
    }
#head {
    width: 1300px;
    border: black 3px solid;
    margin: 0px auto;
    padding: 30px;
    text-align: center;
    background-color: rgba(207,209,210,1);
    }
#foot {
    width: 1300px;
    height: 120px;
    border: black 3px solid;
    margin: 30px auto;
    padding: 30px 40px;
    background-color: rgba(21,46,76,1);
    }
#foot a:link, #foot a:visited {
    color: white;    
    }
.nav {
    width: 1000px;
    font-size: 20px;
    background-color: black;
    border: white 2px solid;
    margin: 5px auto;
    text-align: center;
    }/** setting up the div for the list nav which may benefit from making each list item into a link button but the sections are
      * small enough that it felt unnecessary **/
.nav ul{
    margin: 0px;
    padding: 3px;
    list-style-type: none;
    }
.nav li {
    display: inline-block;
    border: black 2px solid;
    padding: 0px 9px;
    background-color: white
    }
#current {
    background-color: rgba(156,158,170,1);
    }/** to mark where one is in the nav bar **/
#snav {
    float: left;
    width: 70px;
    border: black 1px solid;
    margin: 50px 0px 20px 10px;
    text-align: center;
    background-color: rgba(207,209,210,1);
    }/** setting up horizontal side bar nav for learning page given its expected length for quick movement. may benefit from moving
      * with the page but ill get to that if it feels necessary later **/
#snav ul{
    list-style-type: none;
    margin: 0px;
    padding: 3px;
    }
#snav li {
    border: black 2px solid;
    padding: 0px 0px
    }
.news {
    border: black 1px solid;
    float: left;
    background-color: rgba(207,209,210,1);
    padding: 10px 30px;
    margin: 10px 85px;
    width: 200px;
    text-align: center;
    height: 300px;
    border-radius: 5px
    }/** reading section variant 1, for 2 rows, 3 columns **/
.event {
    border: black 3px solid;
    float: left;
    background-color: rgba(207,209,210,1);
    padding: 10px 25px;
    margin: 10px 85px;
    width: 200px;
    text-align: center;
    border-radius: 5px
    } /** reading section variant 2, for 1 row, 3 columns **/
.read {
    margin: 10px auto;
    width: 900px;
    text-align: left
    }/** just some style to ease the eyes, can be removed if unwanted in final version **/
.res {
    border: black 1px solid;
    float: left;
    background-color: rgba(207,209,210,1);
    padding: 10px 30px;
    margin: 10px 180px;
    width: 200px;
    text-align: center;
    height: 290px;
    border-radius: 5px
    }/** reading section variant 3, for 1 row, 2 columns **/