/* This is the main area, like the database table */
main {
    margin: 0;
    padding: .5em 2em .35em;
}
/* This is the actual table of information */
table {
    background-color: white;
    border: 2px solid black;
    border-collapse: collapse;
}
td, th {
    border: 1px solid black;
    padding: .4em .4em .4em .4em;
    text-align: center;
}


/* this will set the font and background */
html {
    background-color: #f8f6f5;    
    font-family: Arial, Helvetica, sans-serif;
}
body {
    margin-top: 0;
    font-family: Arial, Helvetica, sans-serif;
    width: 80%;
    margin: 0 auto;
    background-color: white;
}


@media screen and (min-width: 50em) {
    /*This is my resume*/
    
    #resume {
        text-align: center;
    }
    /* This is the navigation bar */
    nav {
        position: fixed;
        top: 0;
        width: 100%;
        height: 0;

    }


    #links {
        text-align: center;
        background-color: #a3aa83;

    }

    #links ul {
        width: 90%;
        height: auto;
        padding: 9px 0px;
        margin: 0px;
    }

    #links li {   
        display: inline; 
        padding: 9px; 

    }

    #links a {    
        padding: 8px 8px 8px 8px;
        font-weight: bold;
        color: black;
        display: inline;
        text-decoration: none;

    }

    #links a:hover, a:active {
        background-color: #e4dad3;
    }
}
@media screen and (min-width: 0em) and (max-width: 50em) {
    li {
        list-style-type: none;
    }

    #links {
        float: right; 

    }

    #links a:link, a:visited {
        display: inline-block;
        font-weight: bold;
        color: black;
        background-color: #a3aa83;
        width: 9em;
        text-align: center;
        padding: 4px;
        text-decoration: none;    
    }

    #links a:hover {
        background-color: #e4dad3;
        color: #000000;
    }
}