/*My Edits: 1. Replaced class selector (content) with element selector (main) 2. Changed other class selectors to element selectors 3. Deleted/condensed CSS rules where possible (to apply DRY) 4. Added comments to explain CSS rules 5. Continued to condense/delete CSS rules and renamed SEO, ORM and SMM class selectors (now replaced with one class selector, named functions) (more meaningful) 6. Checked all colour contrast, and changed background colour (in rule for aside element) to meet WCAG AA 7. Checked font-family choices for accessibility (all sans serif, no changes) 8. Checked font sizes for accessibility (16px is min, no changes) 9. Added more comments to further explain CSS styling*/

/*Styles all of page (where not overridden by class selector) (all elements’ padding and border are included in width and height)*/
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/*Styles body of page (where not overridden by class selector; the case for all element selectors below) (sets background colour)*/
body {
    background-color: #d9dcd6;
}

/*Styles paragraphs throughout page (sets font size as 16px)*/
p {
    font-size: 16px;
}

/*Styles header (sets positioning of header, font family options, background colour and font colour)*/
header {
    padding: 20px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background-color: #2a607c;
    color: #ffffff;
}

/*Styles Horiseon in top left (sets positioning and font size, inc different colour for “seo”)*/
h1 {
    display: inline-block;
    font-size: 48px;
}

span {
    color: #d9dcd6;
}

/*Styles navigation in top right (sets positioning, font family, font size, and font colour of links to bookmarks)*/
nav {
    padding-top: 15px;
    margin-right: 20px;
    float: right;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 20px;
}

nav ul li {
    display: inline-block;
    margin-left: 25px;
}

nav a {
    color: #ffffff;
    text-decoration: none;
}

/*Styles hero image (sets size of image and positioning)*/
.hero {
    height: 800px;
    width: 100%;
    margin-bottom: 25px;
    background-image: url("../images/digital-marketing-meeting.jpg");
    background-size: cover;
    background-position: center;
}

/*Styles main content (except sidebar to right) (sets size of this content, positioning, font-family, backgroung colour, font colour; sets font size and positioning of headers; sets size of images)*/
main {
    width: 75%;
    display: inline-block;
    margin-left: 20px;
}

.functions {
    margin-bottom: 20px;
    padding: 50px;
    height: 300px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-color: #0072bb;
    color: #ffffff;
}

.functions h2 {
    margin-bottom: 20px;
    font-size: 36px;
}

.functions img {
    max-height: 200px;
}

/*Styles images in main content (sets position of SEO and SMM to left, ORM to right)*/
.float-left {
    float: left;
    margin-right: 25px;
}

.float-right {
    float: right;
    margin-left: 25px;
}

/*Styles sidebar to right (sets positioning and size of this content, font family and background colour; sets positioning and font colour in LG, BA, CM; and sets positioning of headings and images in these)*/
aside {
    margin-right: 20px;
    padding: 20px;
    clear: both;
    float: right;
    width: 20%;
    height: 100%;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-color: #227BAA;
}

.benefits {
    margin-bottom: 32px;
    color: #ffffff;
}

.benefits h3 {
    margin-bottom: 10px;
    text-align: center;
}

.benefits img {
    display: block;
    margin: 10px auto;
    max-width: 150px;
}

/*Styles footer (sets positioning, font family and alignment of text; sets size of font in heading)*/
footer {
    padding: 30px;
    clear: both;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-align: center;
}

footer h2 {
    font-size: 20px;
}