style.css

body{
  background: #dad5c1;
  font-family: helvetica,arial,sans-serif}

h3{
  text-align: center;
  text-decoration: underline}

p{padding: 2%}

img{
  text-align: center;
  max-width: 100%;
  height: auto;
  width: auto}

#wrapper{
  margin: 0 auto;
  max-width: 980px;
  width: 96%;
  background: #cbbb9b;
  padding: 2%;
  border-radius: 10px}

header{
  padding: 5px;
  text-align: center}

nav{
  background: #a09885;
  padding: 0;
  margin: 0 0;
  border-radius: 10px}

nav ul{
  list-style: none;
  margin-left: 7%;
  padding: 0}

nav li a{
  color: #000;
  display: block;
  float: left;
  padding: 20px;
  text-decoration: none}

nav a:hover, nav li.active a{
  background-color: #322f2c;
  color: #fff}

.clearfix{clear: both}

#social{text-align: center}

#social img{
  padding-top: 5px;
  height: 50px;
  width: 50px}

.left-col{
  background: #dad5c1;
  width: 60%;
  float: left;
  margin-top: 2%;
  border-radius: 10px}

.sidebar{
  background: #dad5c1;
  width: 38%;
  float: right;
  margin-top: 2%;
  border-radius: 10px}

.vid{
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden}

.vid iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%}

footer{
  float: left;
  width: 100%;
  margin-top: 2%;
  margin-bottom: 3%;
  border-radius: 10px;
  background-color: #a09885}

/*-------Media------ */

@media screen and (max-width: 478px){
  body{font-size: 13px}}

@media screen and (max-width: 740px){
  .left-col{width: 100%}
  .sidebar{width: 100%}}