style.css

/* CSS reset
    (all the browsers will see the website in the same by setting every tag to 0 (the website will look the same on all browsers))
*/

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
}


/* General styles
    (the styles used everywhere in the page (like the Body) or styles which are used in more than 2 of the modules bellow (h2, h3, h4, h5, h6, p, a, ul, li))
*/

body {
    color: #333;
    font-size: 1em;
    font-family: "Open Sans", "Helvetica Neue", sans-serif;
}

.masthead-intro,
.masthead-heading,
.content-footer {
    text-align: center;
}

a {
    font-weight: bold;
    text-decoration: none;
    color: #ff9966;
}


/* Header styles
    (all the styles inside the < header > or < nav > tags)
*/

.masthead {
    padding: 6em 0;
    background-image: url('https://images.unsplash.com/photo-1446080501695-8e929f879f2b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=34658e73aff775c8d4eec54bbfd1c011');
    background-size: cover;
    color: white;
    border-top: 1em solid #ff9966;
}

.masthead-intro {
    margin-bottom: 0.1em;
    font-size: 2em;
    font-family: "Gentium Book Basic", Georgia, serif;
    text-align: center;
    text-shadow: -2px 4px 2px #212121;
}

.masthead-heading {
    margin-top: -0.2em;
    color: #ff9966;
    font-family: "Open Sans", "Helvetica Neue", sans-serif;
    text-shadow: -2px 8px 3px #212121;
    font-size: 6em;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.introduction-section > p,
.location-section > p {
    margin-top: 2em;
    font-weight: 300;
    letter-spacing: 0.05em;
}


/* Content styles
    (all the styles inside the < sections > or < aside > tags)
*/

.introduction-section,
.location-section,
.questions-section {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
}

.heading {
    margin-top: 2em;
    font-size: 2em;
}

.sub-heading {
    margin: 2em 0 1em 0;
    color: #ff9966;
    font-family: "Gentium Book Basic", Georgia, serif;
    font-size: 1.2em;
}


/* Footer styles
    (all the styles inside the < footer > tag)
*/

.content-footer {
    background-color: #303030;
    color: white;
    margin-top: 5em;
    padding: 4em 0;
    line-height: 2em;
}

.social > li {
    display: inline-block;
    margin-right: 1em;
}


/* Responsive styles
    (the very last module in the CSS, contains all the media queries and it is dealing with the compatibility with mobiles and tablets)
*/

@media only screen and (max-width: 1024px) {}


/*ipad potrait*/

@media only screen and (max-width: 768px) {
    .introduction-section,
    .location-section,
    .questions-section {
        width: 85%;
    }
}


/*iPhone landscape*/

@media only screen and (max-width: 480px) {}


/*iPhone portrait*/

@media only screen and (max-width: 320px) {}