@media screen and (max-width: 549px) {
     .nav {
         z-index: 10;
         background-color: #fff;
         width: 300px;
         position: absolute;
        /* This trasform moves the drawer off canvas. */
         transform: translate(-310px, 0);
        /* Optionally, we animate the drawer. */
         transition: transform 1s ease;
    }

     .nav.open {
         transform: translate(0, 0);
    }

     .nav-item {
         display: list-item;
         border-bottom: 1px solid #7d97ad;
         width: 100%;
         text-align: left;
    }

     .header-menu {
         display: inline-block;
         position: absolute;
         margin-top: 0;
         right: 10px;
         padding: 0;
    }

     .header-menu svg {
         width: 32px;
         fill: gray;
    }

     .header-text {
         margin-top: 20px;
    }

     .udacity-logo {
         margin-top: 40px;
    }

     .facebook,
     .twitter,
     .instagram {
         display: block;
         margin-top: 25px;
         margin-left: auto;
         font-weight: bold;
    }

     #about-heading,
     #featured-work-heading {
         margin-left: 5px;
    }

}
 @media screen and (min-width: 550px) {
     .appify,
     .sunflower,
     .bookeh {
         margin-left: 0;
         margin-right: 10px;
         width: calc((100% - 20px)/3);
    }

     .bookeh {
         margin-right: 0;
    }

     .nav-item {
         font-weight: bold;
    }

     .facebook,
     .twitter,
     .instagram {
         display: inline-block;
         margin-left: 40px;
    }

}
 @media screen and (min-width: 800px) {
     main,
     .header-section,
     .nav,
     .project-content {
         width: 700px;
         margin-left: auto;
         margin-right: auto;
    }
}