/* root created for recurring colors */
:root{
--snow:#e6e8e8;
--nature:green;
--dark:black;
--sky:lightskyblue;
--width:518px
 }

 /* created line height */
*{
  line-height: 1.8;
  background-color:var(--snow);
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
 }

 /* background design for h1 */
 i{
  border: 2.5px solid var(--sky);
  background-color:var(--sky);
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: -15%;
  padding: 7px;
  color:var(--dark);
  position: relative;
  margin-top: -5%;
  font-family: Georgia, 'Times New Roman', Times, serif;
  }

/* This class is created to move the headers on the left side of the page */
.side{
  margin-right: 20px;
  padding: 20px;
  float: left;
  width: 14%;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   }

/* This is to move the paragraph so the headers and the paragraphs don't collide */
p{
  width: 75%;
  display: block;
  justify-content:right;
  margin-left: 16%;
  margin-top: 3%;
 }

 /* Due to the height,border-rights and textdecoration only required for h2-h4 refactoring was not done for those parts*/

h1,h2,h3,h4{
  font-weight: 20%;
  font-style: normal;
  font-size: 150%;
  position: absolute;
  height: 10px;
  margin-bottom: 15px;
}

h2{
  text-decoration: underline;
  border-right: 6px solid var(--nature);
  height: 200px;
  }

 h3{
  text-decoration: underline;
  border-right: 6px solid var(--nature);
  height: 875px;
  
 }

h4{
  text-decoration: underline;
  border-right: 6px solid var(--nature);
  height: 60px;
 }

 /* creating space between content */
header{
  padding:30px;
  
 }

.header{
  display: flex;
  justify-content:space-between;
  margin-left: 65%;
  
     }

 li{
 font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 font-weight: bold;
 font-size: large;
 }

.work{
  text-align: center;
  text-decoration: underline;
  font-weight: bolder;
}

/* background image for header */
.backgroundimage {
  display: flex;
  align-items: center;
  height:160px;
  width: 100%;
  top: 300px;
  background-image: url("image/mount.jpeg");
  background-size:cover;
  background-position: center;
  color:var(--snow);
  justify-content:flex-end;
  font-size: xxx-large;
  
 }

 .footer{
  display: flex;
  justify-content:space-evenly;
       }

.footer li{
  margin-top: 2%;  
  }

/* creating our main grid with flexbox for all 5 works. Done with background images for all of them. These are all set on flex-wrap so they will know when to wrap or not */
.grid-container{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin-left:13%;
  margin-bottom:5%;
}

 /* set this image in a manner where it always remains bigger than the rest of the others also have  personal picture include on this one */
.big{
  display: flex;
  align-items: center;
  height:430px;
  width: 1079px;;
  background-image: url("image/pj\ image.jpeg");
  background-size:cover;
  background-position: center;
  margin-top: 30px;
  margin-left: 15.5%;
  object-fit: contain;
  justify-content:flex-end;
  border: 5px solid var(--sky);
  
}

/* Besides backgroundimage all other codes has been consolidated below */
.grid-item1, .grid-item2, .grid-item3, .grid-item4{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: var(--width);
  height:170px;
  background-size:cover;
  background-position: center;
  margin: 15px 12px 15px 33px;
  object-fit: contain;
  justify-content: flex-end;
  align-items: end;
  border: 5px solid var(--sky);
  
}

.grid-item1 {
  background-image: url('image/refact4.png');
 }
.grid-item2 {
   background-image: url('image/contact\ info.png');
    }
.grid-item3 {
    background-image: url('image/current.webp');
   }

.grid-item4 {
    background-image: url('image/coder3.jpeg');
   }

 span{
  background-color:var(--sky);
  padding: 3%;
  display: flex;
  justify-content: end;
  align-items: flex-end; 
 }
a{
  color:var(--nature);
}

/* set anchor color to black effect on hover */
a:hover{
  color:var(--dark);
       }

/* created an outer and inner drop shadow on the card to create a shadow effect on hover and transform for enlargment */
 :hover.big{
  box-shadow: inset 0px 0px 15px var(--snow), 0 0 45px var(--dark);
  color:var(--dark);
  font-size: large;
  font-weight: bolder;
  transform: scale(1.2);
   }
 :hover.grid-item1{
  box-shadow: inset 0px 0px 15px var(--snow), 0 0 45px var(--dark);
  color: var(--dark);
  font-size: large;
  font-weight:bolder;
  transform: scale(1.2);
 }
 :hover.grid-item2{
  box-shadow: inset 0px 0px 15px var(--snow), 0 0 45px var(--dark);
  color:var(--dark);
  font-size: large;
  font-weight: bolder;
  transform: scale(1.2);
 }
 :hover.grid-item3{
  box-shadow: inset 0px 0px 15px var(--snow), 0 0 45px var(--dark);
  color:var(--dark);
  font-size: large;
  font-weight: bolder;
  transform: scale(1.2);
 }
 :hover.grid-item4{
  box-shadow: inset 0px 0px 15px var(--snow), 0 0 45px var(--dark);
  color:var(--dark);
  font-size: large;
  font-weight: bolder;
  transform: scale(1.2);
 }

/* media query for Smaller screens */
@media screen and (max-width: 992px){
 .grid-container{
   flex:0 0 33.333%;
   max-width: 100%;
    width:fit-content;
   display: flex;
  flex-wrap:wrap;
  margin-left: 11%;
   }
.big{
   width: 100%;
 margin-left: 14.5%;
  }
  h2{
    height: 310px;
      }
  h3{
    height: 1275px;
  }    
}

/* media query for tablets and movile devices*/
 @media screen and (max-width: 768px) {

  .grid-container{
    flex:0 0 33.333%;
    margin-left: 15%;
     }
  .big{
  flex:0 0 33.333%;
  margin-left: 27%;
  
   }
  p{
        margin-left: 22%;
  }
  nav{
    
    margin-left: 22%;
  }
  .side{
    width: 22% ;
  }
  h2{
    height: 50%;

    }
  h3{
    height: 95%;  
  }  
 }