body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, Arial, Helvetica, sans-serif;
    color: #444;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 80px 900px 200px 200px;
    grid-template-areas: 
        "hd hd hd hd hd"
        "cont cont cont cont cont"
        "side side side side side"
        "ft ft ft ft ft";
    grid-gap: 10px;
    /*background-color: #2196F3;*/
    padding: 10px;
    width: 95vw;
    justify-content: center;
    margin: auto;
}

.blog-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 80px 900px 200px 200px;
    grid-template-areas: 
        "hd hd hd"
        "cont cont cont"
        "side side side"
        "ft ft ft";
    grid-gap: 10px;
    /*background-color: #2196F3;*/
    padding: 10px;
    width: 95vw;
    justify-content: center;
    margin: auto;
}
  
.box-head{
      /* row start/column start/ row end/ column end */
      display: flex;
      box-direction: row;
      grid-area:hd;
      width: 100%;
      justify-content:center;
      /*border: 1px solid red;*/
      background:  black;
}
.box-con{
      /* row start/column start/ row end/ column end */
      display: flex;
      box-direction: row;
      grid-area:cont;
      justify-content:center;
      /*border: 1px solid red;*/
}
/*.box-footer{
      /* row start/column start/ row end/ column end
      display: flex;
      box-direction: row;
      grid-area:ft;
      width: 95vw;
      justify-content:center;
      border: 1px solid red;
}*/

.footer-box{
    display:flex;
    flex-direction: row;
    align-items: center;
    /*border: 1px solid red;*/
    /*background: #F8FA9D;*/
    width:100%;
}

.footer{
    margin:auto;
    grid-area:ft;
    height: 100%;
    justify-content: center;
    /*position: fixed;*/ 
    /*background-color: #444; */
}
  
.box-side{
      /* row start/column start/ row end/ column end */
      display: flex;
      box-direction: row;
      grid-area:side;
      justify-content:center;
      /*border: 1px solid #444;*/
}
  
.grid-container > div {
    /*background-color: #fff;*/
    text-align: center;
    padding: 0px 0;
    font-size: 20px;
}
  
#headBox {
  /*grid-area:hd;*/
  font-size: small;
}
  
#sideBox {
  grid-area:side;
}
  
#conBox {
  grid-area:cont;
}
  
#footBox {
  grid-area:ft;
}

.con {
    display:flex;
    /*width:25vw;*/ 
    justify-content: center;
    color: #444;
}

.blog-con {
    display:flex;
    /*width:25vw;*/ 
    justify-content: center;
    color: #444;
}

.twit{
    /* row start/column start/ row end/ column end */
    grid-area: twitter; 
}

.face{
    /* row start/column start/ row end/ column end */
    grid-area: facebook;   
}

.mail{
    /* row start/column start/ row end/ column end */
    grid-area: mail;    
}

  /* NESTED GRID AND FLEXBOX FOR CONTENT IMAGES*/


#nestedGrid-container {
    display: grid;
    grid-auto-rows: repeat(5, 300px);
    grid-template-columns: repeat(2, 300px);
    /*grid-template-rows: 50px 50px 50px;*/
    /*grid-auto-rows: 33% 33% 33%;
    grid-template-columns: repeat(3, 33%);*/
    grid-gap: 10px;
    background-color: #fff;
    padding: 10px;
    justify-content: center;
    /*height:100%;*/
   
}

/*NESTED SIDE BAR*/

#nestedSide-container {
    display: grid;
    grid-auto-rows: repeat(4, 50px);
    grid-template-columns: repeat(3, 20%);
    grid-gap: 10px;
    background-color: #fff;
    padding: 10px;
    justify-content: center;
    width:100%;
    align-items: center;
    /*height:100%;*/
   
}

/*NESTED FOOTER GRID*/

#nestedFootGrid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 
    "twitter"
    "facebook" 
    "email";
    grid-gap: 15px;
    /*border: 5px solid rgb(80, 31, 158);*/
    justify-content: center;
    /*width: 90vw;*/
}

/*#nestedGrid-container {
    display: grid;
    grid-auto-rows: repeat(3, 100%);
    grid-template-columns: repeat(3, 30%);
    /*grid-template-rows: 50px 50px 50px;*/
    /*grid-auto-rows: 33% 33% 33%;
    grid-template-columns: repeat(3, 33%);
    grid-gap: 10px;
    background-color: #173a57;
    padding: 10px;
    justify-content: center;
    height:100%;
    margin:auto;

  }*/

/*#nestedBox-con{
    /* row start/column start/ row end/ column end
    display: flex;
    box-direction: row;
    width: 100%;
    height: 100%;
    /*grid-area:content;
    justify-content:center;
    border: 1px solid red;
}*/

.imgBox{
    display: flex;
    flex-direction: column;
    background-size:20rem;
    border: 1px solid grey;
    justify-content: center;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
}

.imgBox p {
    color: rgb(204, 96, 54);
    text-align: initial;
    text-align: top;
    font-size: 26px;
}

.textBox{
    display: flex;
    flex-direction: column;
    background-size:20rem;
    border: 1px solid grey;
    justify-content: center;
}

.inner-textBox{
    display: flex;
    flex-direction: column;
    background-size:20rem;
    /*border: 1px solid rgb(219, 215, 215);*/
    justify-content:flex-start;
    padding: 6px;
}

.inner-textBox p {
    display: flex;
    flex-direction: column;
    background-size:20rem;
    /*border: 1px solid grey;*/
    align-content: flex-start;
    padding: 6px;
}

.textBox p {
    color: rgb(204, 96, 54);
    text-align: initial;
    text-align: top;
    font-size: 26px;
}

/*WORK IMAGES*/


.details{

    align-content: center;
}

.details h1{

    align-content: center;
    color: black;
}

.details p{

    align-content: center;
    color: cadetblue;
    font-size: 16px;
}


/*MEDIA QUERIES*/

.sideBox{
    display: flex;
    flex-direction: row;
    background-color: #fff;
    background-size:20rem;
    justify-content: center;
    width: 100%;
    height: 20%;
}

.sidebar{
    /*display: block;*/
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px;
    align-items: center;
}

@media(min-width:1230px){
.grid-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 80px 665px 200px;
    grid-template-areas: 
        "hd hd hd hd hd"
        "side cont cont cont cont"
        "ft ft ft ft ft";
    grid-gap: 10px;
    /*background-color: #4444;*/
    padding: 10px;
    width: 95vw;
    justify-content: center;
    margin: auto;
  }}

@media(max-width:670px){
    .grid-container {
        display: grid;
        grid-template-columns: repeat(1, 300px);
        grid-template-rows: 80px 2100px 200px 200px;
        grid-template-areas: 
            "hd hd hd hd hd"
            "cont cont cont cont cont"
            "side side side side side"
            "ft ft ft ft ft";
        grid-gap: 10px;
        /*background-color: #2196F3;*/
        padding: 10px;
        width: 95vw;
        justify-content: center;
        margin: auto;
    }}


@media(min-width:1230px){
    .blog-grid-container {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: 80px 665px 200px;
        grid-template-areas: 
            "hd hd hd hd hd"
            "side cont cont cont cont"
            "ft ft ft ft ft";
        grid-gap: 10px;
        /*background-color: #4444;*/
        padding: 10px;
        width: 95vw;
        justify-content: center;
        margin: auto;
}}
        
          @media(max-width:670px){
            .blog-grid-container {
                display: grid;
                grid-template-columns: repeat(1, 300px);
                grid-template-rows: 80px 2100px 200px 200px;
                grid-template-areas: 
                    "hd hd hd hd hd"
                    "cont cont cont cont cont"
                    "side side side side side"
                    "ft ft ft ft ft";
                grid-gap: 10px;
                /*background-color: #2196F3;*/
                padding: 10px;
                width: 95vw;
                justify-content: center;
                margin: auto;
              }}  

  @media(min-width:1230px){
    #nestedGrid-container {
      display: grid;
      grid-auto-rows: repeat(2, 300px);
      grid-template-columns: repeat(3, 300px);
      grid-gap: 10px;
      background-color: #fff;
      padding: 10px;
      justify-content: center;
      height:92%;
    }}

    @media(max-width:1229px){
        #nestedGrid-container {
          display: grid;
          grid-auto-rows: repeat(2, 300px);
          grid-template-columns: repeat(2, 300px);
          grid-gap: 10px;
          background-color: #fff;
          padding: 10px;
          justify-content: center;
          height:92%;
        }}

    
  @media(max-width:670px){
    #nestedGrid-container {
      display: grid;
      grid-auto-rows: repeat(6, 300px);
      grid-template-columns: repeat(1, 300px);
      grid-gap: 10px;
      background-color: #fff;
      padding: 10px;
      justify-content: center;
      height:92%;
    }}

/* nested grid for about page */

    @media(min-width:1230px){
        #nestedGrid-container-bio {
          display: grid;
          grid-auto-rows: repeat(2, 300px);
          grid-template-columns: repeat(1, 300px);
          grid-gap: 10px;
          background-color: #fff;
          padding: 10px;
          justify-content: center;
          height:92%;
        }}
    
        @media(max-width:1229px){
            #nestedGrid-container-bio {
              display: grid;
              grid-auto-rows: repeat(2, 300px);
              grid-template-columns: repeat(1, 300px);
              grid-gap: 10px;
              background-color: #fff;
              padding: 10px;
              justify-content: center;
              height:92%;
            }}
    
        
      @media(max-width:670px){
        #nestedGrid-container-bio {
          display: grid;
          grid-auto-rows: repeat(6, 300px);
          grid-template-columns: repeat(1, 300px);
          grid-gap: 10px;
          background-color: #fff;
          padding: 10px;
          justify-content: center;
          height:92%;
        }}

     /* -------------- end --------------- */   

    @media(min-width:1230px){
    #nestedSide-container {
        display: grid;
        grid-auto-rows: repeat(3, 3fr);
        grid-template-columns: repeat(1, 30%);
        grid-gap: 10px;
        background-color: #fff;
        padding: 10px;
        justify-content: center;
        height:92%;
     }}

    @media(max-width:670px){
    #nestedSide-container {
        display: grid;
        grid-auto-rows: repeat(1, 50px);
        grid-template-columns: repeat(3, 20%);
        grid-gap: 10px;
        background-color: #fff;
        padding: 10px;
        justify-content: center;
        width:100%;
        align-items: center;
        /*height:100%;*/ 
    }}

  @media(min-width:1230px){
    #nestedFootGrid{
        display:grid;
        grid-template-columns: 30vw 30vw 30vw;
        grid-template-rows: auto;
        grid-template-areas: 
        "twitter" "facebook" "email";
        grid-gap: 15px;
        /*border: 5px solid rgb(39, 177, 26);*/
        justify-content: center;
    
    }}