@import url('https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap');

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Nunito', sans-serif;
}

.wrapper {
    padding: 1em;
}

a {
    text-decoration: none;
}

img {
    width: 100%;
    position: absolute;
    z-index: -1;
}

a.logo {
    color: #C500FF;
    font-weight: bold;
    font-size: 1.2em;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
 nav ul {
     display: flex;
     margin-top: 1em;
 }
 
 nav li {
     margin-right: .5em;
 }
 
 nav li a {
     color: black;
     font-weight: bold;
     padding: .3em .7em;
     background-color: #E6E6E6;
     border-radius: 1em;
 }
 
 .hero-left {
     text-align: center;
 }
 
 h1 {
     font-size: 2.5em;
     width: 80%;
     margin: 1.5em auto 0;
 }
 
 .hero-left p {
     font-size: 1.2em;
     width: 80%;
     margin: 1em auto;
 }
 
 a.cta-btn {
     color: white;
     background: #C500FF;
     padding: .8em 1.5em;
     border-radius: 2em;
     font-weight: bold;
     margin: 1em 0 3em;
     display: inline-block;
 }
 
 ul.testimonials {
     margin-top: 3em;
 }
 
 ul.testimonials li {
     background: white;
     padding: 2em;
     margin-bottom: 1em;
     text-align: center;
     box-shadow: 10px 10px 18px 0px rgba(0,0,0,.09);
 }
 
 blockquote, blockquote p {
     margin: 0;
 }
 footer {
     font-weight: bold;
     display: block;
     margin-top: 1em;
 }
 blockquote p {
     line-height: 1.4em;
 }
 
 /*

- White Space
- Color 
- Contrast 
- Scale
- Alignment
- Typography
- Visual Hierarchy

*/

/* For the width display, ignore this */

.width-container {
    display: none;
}

.display-width {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #E6E6E6;
    padding: .3em;
    font-size: .85em;
}