/*----------------- 360 * 640----------about------------------*/
/*----------------- 360 * 640----------about------------------*/
/*----------------- 360 * 640----------about------------------*/

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

  .div3 {
    grid-template: repeat(13, 1fr) / repeat(4, 1fr);
  }

  .div3 .nav2 {
    display: none;
  }

  /*----- 360 * 640-----*/

  .header {
    height: 52px;
  }

  .header ul a {
    font-size: 1em;
  }

  .header img.logo {
    width: 20px;
    height: 32px;
  }

  .header .menu-icon .nav-icon {
    height: 3px;
    width: 30px;
  }

  .header .menu-icon .nav-icon:before {
    top: 10px;
  }

  .header .menu-icon .nav-icon:after {
    top: -10px;
  }

  /*----- 360 * 640-----*/

  .div3 .a2 {
    /*About Me*/
    grid-area: 3 / 2 / 3 / span 2;
    justify-content: center;
    margin-top: 30%;
  }

  .div3 .a3 {
    /*intro*/
    grid-area: 4 / 2 / 4 / span 3;
    justify-content: center;
  }

  .div3 .a4 {
    /*projects*/
    grid-area: 5 / 2 / 5 / span 1;
    justify-content: center;
  }

  .div3 .a5 {
    /*app design*/
    grid-area: 6 / 2 / 6 / span 2;
  }

  .div3 .a7 {
    /*plate*/
    grid-area: 7 / 2 / 7 / span 2;
  }

  .div3 .a8 {
    /*the nutritive...*/
    grid-area: 8 / 1 / 8 / span 4;
  }

  .div3 .a9 {
    /*button view*/
    grid-area: 9 / 2 / 9 / span 2;
  }

  .div3 .a6 {
    /*graphic design*/
    grid-area: 10 / 2 / 10 / span 2;
  }

  .div3 .a10 {
    /*picture jaffa*/
    grid-area: 11 / 2 / 11 / span 2;
  }

  .div3 .a11 {
    /*jaffa clock...*/
    grid-area: 12 / 1 / 12 / span 4;
  }

  .div3 .a12 {
    /*button view*/
    grid-area: 13 / 2 / 13 / span 2;
  }

  /*----- 360 * 640-----*/

  .a2 h4 {
    /*About Me*/
    font-size: .1.25em;
    line-height: 1.25em;
  }

  .a3 p.intro {
    /*intro*/
    font-size: 0.75em;
    line-height: 1.25em;
  }

  .a4 h4 {
    /*projects*/
    font-size: .1.25em;
    line-height: 1.25em;
  }

  .a5 h5.app {
    /*app design*/
    font-size: 0.75em;
    line-height: 1em;
  }

  .a6 h5.graph {
    /*graphic design*/
    font-size: 0.75em;
    line-height: 1em;
  }

  .a7 .plate {
    /*plate*/
    height: 100px;
    width: 100px;
  }

  .a8 h3.title {
    /*the nutritive...*/
    font-size: 0.75em;
    line-height: 1em;
  }

  .a11 h3.title {
    /*jaffa clock...*/
    font-size: 0.75em;
    line-height: 1em;
  }

  .a10 .clock {
    height: 100px;
    width: 100px;
  }

  .a9,
  .a12,
  .view {
    width: 120px;
    height: 20px;
  }

  .a9,
  .a12,
  .btn {
    font-size: 0.75em;
  }
}

/*---------------about------430*932px----------*/
/*---------------about------430*932px----------*/
/*---------------about------430*932px----------*/

@media screen and (min-width: 361px) and (max-width: 430px) {

  .div3 {
    grid-template: repeat(13, 1fr) / repeat(4, 1fr);
  }

  .div3 .nav2 {
    display: none;
  }

  /*----- 430*932px -----*/

  .header {
    height: 60px;
  }

  .header ul a {
    font-size: 1.25em;
  }

  .header img.logo {
    width: 25px;
    height: 40px;
  }

  .header .menu-icon .nav-icon {
    height: 4px;
    width: 35px;
  }

  .header .menu-icon .nav-icon:before {
    top: 15px;
  }

  .header .menu-icon .nav-icon:after {
    top: -15px;
  }

  /*----- 430*932px -----*/

  .div3 .a2 {
    /*About Me*/
    grid-area: 3 / 2 / 3 / span 2;
    justify-content: center;
  }

  .div3 .a3 {
    /*intro*/
    grid-area: 4 / 2 / 4 / span 3;
    justify-content: center;
  }

  .div3 .a4 {
    /*projects*/
    grid-area: 5 / 2 / 5 / span 1;
    justify-content: center;
  }

  .div3 .a5 {
    /*app design*/
    grid-area: 6 / 2 / 6 / span 2;
  }

  .div3 .a7 {
    /*plate*/
    grid-area: 7 / 2 / 7 / span 2;
  }

  .div3 .a8 {
    /*the nutritive...*/
    grid-area: 8 / 1 / 8 / span 4;
  }

  .div3 .a9 {
    /*button view*/
    grid-area: 9 / 2 / 9 / span 2;
  }

  .div3 .a6 {
    /*graphic design*/
    grid-area: 10 / 2 / 10 / span 2;
  }

  .div3 .a10 {
    /*picture jaffa*/
    grid-area: 11 / 2 / 11 / span 2;
  }

  .div3 .a11 {
    /*jaffa clock...*/
    grid-area: 12 / 1 / 12 / span 4;
  }

  .div3 .a12 {
    /*button view*/
    grid-area: 13 / 2 / 13 / span 2;
  }

  /*----- 430*932px -----*/

  .a2 h4 {
    /*About Me*/
    font-size: 1.25em;
    line-height: 1.25em;
  }

  .a3 p.intro {
    /*intro*/
    font-size: 1em;
    line-height: 1.25em;
  }

  .a4 h4 {
    /*projects*/
    font-size: 1.25em;
    line-height: 1.25em;
  }

  .a5 h5.app {
    /*app design*/
    font-size: 1em;
    line-height: 1em;
  }

  .a6 h5.graph {
    /*graphic design*/
    font-size: 1em;
    line-height: 1em;
  }

  .a7 .plate {
    /*plate*/
    height: 100px;
    width: 100px;
  }

  .a8 h3.title {
    /*the nutritive...*/
    font-size: 1em;
    line-height: 1em;
  }

  .a11 h3.title {
    /*jaffa clock...*/
    font-size: 1em;
    line-height: 1em;
  }

  .a10 .clock {
    height: 100px;
    width: 100px;
  }

  .a9,
  .a12,
  .view {
    width: 120px;
    height: 20px;
  }

  .a9,
  .a12,
  .btn {
    font-size:0.75em;
  }
}

/*---------------about------- 744*1133 ---------*/
/*---------------about------- 744*1133 ---------*/
/*---------------about------- 744*1133 ---------*/

@media screen and (min-width: 431px) and (max-width: 744px) {

  .div3 {
    grid-template: repeat(13, 1fr) / repeat(4, 1fr);
  }

  .div3 .nav2 {
    display: none;
  }

  /*----- 744*1133 -----*/

  .header {
    height: 68px;
  }

  .header ul a {
    font-size: 1.5em;
  }

  .header ul a:hover {
    background-color: #b5a69a;
  }

  .header img.logo {
    width: 30px;
    height: 48px;
  }

  .header .menu-icon .nav-icon {
    height: 5px;
    width: 40px;
  }

  .header .menu-icon .nav-icon:before {
    top: 20px;
  }

  .header .menu-icon .nav-icon:after {
    top: -20px;
  }

  /*----- 744*1133 -----*/

  .div3 .a2 {
    /*About Me*/
    grid-area: 3 / 2 / 3 / span 2;
  }

  .div3 .a3 {
    /*intro*/
    grid-area: 4 / 2 / 4 / span 3;
    justify-content: center;
  }

  .div3 .a4 {
    /*projects*/
    grid-area: 5 / 2 / 5 / span 2;
  }

  .div3 .a5 {
    /*app design*/
    grid-area: 6 / 2 / 6 / span 2;
  }

  .div3 .a7 {
    /*plate*/
    grid-area: 7 / 2 / 7 / span 2;
  }

  .div3 .a9 {
    /*button view plate*/
    grid-area: 9 / 2 / 9 / span 2;
  }

  .div3 .a6 {
    /*graphic design*/
    grid-area: 10 / 2 / 10 / span 2;
  }

  .div3 .a8 {
    /*the nutritive...*/
    grid-area: 8 / 1 / 8 / span 4;
    justify-content: flex-start;
  }

  .div3 .a10 {
    /*picture jaffa*/
    grid-area: 11 / 2 / 11 / span 2;
  }

  .div3 .a11 {
    /*jaffa clock...*/
    grid-area: 12 / 1 / 12 / span 4;
    justify-content: flex-start;
  }

  .div3 .a12 {
    /*button view clock*/
    grid-area: 13 / 2 / 13 / span 2;
  }

  /*----- 744*1133 -----*/

  .a2 h4 {
    /*About Me*/
    font-size: 1.5em;
  }

  .a3 p.intro {
    /*intro*/
    font-size: 1.25em;
    line-height: 1.25em;
  }

  .a4 h4 {
    /*projects*/
    font-size: 1.5em;
  }

  .a5 h5.app {
    /*app design*/
    font-size: 1.25em;
    line-height: 1.25em;
  }

  .a6 h5.graph {
    /*graphic design*/
    font-size: 1.25em;
  }

  .a7 .plate {
    /*plate*/
    height: 125px;
    width: 125px;
  }

  .a8 h3.title {
    /*the nutritive...*/
    font-size: 1.25em;
  }

  .a11 h3.title {
    /*jaffa clock...*/
    font-size: 1.25em;
  }

  .a10 .clock {
    height: 125px;
    width: 125px;
  }

  .a9,
  .a12,
  .view {
    width: 150px;
    height: 30px;
  }

  .a9,
  .a12,
  .btn {
    font-size: 1em;
  }
}

/*-------------about----------- 1024*1366 ----------*/
/*-------------about----------- 1024*1366 ----------*/
/*-------------about----------- 1024*1366 ----------*/

@media screen and (min-width: 745px) and (max-width: 1024px) {

  .div3 {
    grid-template: repeat(8, 1fr) / repeat(7, 1fr);
  }

  .header {
    display: none;
  }

  .div3 .nav2 {
    grid-area: 1 / 1 / 1 / span 7;
    height: 68px;
  }

  .div3 .a0 {
    /*logi*/
    grid-area: 1 / 1 / 1 / span 1;
  }

  .a0 img.logi {
    width: 30px;
    height: 48px;
  }

  .div3 .a1 {
    /*nav*/
    grid-area: 1 / 5 / 1 / span 2;
  }

  ul li {
    font-size: 1.5em;
  }

  /*-----about----- 1024*1366 -----*/

  .div3 .a2 {
    /*About Me*/
    grid-area: 2 / 2 / 2 / span 2;
  }

  .div3 .a3 {
    /*intro*/
    grid-area: 3 / 2 / 3 / span 4;
  }

  .div3 .a4 {
    /*projects*/
    grid-area: 4 / 2 / 4 / span 2;
  }

  .div3 .a5 {
    /*app design*/
    grid-area: 5 / 2 / 5 / span 2;
    align-self: flex-start;
  }

  .div3 .a6 {
    /*graphic design*/
    grid-area: 5 / 5 / 5 / span 2;
    align-self: flex-start;
  }

  .div3 .a7 {
    /*plate*/
    grid-area: 6 / 2 / 6 / span 2;
  }

  .div3 .a8 {
    /*the nutritive...*/
    grid-area: 7 / 1 / 7 / span 4;
  }

  .div3 .a9 {
    /*button view*/
    grid-area: 8 / 2 / 8 / span 2;
  }

  .div3 .a10 {
    /*picture jaffa*/
    grid-area: 6 / 5 / 6 / span 2;
  }

  .div3 .a11 {
    /*jaffa clock...*/
    grid-area: 7 / 4 / 7 / span 4;
  }

  .div3 .a12 {
    /*button view*/
    grid-area: 8 / 5 / 8 / span 2;
  }

  /*-----about----- 1024*1366 -----*/

  .a2 h4 {
    /*about*/
    font-size: 1.5em;
  }

  .a3 p.intro {
    font-size: 1.25em;
    line-height: 1.25em;
  }

  .a4 h4 {
    /*projects*/
    font-size: 1.5em;
  }

  .a5 h5.app {
    font-size: 1.5em;
    line-height: 1.5em;
  }

  .a6 h5.graph {
    font-size: 1.5em;
    line-height: 1.5em;
  }

  .a7 .plate {
    height: 175px;
    width: 175px;
  }

  .a8 h3.title {
    font-size: 1em;
    line-height: 1em;
  }

  .a9 .view {
    font-size: 1.25em;
    width: 150px;
    height: 30px;
  }

  .a12 .view {
    font-size: 1.25em;
    width: 150px;
    height: 30px;
  }

  .a11 h3.title {
    font-size: 1em;
    line-height: 1em;
  }

  .a10 .clock {
    height: 175px;
    width: 175px;
  }
}

/*-------------about----------1280*832------*/
/*-------------about----------1280*832------*/
/*-------------about----------1280*832------*/

@media screen and (min-width: 1025px) and (max-width: 1280px) {

  .div3 {
    grid-template: repeat(8, 1fr) / repeat(7, 1fr);
  }

  .header {
    display: none;
  }

  .div3 .nav2 {
    grid-area: 1 / 1 / 1 / span 7;
    height: 76px;
  }

  .div3 .a0 {
    /*logi*/
    grid-area: 1 / 1 / 1 / span 1;
  }

  .a0 img.logi {
    width: 35px;
    height: 56px;
  }

  .div3 .a1 {
    /*nav*/
    grid-area: 1 / 5 / 1 / span 2;
  }

  ul li {
    font-size: 1.5em;
  }


  /*----- 1280*832 -----*/

  .div3 .a2 {
    /*About Me*/
    grid-area: 2 / 2 / 2 / span 2;
  }

  .div3 .a3 {
    /*intro*/
    grid-area: 3 / 2 / 3 / span 4;
  }

  .div3 .a4 {
    /*projects*/
    grid-area: 4 / 2 / 4 / span 2;
  }

  .div3 .a5 {
    /*app design*/
    grid-area: 5 / 2 / 5 / span 2;
    align-self: flex-start;
  }

  .div3 .a6 {
    /*graphic design*/
    grid-area: 5 / 5 / 5 / span 2;
    align-self: flex-start;
  }

  .div3 .a7 {
    /*plate*/
    grid-area: 6 / 2 / 6 / span 2;
  }

  .div3 .a8 {
    /*the nutritive...*/
    grid-area: 7 / 1 / 7 / span 4;
  }

  .div3 .a9 {
    /*button view*/
    grid-area: 8 / 2 / 8 / span 2;
  }

  .div3 .a10 {
    /*picture jaffa*/
    grid-area: 6 / 5 / 6 / span 2;
  }

  .div3 .a11 {
    /*jaffa clock...*/
    grid-area: 7 / 4 / 7 / span 4;
  }

  .div3 .a12 {
    /*button view*/
    grid-area: 8 / 5 / 8 / span 2;
  }


  /*----- 1280*832 -----*/

  .a2 h4 {
    /*about*/
    font-size: 1.5em;
    line-height: 1.5em;
  }

  .a3 p.intro {
    font-size: 1.25em;
    line-height: 1.25em;
  }

  .a4 h4 {
    /*projects*/
    font-size: 1.5em;
    line-height: 1.5em;
  }

  .a5 h5.app {
    font-size: 1.5em;
    line-height: 1.5em;
  }

  .a6 h5.graph {
    font-size: 1.5em;
    line-height: 1.5em;
  }

  .a7 .plate {
    height: 175px;
    width: 175px;
  }

  .a8 h3.title {
    font-size: 1.25em;
    line-height: 1.25em;
  }

  .a9 .view {
    font-size: 1.25em;
    width: 150px;
    height: 30px;
  }

  .a12 .view {
    font-size: 1.25em;
    width: 150px;
    height: 30px;
  }

  .a11 h3.title {
    font-size: 1.25em;
    line-height: 1.25em;
  }

  .a10 .clock {
    height: 175px;
    width: 175px;
  }
}

/*-----------about----------1440*1024--------*/
/*-----------about----------1440*1024--------*/
/*-----------about----------1440*1024--------*/

@media screen and (min-width: 1281px) and (max-width: 1440px) {

  .div3 {
    grid-template: repeat(7, 1fr) / repeat(5, 1fr);
  }

  .header {
    display: none;
  }

  .div3 .nav2 {
    grid-area: 1 / 1 / 1 / span 5;
    height: 76px;
  }

  .div3 .a0 {
    /*logi*/
    grid-area: 1 / 1 / 1 / span 1;
  }

  .a0 img.logi {
    width: 35px;
    height: 56px;
  }

  .div3 .a1 {
    /*nav*/
    grid-area: 1 / 3 / 1 / span 2;
  }

  ul li {
    font-size: 1.5em;
  }

  /*----- 1440*1024 -----*/

  .div3 .a2 {
    /*About Me*/
    grid-area: 2 / 2 / 2 / span 2;
  }

  .div3 .a3 {
    /*intro*/
    grid-area: 3 / 2 / 3 / span 4;
  }

  .div3 .a4 {
    /*projects*/
    grid-area: 4 / 2 / 4 / span 2;
  }

  .div3 .a5 {
    /*app design*/
    grid-area: 5 / 2 / 5 / span 1;
    align-self: flex-start;
  }

  .div3 .a6 {
    /*graphic design*/
    grid-area: 5 / 4 / 5 / span 1;
    align-self: flex-start;
  }

  .div3 .a7 {
    /*plate*/
    grid-area: 6 / 2 / 6 / span 1;
  }

  .div3 .a8 {
    /*the nutritive...*/
    grid-area: 7 / 1 / 7 / span 3;
  }

  .div3 .a9 {
    /*button view*/
    grid-area: 8 / 2 / 8 / span 1;
  }

  .div3 .a10 {
    /*picture jaffa*/
    grid-area: 6 / 4 / 6 / span 1;
  }

  .div3 .a11 {
    /*jaffa clock...*/
    grid-area: 7 / 3 / 7 / span 2;
    justify-self: center;
    margin-left: 40%;
    margin-right: -10%;
  }

  .div3 .a12 {
    /*button view*/
    grid-area: 8 / 4 / 8 / span 1;
  }

  /*----- 1440*1024 -----*/

  .a2 h4 {
    /*about*/
    font-size: 1.5em;
    line-height: 1.5em;
  }

  .a3 p.intro {
    font-size: 1.25em;
    line-height: 1.5em;
  }

  .a4 h4 {
    /*projects*/
    font-size: 1.5em;
    line-height: 1.5em;
  }

  .a5 h5.app {
    font-size: 1.25em;
    line-height: 1.25em;
  }

  .a6 h5.graph {
    font-size: 1.25em;
    line-height: 1.25em;
  }

  .a7 .plate {
    height: 175px;
    width: 175px;
  }

  .a8 h3.title {
    font-size: 1.25em;
    line-height: 1.25em;
  }

  .a9 .view {
    font-size: 1em;
    width: 150px;
    height: 30px;
  }

  .a12 .view {
    font-size: 1em;
    width: 150px;
    height: 30px;
  }

  .a11 h3.title {
    font-size: 1.25em;
    line-height: 1.25em;
  }

  .a10 .clock {
    height: 175px;
    width: 175px;
  }
}

/*--------1512*982--------------------------*/
/*--------1512*982--------------------------*/
/*--------1512*982--------------------------*/

@media screen and (min-width: 1441px) and (max-width: 1512px) {

  .div3 {
    grid-template: repeat(7, 1fr) / repeat(5, 1fr);
  }

  .header {
    display: none;
  }

  .div3 .nav2 {
    grid-area: 1 / 1 / 1 / span 5;
    height: 76px;
  }

  .div3 .a0 {
    /*logi*/
    grid-area: 1 / 1 / 1 / span 1;
  }

  .a0 img.logi {
    width: 35px;
    height: 56px;
  }

  .div3 .a1 {
    /*nav*/
    grid-area: 1 / 3 / 1 / span 2;
  }

  ul li {
    font-size: 1.5em;
  }

  /*----- 1512*982-----*/

  .div3 .a2 {
    /*About Me*/
    grid-area: 2 / 2 / 2 / span 2;
  }

  .div3 .a3 {
    /*intro*/
    grid-area: 3 / 2 / 3 / span 4;
  }

  .div3 .a4 {
    /*projects*/
    grid-area: 4 / 2 / 4 / span 2;
  }

  .div3 .a5 {
    /*app design*/
    grid-area: 5 / 2 / 5 / span 1;
    align-self: flex-start;
  }

  .div3 .a6 {
    /*graphic design*/
    grid-area: 5 / 4 / 5 / span 1;
    align-self: flex-start;
  }

  .div3 .a7 {
    /*plate*/
    grid-area: 6 / 2 / 6 / span 1;
  }

  .div3 .a8 {
    /*the nutritive...*/
    grid-area: 7 / 1 / 7 / span 3;
  }

  .div3 .a9 {
    /*button view*/
    grid-area: 8 / 2 / 8 / span 1;
  }

  .div3 .a10 {
    /*picture jaffa*/
    grid-area: 6 / 4 / 6 / span 1;
  }

  .div3 .a11 {
    /*jaffa clock...*/
    grid-area: 7 / 4 / 7 / span 1;
  }

  .div3 .a12 {
    /*button view*/
    grid-area: 8 / 4 / 8 / span 1;
  }

  /*----- 1512*982-----*/

  .a2 h4 {
    /*about*/
    font-size: 1.5em;
  }

  .a3 p.intro {
    font-size: 1.25em;
    line-height: 1.25em;
  }

  .a4 h4 {
    /*projects*/
    font-size: 1.5em;
  }

  .a5 h5.app {
    font-size: 1.25em;
    line-height: 1.25em;
  }

  .a6 h5.graph {
    font-size: 1.25em;
    line-height: 1.25em;
  }

  .a7 .plate {
    height: 175px;
    width: 175px;
  }

  .a8 h3.title {
    font-size: 1em;
    line-height: 1em;
  }

  .a9 .view {
    font-size: 1.25em;
    width: 150px;
    height: 30px;
  }

  .a12 .view {
    font-size: 1.25em;
    width: 150px;
    height: 30px;
  }

  .a11 h3.title {
    font-size: 1em;
    line-height: 1em;
  }

  .a10 .clock {
    height: 175px;
    width: 175px;
  }
}

/*---------------about--------1728*1117-------*/
/*---------------about--------1728*1117-------*/
/*---------------about--------1728*1117-------*/

@media screen and (min-width: 1513px) and (max-width: 1728px) {

  .div3 {
    grid-template: repeat(7, 1fr) / repeat(5, 1fr);
  }

  .header {
    display: none;
  }

  .div3 .nav2 {
    grid-area: 1 / 1 / 1 / span 5;
    height: 76px;
  }

  .div3 .a0 {
    /*logi*/
    grid-area: 1 / 1 / 1 / span 1;
  }

  .a0 img.logi {
    width: 35px;
    height: 56px;
  }

  .div3 .a1 {
    /*nav*/
    grid-area: 1 / 3 / 1 / span 2;
  }

  ul li {
    font-size: 1.5em;
  }

  /*----- 1728*1117 -----*/

  .div3 .a2 {
    /*About Me*/
    grid-area: 2 / 2 / 2 / span 2;
  }

  .div3 .a3 {
    /*intro*/
    grid-area: 3 / 2 / 3 / span 4;
  }

  .div3 .a4 {
    /*projects*/
    grid-area: 4 / 2 / 4 / span 2;
  }

  .div3 .a5 {
    /*app design*/
    grid-area: 5 / 2 / 5 / span 1;
    align-self: flex-start;
  }

  .div3 .a6 {
    /*graphic design*/
    grid-area: 5 / 4 / 5 / span 1;
    align-self: flex-start;
  }

  .div3 .a7 {
    /*plate*/
    grid-area: 6 / 2 / 6 / span 1;
  }

  .div3 .a8 {
    /*the nutritive...*/
    grid-area: 7 / 1 / 7 / span 3;
  }

  .div3 .a9 {
    /*button view*/
    grid-area: 8 / 2 / 8 / span 1;
  }

  .div3 .a10 {
    /*picture jaffa*/
    grid-area: 6 / 4 / 6 / span 1;
  }

  .div3 .a11 {
    /*jaffa clock...*/
    grid-area: 7 / 4 / 7 / span 1;
  }

  .div3 .a12 {
    /*button view*/
    grid-area: 8 / 4 / 8 / span 1;
  }

   /*----- 1728*1117 -----*/

  .a2 h4 {
    /*about*/
    font-size: 1.5em;
    line-height: 1.5em;
  }

  .a3 p.intro {
    font-size: 1.5em;
    line-height: 1.5em;
  }

  .a4 h4 {
    /*projects*/
    font-size: 1.5em;
    line-height: 1.5em;
  }

  .a5 h5.app {
    font-size: 1.5em;
    line-height: 1.5em;
  }

  .a6 h5.graph {
    font-size: 1.5em;
    line-height: 1.5em;
  }

  .a7 .plate {
    height: 175px;
    width: 175px;
  }

  .a8 h3.title {
    font-size: 1.25em;
    line-height: 1.25em;
  }

  .a9 .view {
    font-size: 1.25em;
    width: 150px;
    height: 30px;
  }

  .a12 .view {
    font-size: 1.25em;
    width: 150px;
    height: 30px;
  }

  .a11 h3.title {
    font-size: 1.25em;
    line-height: 1.25em;
  }

  .a10 .clock {
    height: 175px;
    width: 175px;
  }
}

/*-----------------------1729 +++++ *1117------*/
/*-----------------------1729 +++++ *1117------*/
/*-----------------------1729 +++++ *1117------*/

@media screen and (min-width: 1729px) {

  .div3 {
    grid-template: repeat(7, 1fr) / repeat(5, 1fr);
  }

  .header {
    display: none;
  }

  .div3 .nav2 {
    grid-area: 1 / 1 / 1 / span 5;
    height: 76px;
  }

  .div3 .a0 {
    /*logi*/
    grid-area: 1 / 1 / 1 / span 1;
  }

  .a0 img.logi {
    width: 35px;
    height: 56px;
  }

  .div3 .a1 {
    /*nav*/
    grid-area: 1 / 3 / 1 / span 2;
  }

  ul li {
    font-size: 1.5em;
  }

  /*----- 1729 +++++ *1117 -----*/

  .div3 .a2 {
    /*About Me*/
    grid-area: 2 / 2 / 2 / span 2;
  }

  .div3 .a3 {
    /*intro*/
    grid-area: 3 / 2 / 3 / span 4;
  }

  .div3 .a4 {
    /*projects*/
    grid-area: 4 / 2 / 4 / span 2;
  }

  .div3 .a5 {
    /*app design*/
    grid-area: 5 / 2 / 5 / span 1;
    align-self: flex-start;
  }

  .div3 .a6 {
    /*graphic design*/
    grid-area: 5 / 4 / 5 / span 1;
    align-self: flex-start;
  }

  .div3 .a7 {
    /*plate*/
    grid-area: 6 / 2 / 6 / span 1;
  }

  .div3 .a8 {
    /*the nutritive...*/
    grid-area: 7 / 1 / 7 / span 3;
  }

  .div3 .a9 {
    /*button view*/
    grid-area: 8 / 2 / 8 / span 1;
  }

  .div3 .a10 {
    /*picture jaffa*/
    grid-area: 6 / 4 / 6 / span 1;
  }

  .div3 .a11 {
    /*jaffa clock...*/
    grid-area: 7 / 4 / 7 / span 1;
  }

  .div3 .a12 {
    /*button view*/
    grid-area: 8 / 4 / 8 / span 1;
  }

   /*----- 1729 +++++ *1117 -----*/

  .a2 h4 {
    /*about*/
    font-size: 1.5em;
    line-height: 1.5em;
  }

  .a3 p.intro {
    font-size: 1.5em;
    line-height: 1.5em;
  }

  .a4 h4 {
    /*projects*/
    font-size: 1.5em;
    line-height: 1.5em;
  }

  .a5 h5.app {
    font-size: 1.5em;
    line-height: 1.5em;
  }

  .a6 h5.graph {
    font-size: 1.5em;
    line-height: 1.5em;
  }

  .a7 .plate {
    height: 175px;
    width: 175px;
  }

  .a8 h3.title {
    font-size: 1.25em;
    line-height: 1.25em;
  }

  .a9 .view {
    font-size: 1.25em;
    width: 150px;
    height: 30px;
  }

  .a12 .view {
    font-size: 1.25em;
    width: 150px;
    height: 30px;
  }

  .a11 h3.title {
    font-size: 1.25em;
    line-height: 1.25em;
  }

  .a10 .clock {
    height: 175px;
    width: 175px;
  }
}