@supports (grid-area: auto) {

  /*
  |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
   style for smartphones size;
  |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

  */
  @media only screen and (max-width: 700px) {
    .body-home{
      display: block;
    }
    .header {
      grid-column: 1/3;
      height: 10px;
    }

  }

  /*
  |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
   style for tablet size;
  |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

  */
  @media only screen and (max-width: 1100px) {
    .section-wrapper{
      width: 100%;
      background: linear-gradient(to right, #cc00cc 0%, #3366ff 100%);
      padding-bottom: 3px;

    }
    section {
      background-color: white;
      height: 100%;
      padding: 10px;
      background:  linear-gradient(to bottom, #00ccff 0%, #0099ff 100%);
    }
    .top-nav{
    position: absolute;
    top: -442px;
    text-align: center;
    width: 100%;
    transition: top .6s .0s;
    z-index: 100000;
  }
      .top-nav ul{
        background-color: rgba(2,0, 0, 1);
          width: 100%;
      }

      .top-nav li {
        display: flex;
        justify-content: center;
        padding: .9em;
        width: 100%;
      }


      .top-nav a {
        text-decoration: none;
        color: white;
        font-weight: bold;
      }

  .top-nav .top-menu-flag{
    position: relative;
    top: -17px;
    justify-content: flex-start;
    background-color: black;
    width: 4em;
    color: red;
    border-radius: 3px;
    text-align: center;
    font-weight: bold;
    box-shadow: 4px 2px 5px 5px rgba(2,0, 0, .7);
    cursor: grab;
  }
}

  /*
  |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
  General style
  |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

  */

  li{
    list-style: none;
  }
  body{
    font-family: 'Mate', serif;
    margin: 0px;
    background:  linear-gradient(to bottom, #00ccff 0%, #0099ff 100%);

  }

  section:last-child{
  }

  section h1{

  }
  .html-code::before{
    position: relative;
    top: -22px;
    margin: 1px;
    content: "html";
    color: white;
    background-color: red;
    font-style: italic;
    font-weight: bold;
    padding: 1px;
    border-radius: 3px;
  }
  .css-code::before{
    position: relative;
    top: -22px;
    margin: 1px;
    content: "css";
    color: white;
    background-color: blue;
    font-style: italic;
    font-weight: bold;
    padding: 1px;
    border-radius: 3px;
  }
  .javascript-code::before{
    position: relative;
    top: -22px;
    margin: 1px;
    content: "JavaScript";
    color: white;
    background-color: #a85e19;
    font-style: italic;
    font-weight: bold;
    padding: 1px;
    border-radius: 3px;

  }
  .php-code::before{
    position: relative;
    top: -22px;
    margin: 1px;
    content: "php";
    color: white;
    background-color: #6d16b8;
    font-style: italic;
    font-weight: bold;
    padding: 1px;
    border-radius: 3px;

  }

  .node-code::before{
    position: relative;
    top: -22px;
    margin: 1px;
    content: "node";
    color: white;
    background-color: green;
    font-style: italic;
    font-weight: bold;
    padding: 1px;
    border-radius: 3px;

  }

  .sql-code::before{
    position: relative;
    top: -22px;
    margin: 1px;
    content: "sql";
    color: white;
    background-color: #e68168;
    font-style: italic;
    font-weight: bold;
    padding: 1px;
    border-radius: 3px;
  }
  code{
    background-color: #380b36;
  }
  .code-area{
    background-color: #08020f;
    color: lightgray;
    width: 100%;
    padding: 15px;
    border-top: 3px solid;
    border-bottom: 3px solid;
    box-shadow: 12px 5px 5px gray;
  }

  p {
    margin-left: 10px;
  }

  footer{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: .5fr .5fr;
    grid-column-gap: 5%;
  }
  footer .email-subscription{
    grid-column: 2/3;
    grid-row: 1;
  }
  footer .bottom-nav{
    grid-column: 1/2;
    grid-row: 1;
  }
  footer .bottom-menu{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: left;
  }
  footer .social-list {
    display: inline-flex;
    grid-column: 1/3;
    grid-row: 2;
    align-items: center;

  }
  footer .social-list a{
    padding: 15px;
    margin: auto;
    margin-top: .5em;
    margin-bottom: .5em;
  }

  footer nav ul {
    font-size: 1.1em;
    font-weight: bold;
    list-style: none;
    }

  .bottom-menu li{
    border-left: 2px ridge red;
    padding-left: 20px;
    text-decoration: none;
  }

  .email-input {
    width: 90%;
    height: 25px;
  }
/*
 logo design for social media
 */
 .fa {
   padding: 20px;
   font-size: 30px;
   width: 30px;
   text-align: center;
   text-decoration: none;
   border-radius: 50%;
 }
 .fa-facebook{
  background-color: darkblue;
  color: white;
 }
 .fa-twitter{
  background-color: rgb(20, 130, 255);
  color: white;
 }
 .fa-google{
  background-color: red;
  color: white;
 }
 .fa-google::after{
  content: "+";
 }
 .fa-instagram{
  background-color: darkred;
  color: white;
 }
 .fa-youtube{
  background-color: red;
  color: white;
 }


 @media only screen and (min-width: 1101px) {
   .top-menu-flag {
     display: none;
   }

   .body-home {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-column-gap: 10px;
     font-size: 2em;
   }
   .top-nav {
     position: fixed;
     width: 100%;
     text-align: center;
     grid-column: 1/3;
     grid-row: 1;
     background-color: black;
     border-bottom: 3px solid lightblue;

   }
   .body-home p, h1, h3{
     padding-left: 2%;
   }
 .top-menu li{
     display: inline;
     font-size: 1.7em;
     padding-left: 1%;
     margin: auto;
   }
   .top-menu a{
     text-decoration: none;
     color: white;
   }
   .header{
     grid-column: 1/3;
     grid-row: 2;
  }

  /* placing section from first to last usig selctors
  */
  /* about me section
  */

.about-me-item{
  grid-column: 1/3;
  margin-top: 110px;
}
.front-end-item{
 grid-column: 1/3;
}
.html-item{
  grid-column: 1/3;
}
.css-item{
  grid-column: 1/3;

}
.javascript-item{
  grid-column: 1/3;

}
.back-end-item{
  grid-column: 1/3;

}
.php-item{
  grid-column: 1/3;

}
.node-item{
  grid-column: 1/3;

}
.sql-item{
  grid-column: 1/3;

}
.conclusion-item{
  grid-column: 1/3;

}
.last-nav{
  grid-column: 1/3;

}

/* placing section from first to last usig selctors
*/
/* about me section
*/

}
}