project1.css

#wrapper {
    width: 1024px;
    margin-left:auto;
    margin-right:auto;
    box-shadow:5px 5px 5px #1e1e1e;
    background-color:#212529;}

nav {
    float:left;
    width:250px;
    padding:0;}

main {
    margin-left:250px;
    background-color:#DEE2E6;
    padding-top:5px;
    padding-left:5px;
    align-content: center;}

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

nav a {
    text-decoration:none;
    display:block;
    padding:20px;
    background-color:#6C757C;
    color:#DEE2E6;
    font-weight:bold;
    border-bottom: 1px solid #DEE2E6;
    background-image: url(../Images/sprites.gif);
    background-repeat:no-repeat;
    background-position: right 0;}

nav a:link {
    color:#f2f2f2;}
    
nav a:visited {
    color:black;}
    
nav a:hover {
    color: #0000ff;
    background-color:#eaeaea;
    background-position:right -100px;}

dt {
    font-weight:bolder;}

dd {
    font-style:italic;}

.years {
    font-weight:bold;
    font-style:italic;}

footer {
    padding:5px;
    color:#DEE2E6;
    font-weight:lighter;}

table {
    border:5px solid black;
    width: 80%;
    margin:auto;}

th {font-size:large;
    text-align:left}

td {font-size:small;
    text-align:left;}

ol {font-weight:bold;}


    @media only screen and (max-width: 1024px) {
        main {
            margin-left: 0;}
        nav {
            float:none;
            width:auto;
            text-align:center;}
        body { 
            margin:0;}
        #wrapper {
            width:auto;}
        h1,h2 {
            font-size: 150%;}
        p {
            font-size:90%;}
        img {
            width:300px;
            margin-left:auto;
            margin-right:auto;
            display:block;}
    }
    
    @media only screen and (max-width: 768px) {
        main { 
            margin-right: 0;}
        aside {
            float:none;
            width:auto;
            text-align:center;}
        h1,h2 {
            font-size: 120%;}
        p {
            font-size:80%;}
        img {
            width:200px;}
    }