/** Base Styles **/

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

p {
    margin: 0;
}

body {
    color: hsl(0, 0%, 100%);
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    background: hsl(218, 28%, 13%);
}

body a {
    color: hsl(0, 0%, 100%);
    text-decoration: none;
}

body a:visited {
    color: hsl(0, 0%, 100%);
}

h1, h2, h3, h4 {
    font-family: 'Raleway', sans-serif;
}
a.special-link {
    color: hsl(176, 68%, 64%);
}

button.button-style {
    color: hsl(0, 0%, 100%);
    border: 0;
    font-weight: 700;
    font-family: 'raleway', sans-serif; 
    font-size: 1rem;
    background: hsl(176, 68%, 64%);
    padding: .75rem 3rem;
    border-radius: 20px;
}

/* set all sections to flex */
#hero, #features, #stay-productive, #testimonials {
    display: flex;
    padding: 1rem;
}

/* Header */
header {
    padding: 1.5rem 1.5rem;
    background: hsl(217, 28%, 15%);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.header-logo {
    width: 30%;
    max-width: 200px;
}

nav {
    font-family: 'Raleway', sans-serif;
    max-width: 70%;
}

nav ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    /* align-items: center; */
}

nav ul li {
    list-style-type: none;
    padding: .75rem;
}

/* Hero */
#hero {
    background: hsl(217, 28%, 15%) url("img/bg-curvy-mobile.svg") no-repeat scroll bottom;
    background-size: 100% 70%;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
}

.hero-text {
    margin: 1rem;

}

#hero h1 {
    text-align: center;
    padding: 1.5rem 0;
}

#hero p {
    text-align: center;
    padding-bottom: 1.5rem;
}
.hero-img {
    width: 80%;
    max-width: 450px;
}

.hero-text {
    max-width: 350px;
}
/* Features */

#features {
    margin: 2rem ;
}

.features-container {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    margin: 0 auto;
}

#features img {
    width: 20%;
}

div.features {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 2rem;
    text-align: center;
}

#features h3 {
    padding-bottom: .5rem;
}

/* Stay Productive */
.stay-productive-container {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    /* align-items: center; */
}

.stay-productive-img {
    width: 80%;
    max-width: 450px;
}

.stay-productive-image {
    text-align: center;
}

#stay-productive h3, #stay-productive p {
    padding-bottom: 1.5rem;
}

#stay-productive h3 {
    padding-top: 1.5rem;
}

.special-link {
    text-decoration: underline;
}
/* Testimonials */


#testimonials {
    margin: 2rem;
    flex-flow: column wrap;
    background: url(img/bg-quotes.png) no-repeat scroll left top;
}

.testimonial {
    background: hsl(219, 30%, 18%);
    display: flex;
    flex-flow: row wrap;
    margin: 1.5rem 1rem;
    padding: 1.5rem;
}

.testimonial-text {
    flex-basis: 100%;
    padding-bottom: .5rem;
}

.testimonial-image {
    flex-basis: 15%;
}

.testimonial-person {
    flex-basis: 70%;
    padding-left: 1rem;
}

.testimonial-person p {
    font-size: .6rem;
}

#testimonials img {
    width: 100%;
    border-radius: 50px;
}

/* Subscribe */
#subscribe {
    background: hsl(217, 28%, 15%);
    margin: 2rem;
    padding: 2rem;
    text-align: center;
    box-shadow: 5px 5px 5px rgb(26, 26, 26);
    border-radius: 5px;
    max-height: 300px;
}

.subscribe-container {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
}

.subscribe-item {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
}

#subscribe input {
    width: 200px;
    border: 0;
    padding: .75rem;
    margin: 1rem auto;
    border-radius: 20px;
}

#subscribe button {
    font-size: .75rem;
}

/* Footer */

footer {
    padding: 1rem;
    background: hsl(216, 53%, 9%);
}


.footer-logo {
    width: 40%;
    max-width: 200px;
    padding: 1.5rem;
}

.footer-container {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-around;
    align-items: flex-start;
    max-width: 1200px;
}

.footer-column {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.footer-column:nth-of-type(3), .footer-column:nth-of-type(4) {
    flex-flow: column wrap;
}

.footer-icon {
    flex-basis: 2%;
}

.footer-text {
    flex-basis: 90%;
}

.footer-column p {
    padding-bottom: 1.5rem;
}

footer i {
    font-size: 1.25rem;
    padding: .25rem;
}

.footer-column:nth-of-type(5) {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

@media screen and (min-width: 650px) {

    header {
        justify-content: space-around;
    }

    .hero-text {
        max-width: 500px;
    }

   .features-container {
        flex-flow: row wrap;
        max-width: 1000px;
    }

    div.features {
        flex-basis: 40%;
        flex-flow: row wrap;
    }

    .stay-productive-container {
        flex-flow: row wrap;
        width: 80%;
        margin: 0 auto;
        justify-content: center; 
        align-items: center;
    }

    .stay-productive-image {
        flex-basis: 50%;
    }
    .stay-productive-text {
        flex-basis: 50%;
    }
    .stay-productive-text h3 {
        font-size: 1.5rem;
    }

    #testimonials {
        flex-flow: row wrap;
        justify-content: space-around;
    }
    .testimonial {
        flex-basis: 25%;
    }

    #subscribe {
        max-width: 650px;
        margin: 0 auto 2rem auto;
    }
    #subscribe input {
       margin: 1rem 2rem; 
    }
    
    #subscribe button {
        font-size: 1rem;
    }

    footer {
        padding: 0 4rem 3rem 4rem;
        font-size: .75rem;
    }

    .footer-container {
        flex-flow: row wrap;
        justify-content: space-around;
        align-items: flex-start;
    }

    .footer-column {
        flex-flow: row wrap;
        justify-content: space-between;
    }

    .footer-icon {
        flex-basis: 2%;
    }

    .footer-text {
        flex-basis: 90%;
    }

    .footer-column p {
        padding-bottom: 1.5rem;
    }

    .footer-column:nth-of-type(1) {
        flex-basis: 25%;
    }

    .footer-column:nth-of-type(2) {
        flex-basis: 25%;
    }

    .footer-column:nth-of-type(3) {
        flex-basis: 8%;
        flex-direction: column;
    }

    .footer-column:nth-of-type(4) {
        flex-basis: 8%;
        flex-direction: column;
    }

    .footer-column:nth-of-type(5) {
        flex-basis: 10%;
        justify-content: center;
    }

}