/*
This targets the footer HTML element.
background-color: #000; sets the background to solid black.
*/
footer {
background-color:#000;
}
/*
This targets any element with the class ghostbutton.
padding: 10px 20px; adds space inside the button (top/bottom = 10px, * * left/right = 20px).
border: 2px solid #FFF; gives it a 2-pixel white border.
border-radius: 5px; slightly rounds the corners.
margin-left: 10px; adds spacing to the left of the button.
font-family: Lato, sans-serif; uses the Lato font (or sans-serif if Lato isn’t available).
font-weight: bold; makes the text bold.
font-size: 16px; sets the text size.
color: #FFF; makes the text white.
text-decoration: none; removes any underline from the text.
transition: all .5s ease; smooths any style changes (like hover effects) over half a second.
*/
.ghostbutton {
padding:10px 20px;
border:2px solid #FFF;
border-radius:5px;
margin-left:10px;
font-family:Lato,sans-serif;
font-weight:bold;
font-size:16px;
color:#FFF;
text-decoration:none;
transition:all .5s ease;
}
/*
* When you hover, the button gets a blue background (#005596).
*/
.ghostbutton:hover {
background-color:#005596;
}
/*
Targets -a- links inside any element with the class centerlinks.
Normal state:
White text.
No underline.
Hover state:
Underline appears when hovered.
*/
.centerlinks a {
color:#FFF;
text-decoration:none;
}
.centerlinks a:hover {
text-decoration:underline;
}
/*
Any element with that class gets 10px of padding above its content, pushing the content down.
*/
.bottom-container {
padding-top:10px;
}