@media only screen and (max-width: 550px) {
            div.name, div.about, div.works {
                width: 100%
            }
            div.works {
                margin: 5rem 0 0 0;
            }
            div.about p {
                max-width: 400px;
            }
            div.about p.top {
                 text-align: center;
            }
            div.about span {
                margin: 0 0 5.5rem 0;
                display: block;
            }
            div.name {
                top: 0px;
                position: fixed;
                padding: 1rem 0 0 0;
            }
            div.profile img {
                width: 100%;
            }
            div.name h1 {
                padding: 0.4rem 0 0 2rem;
                float: left;
                width: fit-content;
            }
            div.name a {
                float: right;
                width: fit-content;
                padding: 1.5rem 3rem 0 0;
            }
            div.name a.top {
                float: left;
                padding: 0;
            }
            div.name {
                text-align: left;
                height: 4.5rem;
            }
            div.name p {
                display: none;
            }
            .cards {
                display: inline-table;
            }
            .cards h2 {
                margin: 0 1rem;
                padding: 3rem 0 0 0;
            }
            .works, .about, .footer {
/*                overflow: hidden;*/
            }
        
/* Custom Mobile CSS */
    
            body {
              margin: 0;
            /*
              font-family: Helvetica, sans-serif;
              background-color: #f4f4f4;
            */
            }

            a {
              color: #000;
            }

            /* header */

            .header {
              background-color: #fff;
              box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
              position: fixed;
              width: 100%;
              z-index: 3;
            }

            .header ul {
              margin: 0;
              padding: 0;
              list-style: none;
              overflow: hidden;
              background-color: #fff;
            }

            .header li a {
              display: block;
              padding: 20px 20px;
              border-right: 1px solid #f4f4f4;
              text-decoration: none;
            }

            .header li a:hover,
            .header .menu-btn:hover {
              background-color: #f4f4f4;
            }

            .header .logo {
              display: block;
              float: left;
              font-size: 2em;
              padding: 10px 20px;
              text-decoration: none;
            }

            /* menu */

            .header .menu {
              clear: both;
              max-height: 0;
              transition: max-height .2s ease-out;
            }

            /* menu icon */

            .header .menu-icon {
              cursor: pointer;
              display: inline-block;
              float: right;
              padding: 28px 20px;
              position: relative;
              user-select: none;
            }

            .header .menu-icon .navicon {
              background: #333;
              display: block;
              height: 2px;
              position: relative;
              transition: background .2s ease-out;
              width: 18px;
            }

            .header .menu-icon .navicon:before,
            .header .menu-icon .navicon:after {
              background: #333;
              content: '';
              display: block;
              height: 100%;
              position: absolute;
              transition: all .2s ease-out;
              width: 100%;
            }

            .header .menu-icon .navicon:before {
              top: 5px;
            }

            .header .menu-icon .navicon:after {
              top: -5px;
            }

            /* menu btn */

            .header .menu-btn {
              display: none;
            }

            .header .menu-btn:checked ~ .menu {
              max-height: 240px;
            }

            .header .menu-btn:checked ~ .menu-icon .navicon {
              background: transparent;
            }

            .header .menu-btn:checked ~ .menu-icon .navicon:before {
              transform: rotate(-45deg);
            }

            .header .menu-btn:checked ~ .menu-icon .navicon:after {
              transform: rotate(45deg);
            }

            .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
            .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
              top: 0;
            }
    
            .container, div.about p {
                padding: 0 3rem 1rem 3rem;
            }

            /* 48em = 768px */

            @media (min-width: 48em) {
              .header li {
                float: left;
              }
              .header li a {
                padding: 20px 30px;
              }
              .header .menu {
                clear: none;
                float: right;
                max-height: none;
              }
              .header .menu-icon {
                display: none;
              }
            }
}