/* Box Model Hack */
* {
  box-sizing: border-box;
}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
	clear: both;
}

/******************************************
/* BASE STYLES
/*******************************************/

body {
  font-size: 62.5%;
}


/******************************************
/* LAYOUT
/*******************************************/
header {
  width: 100%;
  font-size: 1rem;
}
header > nav > ul > li {
  float: left;
  list-style: none;
  width: 5%;
  margin-top: .8%;
}
#Courses {
  float: left;
  margin-right: 3%;
  margin-left: 10%;
  margin-top: .8%;
  width: 4%;
  border-style: none;
  background: white;
  color: blue;
}
#Search {
  float: left;
  margin-top: .8%;
  margin-right: 20%;
  width: 5%;
}
#sign-up {
  margin-right: 5%;
}
#logo {
  float: left;
  width: 15%;
  margin-right: 20%;
}
.nav > a {
  text-decoration: none;
  margin-top: .8%;
  margin-right: 5%;
  color: blue;
  font-weight: bold;
}
hr {
  clear: both;
}
.content {
  width: 100%;
}
#content-pic {
  float: left;
  margin-top: 9%;
  margin-left: 15%; 
  width: 35%;
  height: auto;
}
#right-side {
  float: left;
  margin-top: 16%;
  width: 35%;
  margin-left: 2%;
}
section h1 {
  font-size: 3rem;
  margin-bottom: 0;
  margin-top: 0;
}
#heading {
  width: 60%
}
section > p {
  font-size: 1.5rem;
}
.button {
  background: blue;
  color: white;
  border-radius: 5px 5px;
  font-size: 1.3rem;
  margin-right: 1%;
}
::placeholder {
  color: blue;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 5px;
}
input {
  border-style: none;
  background: lightgrey;
}

/******************************************
/* ADDITIONAL STYLES
/*******************************************/