* {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
  }
  
  .nav {
    width: 100%;
    height: 60px;
    background-color: #DB7654;
    padding: 10px;
    position: sticky;
    top: 0px;
    z-index:2;
  }



    h1{
        color: #DB7654;
        text-align: center;
        padding: 5%;
        /* padding-bottom: 15%; */
        font-family: 'Dangrek', cursive;
    }

    h3{
      text-shadow: 2px 2px #838383;
    }

    .container{
      z-index:1;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: repeat(4, 1fr);
      grid-column-gap: 0px;
      grid-row-gap: 0px;

      align-items: center;
      justify-items: center;
    }

    p{
      color: gray;
    }

    /* justin-part  */
    .item-pic-j{
      scale: 80%;
      grid-area: 1 / 3 / 2 / 5;;
    }
    #pic-j:hover{
      transform:rotate(25deg);
    }
    .item-info-j{
      grid-area: 1 / 8 / 2 / 11;
    }

    .item-info-j div{
      position: relative;
    }
/* 
    .item-info-j div h3{
      position: absolute;
      top: 7.5%;
      left: 25%;
    } */


     /* morris-part  */
     .item-pic-m{
      scale: 80%;
      grid-area: 2 / 3 / 3 / 5;
    }
    #pic-m:hover{
      transform:rotate(-25deg);
    }
    .item-info-m{
      grid-area: 2 / 8 / 3 / 11; 
    }

    .item-info-m div{
      position: relative;
    }
/* 
    .item-info-m div h3{
      position: absolute;
      top: 7.5%;
      left: 25%;
    } */

     /* victor-part  */
     .item-pic-v{
      scale: 80%;
      grid-area: 3 / 3 / 4 / 5; 
    }

    #pic-v:hover{
      transform:rotate(25deg);
    }

    .item-info-v{
      grid-area: 3 / 8 / 4 / 11;
    }

    .item-info-v div{
      position: relative;
    }
/* 
    .item-info-v div h3{
      position: absolute;
      top: 7.5%;
      left: 25%;
    }
 */
     /* yui-part  */
     .item-pic-y{
      scale: 80%;
      grid-area: 4 / 3 / 5 / 5;
    }
    #pic-y:hover{
      transform:rotate(-25deg);
    }
    .item-info-y{
      grid-area: 4 / 8 / 5 / 11;
      
    }

    .item-info-y div{
      position: relative;
    }
/* 
    .item-info-y div h3{
      position: absolute;
      top: 7.5%;
      left: 25%;
    }
     */

/* centring the all the dog name into the img */
    .title h3 {
      width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      text-align: center;
}