* {-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box; box-sizing:
    border-box; }

    /* body rules here */
    body {
        font-family: Verdana;
        font-size: 16px;
    }

    /* header rules here */
    header {
        background-color: #dbc14b;
        padding: 1rem 2%;
    }

    header h1 {
            margin: 0;
    }

    header h2 {
            margin: 0;
    }

    /* navigation rules here */
    nav {background-color: #111;}
    nav ul {margin: 0; padding: 0;}
    nav li {list-style-type: none;}
    nav li.active {background-color: #333;}

    nav a {
        display: block;
        padding: .8rem 0; /* 44 min height */
        color: #eee;
        text-align: center;
        text-decoration: none;
    }
    nav a:hover {background-color: rgb(247, 139, 17);}

    /*main rules here */
    main {
        padding: 1rem 2%;
        display: block;
    }

    main h1 {color: #ee8206;}

    main figure img {width: 100%;}
    main figure{
        width: 100%;
        margin: 0;
    }
    main figcaption {text-align: center; font-size: 
        .8rem;}

    footer {
        text-align: center;
        padding: 1rem 2%;
        background-color:#dbc14b;
    }    

    .clearfix::after{
        content: "";
        display: table;
        clear: both;
    }