* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* this container arranges things horizontally and aligned to top */
.container {
  color: black;
  font-family: sans-serif;
  background-color: grey;  /* Blue */
  padding-top: 30px;
  padding-bottom: 30px;
  padding-right: 30px;
  padding-left: 30px;
  display: flex;
  justify-content: left;
}

.text-container {
  color: black;
  font-family: sans-serif;
  background-color: white;  /* Blue */
  padding-top: 30px;
  padding-bottom: 30px;
  padding-right: 30px;
  padding-left: 30px;
  display: block;
  justify-content: Top;
}

body, html {
    height: 100%;
}

/* The hero image */
.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)), url("images/plow_hero2.jpg");

  /* Set a specific height */
  height: 60%;

  /* Position and center the image to scale nicely on all screens */
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-image-projects {
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)), url("images/plow_hero2.jpg.jpg");
  height: 50%;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.hero-image-scratch {
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)), url("images/plow_hero2.jpg.jpg");
  height: 50%;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.hero-image-about {
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)), url("images/plow_hero2.jpg.jpg");
  height: 50%;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
/* Place text in the middle of the image */
.hero-text {
  font-family: sans-serif;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

nav {
  width: 100%; 
  height: 50px;
  background-color: #3a3a3a;
  overflow: hidden;
}

nav a {
  display: block;
  float: right;
  font-family: "Lucida Grande", sans-serif;
  font-weight: bold;
  font-size: 15px;
  color: white;
  border: 0;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 15px;
  padding-left: 20px;

  text-decoration: none;
}

nav a:hover { 
  background-color: #635a52;
 }  

 #logo { /*font*/
  float:left;
  font-family: 'Hind', sans-serif;
  font-weight: normal;
  font-size: 32px;
  letter-spacing: 1px;
  text-shadow: 1px 1px 2px #c4c4c4;
  /*box*/
  padding-top: 7px;
  padding-bottom: 7px;
  padding-left: 8px;
  padding-right: 20px;
  margin-top: 0px;
  }

 #logoimg { /*font*/
  float:left;
  font-family: 'Hind', sans-serif;
  font-size: 32px;
  font-weight: normal;
  letter-spacing: 1px;
  text-shadow: 1px 1px 2px #c4c4c4;
  /*box*/
  padding-top: 0px;
  padding-bottom: 11px;
  padding-left: 10px;
  padding-right: 5px;
  margin-top: -2px;
}