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

body{
    font-family: 'Bai Jamjuree', sans-serif;
    font-weight: 400;
    font-size: 18px;
}

.header{
    background-image: url("images/bg-header-mobile.png");
    background-repeat: no-repeat;
    background-size: 100%;
}

.header-warp{
    text-align: center;
    padding: 6em 1.95em 2em 1.95em;
    font-size: 16px;
    max-width: 375px;
    margin: 0 auto 4.5em auto;
}

.header img{
    width: 100px;
    
}

.header h1{
    color: hsl(210, 10%, 33%);
    margin: 1.5em 0 0.5em 0;
}

.header p{
    color: hsl(201, 11%, 66%);
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 1.5em;
}

.button{
    width: 90%;
    padding: 1em;
    border-radius: 25px;
    border: none;
    
    margin-top: 1em;
    color: white;
    outline: none;

    font-size: 15px;
    font-weight: 600;
}

.button.first{
    background-color: hsl(171, 66%, 44%);
    box-shadow: 0 2px 0 hsl(171, 66%, 34%), 0 5px 5px hsla(171, 66%, 44%, .2);
}

.button.first:hover{
    background-color: hsla(171, 66%, 44%, .7);
}

.button.second{
    background-color: hsl(233, 100%, 69%);
    box-shadow: 0 2px 0 hsl(233, 48%, 51%), 0 5px 5px hsla(228, 45%, 44%, .2);
    
}

.button.second:hover{
    background-color: hsla(233, 100%, 69%, .7);
}

.section{
    text-align: center;
    padding: 2em 2em;
    font-size: 16px;
    max-width: 375px;
    margin: 0 auto;
}

.content h1{
    color: hsl(210, 10%, 33%);
    font-size: 1.5em;
}

.content h2{
    color: hsl(210, 10%, 33%);
    font-size: 1.25em;
}

.content p{
    color: hsl(201, 11%, 66%);
    line-height: 1.65;
    margin: 0.75em 0 3em 0;
}

.section img{
    width: 100%;
    margin: 1em 0 2.5em 0;
}

.content.before::before{
    display: block;
    content: "";
    position: relative;
    margin: 1em auto;

    width: 50px;
    height: 50px;

}

.content.before.black::before{
    background-image: url("images/icon-blacklist.svg");
    background-repeat: no-repeat;
}

.content.before.text::before{
    background-image: url("images/icon-text.svg");
    background-repeat: no-repeat;
}

.content.before.preview::before{
    background-image: url("images/icon-preview.svg");
    background-repeat: no-repeat;
}

.logos>*{
    display: block;
    margin: 2em auto;
    width: 100px;
}

.logos .google{
    width: 125px;
}

.last{
    padding: 0 2em;
    text-align: center;
    font-size: 16px;
    max-width: 375px;
    margin: 7em auto 0 auto;
}

.last h1{
    font-size: 1.5em;
    color: hsl(210, 10%, 33%);
    padding: 0.5em;
}

.last p{
    color: hsl(201, 11%, 66%);
    line-height: 1.65;
    padding: 0.25em;
}

.footer{
    margin: 7em auto 0 auto;
    text-align: center;
    background-color: rgba(159, 171, 178, 0.1);
}

.footer img{
    margin: 2em 0 1em 0;
    width: 45px;
}

.links>* a{
    display: block;
    text-decoration: none;
    color: hsla(210, 10%, 33%, .7);
    font-size: 0.85em;
    font-weight: 600;
    padding: 0.5em;
}

.links>* a:hover{
    color: hsl(171, 66%, 44%);
}

.social{
    margin: 2em 0;
}

.fab.fa-facebook-f{
    background-color: hsl(210, 10%, 33%);
    padding: 3px 3px 0 7px;
    color: white;
    border-radius: 2px;
    border: none;
}

.fab.fa-facebook-f:hover{
    color: white;
    background-color: hsl(171, 66%, 44%);
}

.fab{
    color: hsl(210, 10%, 33%);
}

.fab:hover{
    color: hsl(171, 66%, 44%);
    cursor: pointer;
}

.fa-twitter{
    margin: 0 1.5em;
}

.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }

@media (min-width:720px){
    .header{
        background-image: url("images/bg-header-desktop.png");
    }

    .header .header-warp{
        max-width: 720px;
        font-size: 20px;
    }


    .button{
        width: 40%;
    }

    .button.first{
        margin-right: 1em;
    }

    .section{
        max-width: 100%;
    }

    .section img{
        float: left;
        width: 50%;
        margin-left: -4em;
    }

    .content.head{
        max-width: 720px;
        margin: 0 auto;
        font-size: 20px;
        text-align: center;
    }

    .content p{
        font-size: 0.85em;
    }

    .content{
        text-align: left;
        max-width: 400px;
        margin-left: 50%;
        font-size: 20px;
    }

    .content.quick{
        margin-top: 7em;
    }

    .section.second{
        margin-top: 10em;
    }

    .section.second img{
        float: none;
        width: 70%;
    }

    .section.second .content{
        margin: 0 auto;
        text-align: center;
        max-width: 720px;
    }

    .section.second .content {
        font-size: 1.5em;
    }

    .before-warp{
        display: flex;
        max-width: 1250px;
        margin: 0 auto;
    }

    .before-warp .content.before{
        max-width: 400px;
    }

    .logos{
        max-width: 1250px;
        margin: 0 auto;
        display: flex;
        align-items: center;
    }

    .logos img{
        width: 150px;
    }

    .logos .google{
        width: 150px;
    }

    .last{
        max-width: 720px;
        font-size: 20px;
        margin-top: 4em;
    }

    .last p{
        font-size: 0.85em;
        margin-bottom: 1.5em;
    }

    .footer{
        display: grid;
        grid-template-columns: 150px auto 150px;
        padding: 2.5em 10em 1em 10em;
    }

    .footer>img{
        margin: auto;
    }

    .footer .social{
        margin: auto;
    }
    
    .links{
        max-width: 720px;
        display: flex;
        justify-content: space-evenly;
    }

    .links div{
        text-align: left;
    }

    .attribution{
        grid-column: 1/3;
        margin-top: 1em;
    }
}