*{
    margin: 0;
    padding: 0;
    box-sizing:border-box;
  }
  body {
    font-family: Helvetica, Arial, sans-serif;
    background-color: rgb(74, 93, 119);
    
  }
  .header-class{
    padding: 35px 35px; 
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    background-image: url("./images/header-image.jpg");
  }
.hero-image {
    display: flex;
    background-image: url("./images/hero-portfolio-img.jpg");
    width: 100%;
    align-items: flex-end;
}
.me {
    height: 250px;
    width: 240px;
}
.flex-sections {
    display: flex;
    width: 80%;
    margin: 30px auto;
    padding-bottom: 50px;
    flex-direction: row;
    flex-wrap: wrap;
  }
.hero-image h3 {
    margin-left: auto;
    margin-bottom: 15px;
    margin-right: 10px;
    color: #FFF;
    border: 0.5px;
    background-color: black;
   
}
.flex-list{
    display:flex;
    list-style-type: none;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    color: rgb(100, 130, 160);
}
.flex-list li{
    margin-right: 10px;
}
.work-grid-container{
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 5px;
    justify-content: space-between;
}
  .work-grid-container > div {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: bottom;
    padding: 20px 0px;
    font-size: 30px;
  }
  .item1 {
    background-image: url("./images/run-buddy.jpg");
    grid-area: 1 / 1 / 3 / 3;
    background-size: 100%;
  }
  .item2 {
      background-image: url("./images/led-wall.jpg");
    background-size:100%;
  }
  .item3 {
      background-image: url("./images/surf-report.jpg");
      background-size:100%;
    
  }
  .item4 {
      background-image: url("./images/Work-Day-Scheduler.PNG");
      background-size:100%;
      
  }
  .item5 {
      background-image: url("./images/my-portfolio.png");
      background-size:100%;
     
  }
  .grid-item {
    padding: 5px;
    margin: 5px;
    border: 2px solid rgb(100, 130, 160);
    background-position: center;
}
  .work-grid-container .grid-item p {
      font-size: 12px;
    
  }
    .contact-info li a {
        text-decoration: none;
        color: dodgerblue;
        border-bottom: 2px solid rgb(100, 130, 160);
    }
  .header-2 {
      border-right: 3px solid rgb(100, 130, 160);
      margin-right: 30px;
      padding-right: 30px;
      flex-wrap: wrap;
      flex: 2;
      margin-left: auto;
      text-align: right;
  }
  .section-description {
      flex: 5;
  }
  .grid-item a{
      text-decoration: none;
  }

  @media screen and (max-width: 980px){
    .header-class {
        justify-content: center;
    }
    .hero-image h3{
        margin: 0px;
    }
    .work-grid-container{
        grid-template-columns: 1fr;
    }
    .item1{
        grid-area: auto;
    }
    .grid-item{
        margin:0px;
    }
 
    p {
        font-size: 1.4rem;
        text-align: center;
    }
    .header-class h1 {
        width: 100%;
        text-align: center;
    }
    .header-class .flex-list {
      margin-top: 20px;
      width: 100%;
      justify-content: center;
    }
    .header-class .flex-list a{
        font-size: 20px;

    }
    .section-description .grid-item {
        width: 100%;
    }
    .flex-work {
        width: 100%;
    }
    .work-grid-container {
        width: 100%;
    }

}
@media screen and (max-width: 768px){

  body{
      background-color: #222;
  
      
  }
  .header-class h3{
      text-align: center;
  }
  .section-description .contact-info a {
      width: 100%;
      display: block;
      font-size: 24px;
  }
  .flex-sections {
      display: block;
      width: 100%;
  }
  .header-2 {
      border-right: none;
      text-align: center;
      text-decoration: underline;
      color: rgb(100, 130, 160);
      margin-right: 0;
  }

  
  .hero-image h3 {
      justify-content: center;
      align-items: center;
      text-align:center;

  }
  .section-description p{
    font-size: 12px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    overflow:hidden;

}

}
@media screen and (max-width: 575px){
    body {
        font-size: 25px;
        width: 100vw;
        background-color: #555;
      
        }
    .hero-image .me {
        width: 100%;
        clear: both;
        flex: 100%;
    }
    .hero-image{
        flex-wrap: wrap;
        display: flex;
    }
    .hero-image h3{
        flex: 100%;
    }
    }

    .contact-info{
        display:block;
    }