Adding styles to the navigation and landing page

Let's jump into our Sass file now to fix it. The first thing that we are going to do is add in a few variables. Here they are:

$primary:#26a5d3;
$dark:#333;
$light:#f4f4f4;

Next, we are going to put in our code for the HTML and body:

html{
 width:100%;
 height:100%;
}

body{
 width:100%;
 height:100%;
 font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
 color:$dark;
 background-color:$light;
 overflow-x: hidden;
}

As you can see, in the body, the variables we created are getting used. There is nothing very complex going on here. We are going to see a lot of styling code now, but I will explain some of the more involved ones.

The Sass code for our typography is as follows:

h1, h2, h3, h4, h5, h6{
  margin: 0 0 2rem;
  text-transform:uppercase;
  font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-
  serif;
  letter-spacing:1px;
}

p{
  margin: 0 0 1.5rem;
}

a{
  color:$primary;

  &:hover,
  &:focus{
  text-decoration...