body {
  background-color:darkgray;
height: 200px;
 

}

.h1 {
font-family:Arial, Helvetica, sans-serif;
font-size: 30px;
color: rgb(0, 255, 76);
}



.grid {
  display: grid;
  grid-template-columns:auto auto auto auto ;  /*repeat(7, 1fr);7 columns*/
  grid-template-rows:200px auto auto auto;
  }

.section1 {
  grid-column:2;
  grid-row:1/5;
  background-color:rgb(255, 0, 0);
  color:rgb(0, 0, 0);
  text-align:center;
  Font-size:20px;
/*  position: sticky;
*/    font-family:'Times New Roman';
height: 500px;

}

.hero-image {
  background-image:  url("media/webdesign.jpg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
 position: relative;
 
}

.hero-text {
 color: rgb(102, 192, 29);
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}







.section2 {
  grid-column:2/5;
  grid-row:1;
  background-color:rgb(82, 48, 87);
  color:rgb(255, 0, 0);
  text-align:center;
  Font-size:40px;
  position: sticky;
font-family:'Times New Roman';

}

.section3 {
  grid-column:2/5;
  grid-row:2/5;
  background-color:rgb(255, 255, 255);
  color:rgb(0, 0, 0);
  text-align:center;
  Font-size:20px;
  position: sticky;
font-family:'Times New Roman';

}

.section4{
  grid-column: 8;
  grid-row: 3;
  background-color:#4CAF50;
  background-image:  url("media/code.jpg");
  clip-path: polygon(25% 0%, 100% 0, 75% 100%, 0% 100%);
  color: white;
}

.section5{
  background-image: url("media/drawings.jpg");
  clip-path: polygon(25% 0%, 100% 0, 75% 100%, 0% 100%);
}


body {
  background-color: rgb(0, 183, 255);
}

@media only screen and (max-width: 600px) {
  body {
    background-color: rgb(255, 0, 0);
  }
}

a:link {
  color: red;
}

a:visited {
  color:rgb(255, 187, 0);
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}