body {
        background-color: rgb(139, 146, 76);
        color: rgb(0, 0, 0);
        padding: 30px;
        font-family: roboto, verdana, sans-serif;
        margin: default;
     }

     h1, h2, h3 {
      font-family: montserrat, arial, sans-serif;
     }

     .sectitle {
        border-bottom: 2px solid rgb(240, 154, 33);
        margin-bottom: -7px;
        border-radius: 1px;
     }

     .jobtitle {
        margin-bottom: -13px;
     }

     header h1 {
        font-size: 50px;
     }

     a:link, a:active, a:visited {
      text-decoration: none;
      color: inherit;
     }

     a:hover {
      color: hotpink;
     }

     

     /*flexbox start*/
     header {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: center;
        background-image: url(photos/AdobeStock_298439186optimized.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
        border: solid 3px black;
        border-radius: 15px;
     }

     #picandname {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: space-evenly;
        width: 40em;
     }

     #contact {
        flex-direction: column;
        justify-content: flex-start;
        padding: 10px 15px;
        font-variant: small-caps;
        font-weight: bold;
     }

     #headshot {
        border-radius: 50%;
        max-width: 20%;
        height: auto;
        padding: 10px 15px;
     }

     #jobs {
        display: flex;
        flex-flow: row wrap;
     }

     #job1,
     #job2,
     #job3,
     #job4 {
        flex: 50%;
     }

     /* flexbox end */

     
     /* ipads */
     @media (max-width: 1080px) {
        header {
         background-size: cover;
        }
     }
     /* phones */
     @media (max-width: 768px) {

        #job1,
        #job2,
        #job3,
        #job4 {
           flex: 100%;
        }

        #picandname {
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           width: 30em;
        }

        #contact {
           flex-direction: column;
           justify-content: center;
           align-items: center;
           width: 20em;
        }

        #headshot {
           border-radius: 50%;
           max-width: 40%;
           height: auto;
           padding: 5px;
        }

        header {
         background-size: cover;
         background-position: top;
        }

     }