style.css

/* start with the body*/
body{ 
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.5; /* this is amount of space between each line*/
    padding: 0;
    margin: 0;
    background-color: #ffffb3 ;
}

/* when you have a class use the . when you have an id use # */
.container{
    width: 90%; /* want it to be responsive so dont use pixels # */
    margin: auto; /* auto moves text to the middle of the page */
    overflow: hidden; /* if something goes outside of div it will be hidden */
}

ul{  /* by default ul have padding so we need to set to 0*/
    margin: 0;  
    padding: 0;
}

.button_1{
    height: 38px;
    background: #A52A2A ;
    border: none;
    padding-left: 20px;
    padding-right: 20px;
    color: white;
}

.dark{ /* this changes the color of the box on the about page */
    padding: 15px;
    background:#ffcc00 ;
    color:black;
    margin-top: 10px;
    margin-bottom: 10px;
}

header{
    background:#ffcc00 ;
    color: #000000;
    padding-top: 30px;
    min-height: 70px; /* set the min height so its responsive */
    border-bottom: #A52A2A 3px solid; /* color, width, and line type */
}

header a{/* this is to grab all the links in the header */
    color:#000000 ;
    text-decoration: none; /* this gets ride of underline on links */
    text-transform: uppercase; /* this mkes the links uppercase */
    font-size: 16px;

}

header li{  /* this is to get rid of bullets in list and make it horizontal*/
    float: left;
    display: inline;   /* this gets rid of bullets */
    padding: 0 20px 0 20px;  /* top, right, bottom, left */
}

header #branding{ /* branding is an id so we use # */
    float: left; /* we want the branding to be on the left */
}

header #branding h1{
    margin: 0;
}

header nav{
    float: right;
    margin-top: 10px; /* need to move the nav down from the top*/
}

header .current a{
    color: #A52A2A;
    font-weight: bold;
}

header a:hover{
    color: #A52A2A;
    font-weight: bold;
}

/*showcase*/
#showcase{
    min-height: 400px; /*we want this to be responsive so set a min*/
    background-size: cover; /*this makes image span whole showcase*/
    text-align: center;
    background-image: 
    linear-gradient( /*this makes the image darker so I can see the text*/
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), 
        url('../img/showcase.jpg'); /* the ../ takes you out of css folder so you can grab img*/
}

#showcase h1{
    margin-top: 100px;
    font-size: 55px;
    margin-bottom: 10px;
    color: #EEE8AA;
}

#showcase p{
    font-size: 20px;
    color: #EEE8AA;
}

/*newsletter*/
#newsletter {
    padding: 15px;
    color: black;
    background:#ffcc00;
}

#newsletter h1{
    text-align: center;
}

#newsletter form{
    margin-left: 40%;
    margin-right:40%;
    width: 50%;
}

#newsletter type[type="email"]{
    padding: 4px;
    height: 20px;
    width: 250px;
}

/*boxes*/
#boxes{
    margin-top: 20px; /*move the boxes down a little*/
}

#boxes .box{
    float: left;
    text-align: center;
    width: 30%; /*percents make it responsive*/
    padding: 10px;
}

#boxes .box img{
    width: 150px;
    height: 200px;
}

/*sidebar*/
aside#sidebar{
    float: right;
    width: 30%;
    margin-top: 10px;
}

/*main-column*/
article#main-column{
    float: left;
    width: 65%
}

article#video{
    margin-left: 40%;
    margin-right:40%;
}

footer{
    padding: 20px;
    margin-top: 20px;
    color: white;
    text-align: center;
    background-color:#A52A2A ;
}