html {
    height: 100%;
    width: 100%;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-family: 'Poppins', sans-serif;
    font-family: 'Roboto', sans-serif;
    background-color: cornsilk;
    color: royalblue;
    padding: 0;

    /* REI'S FIX */
    /* since the nav is fixed, i added padding to the top of the body 
    to make sure it doesn't get hidden behind the nav */
    padding-top: 160px;
    margin: 0;
}

section,
header {
    padding-left: 2%;
}

/*---- CSS to control the navigation bar --- 
Requirements for the navigation:
- Navigation should all be on one line only and located on the first line of the browser and will not scroll with the rest of the content.  
- There should also a hover effect on each of the links to change background and foreground color.
*/
nav {
    width: 100%;
    background-color: #333;
    /* REI'S FIX */
    top: 0;
    left: 0;
    z-index: 1000;
    position: fixed;
    /* since it needed to be fixed i added position: fixed 
    and z-index to make sure it is on top of the other elements */

    /*the rest makes sure that it's one line and
     stretches across the top of the page */
}

nav a {
    /* REI'S FIX */
    /* it needed to be all on one line only, 
    so inline block makes sure of that  */
    display: inline-block;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
}


/* REI'S FIX */
nav a:hover {
    /* removed space so the hover would work */
    background-color: #ddd;
    color: black;
}

/*------ to control coordinatePlane, the location of the small red box  --------*/
#coordinatePlane {
    position: relative;
    height: 400px;
    width: 400px;
    border: 1px solid black;
}

.point {
    height: 10px;
    width: 10px;
    background-color: red;

    /* REI'S FIX */
    /* this moves based on the js kanina, which was the left and bottom coords */
    position: absolute;
}

.axis {
    position: absolute;
    background-color: black;
}

#xAxis {
    left: 0;
    top: 200px;
    width: 100%;
    height: 1px;
}

#yAxis {
    left: 200px;
    bottom: 0;
    width: 1px;
    height: 100%;
}

/* ----- CSS properties for footer tag to display socmed icons facebook, twitter and github using sprites ---
- Discover how to use image sprites to make this work
*/
footer {
    width: 100%;
    background-color: white;
    color: #333;
    text-align: center;
    padding: 10px 0;
}

footer a {
    text-decoration: none;
}

.icon {
    width: 32px;
    height: 32px;
    display: inline-block;
    background: url('images/sprites.png') no-repeat;
}

.facebook {
    background-position: -226px -129px;
}

.twitter {
    background-position: -340px -129px;
}

.github {
    background-position: -456px -129px;
}

.facebook:hover {
    background-position: -226px -55px;
}

.twitter:hover {
    background-position: -340px -54px;
}

.github:hover {
    background-position: -456px -54px;
}

/* --- CSS for documenting process in the table in the errorlogs.html --*/
table {
    border-collapse: collapse;
}

th,
td,
tr {
    padding: 5px;
    border: 1px solid #333;
}

.rColor {
    background-color: navy;
    color: white;
}