html{
    scroll-behavior: smooth;
}

body{
  background-color: #737373;
  font-size: 18px;
  margin: 0;
  padding: 0;
}

h1{
  font-size: 50px;
  line-height: 1;
  padding: 50px 0;
  text-align: center;
}

h2{
  font-size: 32px;
  line-height: 1.5;
}


/************  
Your Code Here
Add code to remove the styling for the 
list items in an unordered lists.
*************/

nav li{
  display:inline;
  padding-right:20px;

}

nav a{
  color: black;
  font-weight: bold;
  text-decoration: none; 
}

 /************  
  Your Code Here -  Write the selector AND rule 

  Add an underline whenever the mouse hovers over a 
  link in the nav. 
  *************/ 
nav a:hover{
  text-decoration: underline;
}

.skip a{
  background: white;
  left: 0;
  padding: 6px;
  -webkit-transition: top 1s ease-out;
  transition: top 1s ease-out;
  z-index: 1;

  /************  
  Your Code Here
  By default this link should be positioned 40px higher
  than the top of it's parent element.
  *************/
  position: absolute;
  top: -40px;
}

  /************  
  Your Code Here -  Write the selector AND rule 

  The link in the skip class should be positioned at the 
  top of it's parent when it is in focus. 
  *************/ 
.skip a:focus{
  top: 0px;
}

  /************  
  Your Code Here -  Write the selector AND rule 

  Any element in focus should have a 2px black border 
  on all four sides.
  *************/  
*:focus{
  border: 2px solid black;
}

nav{
  background-color: #ddd;
  padding: 25px 0; 
  text-align: left;

}

footer{
  background-color: black;
  color: white;
  padding-top: 30px;
  text-align: center;
}


.container{
  /************  
  Your Code Here
  **************/
  display: grid;
  grid-template-columns: 1fr 5fr 1fr;
  grid-template-rows: auto auto auto auto auto;
  grid-row-gap: 15px;
}

header{
  background-attachment: fixed; /* Parallax effect */     
  background-position: center;  /* Parallax effect */
  background-repeat: no-repeat; /* Parallax effect */
  background-size: cover;       /* Parallax effect */
  color: white;
  height: 400px;                /* Parallax effect */

  /************  
  Your Code Here
  Set background-image to header.jpg in the images folder 
  **************/
  background-image: url("../images/header.jpg");

  grid-column: 1 / -1;  /*Can you explain what this does?*/
  grid-row: 1 / auto;   /*Can you rewrite it?*/
}

header p{
  color: white;
  font-size: 24px;
  padding: 0 100px;
  text-align: center;
}


.about, .method, .clients, .contact{
  /************  
  Your Code Here
  **************/
  grid-column: 2 / span 1;

}

.about-image, .method-image, .clients-image, .contact-image{
  /************  
  Your Code Here
  **************/
  grid-column: 1 / -1;
  max-height: 700px;
  overflow: hidden;
}

.about, .about-image{
  /************  
  Your Code Here
  **************/
  grid-row: 2 / span 1;
}

.method, .method-image{
  /************  
  Your Code Here
  **************/
  grid-row: 3 / span 1;
}


.clients, .clients-image{
  /************  
  Your Code Here
  **************/
  grid-row: 4 / span 1;

}


.contact, .contact-image{
  /************  
  Your Code Here
  **************/
  grid-row: 5 / span 1;

}

.text-block{
  background-color: rgba(255, 255, 255, .8);
  border: 10px solid black;
  padding: 30px;

  /************  
  Your Code Here
  Align the content in the center
  **************/
  align-self: center;
  justify-self: center;
}


@media all and (min-width: 800px){

  nav{
    padding: 30px 0px;
    /************  
    Your Code Here
    **************/
  }

  .container{
    /************  
    Your Code Here
    **************/
    display: grid;
    grid-template-columns: 50px auto 500px auto 50px;
    grid-template-rows: 400px 400px 400px 400px 400px;
  }

  .about, .clients, .method-image, .contact-image{
    /************  
    Your Code Here
    **************/
    grid-column: 3 / span 2;
  }

  .about-image, .clients-image, .method, .contact{
    /************  
    Your Code Here
    **************/
    grid-column: 2 / span 2;
  }
}

@media screen and (prefers-reduced-motion: reduce){

  html{
    /************  
    Your Code Here
    Remove the scrolling
    *************/
    scroll-behavior: auto; 
  }

  .skip a{
    /************  
    Your Code Here
    Remove the animation
    *************/
    -webkit-transition: none;
    transition: none;
  }

  /*Turn off parallax*/
  header{
    background-attachment: initial;
  }
}