:root {
    --grey:#999;
    --yellow:#E3DB22;
    --off-white:#fbfbf8;
    --brown:#76552B;
    --pinkish:#f708bf;
    --green:#006400;
    --dk-grey:#6e6e6e;
    --charcoal:#353a3d;
}

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

html {
    font-family: Georgia;
    font-size:1.2em;
}

body {
    background:var(--off-white);
    padding-top:10em;
}

/*UTILITY*/

a {
    text-decoration:none;
    color:white;
}

a:hover {
    color:var(--grey);
}

img {
    width:100%;
}

p {
    display:block;
}

.container {
    text-align:center;
    padding:.6rem 1rem 1rem 1rem;
    border-top: 10rem solid transparent;
    margin-top: -10rem;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip:padding-box;
}

.heading {
    padding-bottom:.6rem;
}

.grid-3 {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap:1rem;
}

iframe {
    border:0;
    width:100%;
    height:100%;
}

/*HEADER*/

header {
    position:fixed;
    top:0;
    z-index:99;
    width:100%;
    background:var(--green);
    color:white;
}

.header {
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:.2rem 1rem;
}

.socials {
    display:flex;
    justify-content:center;
}

.socials > * {
    padding:.2rem;
}

.header-logo {
    padding:.2rem 1rem;
}

.header img {
    width:10rem;
}

/*NAVIGATION*/

nav {
    background:var(--brown);
    display:flex;
    justify-content:center;
}

nav p {
    padding:.4rem 4rem;
}


nav a:hover {
    color:var(--yellow);
}

/*ABOUT*/

.facebook-feed,
.google-map {
    margin:0 auto;
    width:400px;
    height:500px;
}

/*SERVICES*/

#services {
    background-color:var(--grey);
}

#services .heading {
    padding-bottom:0;
}

#services > h4 {
    margin-bottom:.6rem;
}

.card {
    background:var(--off-white);
    box-shadow:0 .1rem .1rem var(--dk-grey);
    border-radius:.2rem;
    padding:.4rem;
}

.card > h4 {
    padding-bottom:.4rem;
    text-decoration-line: underline;
}

.card p {
    margin:.25rem;
}

/*TESTIMONIALS*/

#testimonials {
    background-color:var(--charcoal);
}

#testimonials .heading {
    color:white;
}

#testimonials h4 {
    color:var(--yellow);
}

#testimonials span {
    color:white;
}


/*FOOTER*/

footer {
    background:#1a1c1d;
    padding:.5rem 0;
    text-align:center;
    color:white;
}

footer img {
    width: 10rem;
    margin-bottom:.2rem;
}

.dev-link:hover {
    color:var(--pinkish);
}

/*RESPONSIVENESS*/

@media only screen and (max-width:1300px) {
    /*change facebook-feed and google-map to be under about-me*/
    #about .grid-3 {
        display:grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap:1rem;
    }
    
    #about .about-me {
        grid-row:1;
        grid-column:1/ span 2;
    }
}

@media only screen and (max-width:1110px) {
    .grid-3 {
        display:grid;
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width:870px) {
    html {
        font-size:1.1rem;
    }

    body {
        padding-top:6em;
    }

    .header-logo {
        display:none;
    }

    nav p {
        padding:.2rem .8rem;
    }

    .container {
        border-top: 6rem solid transparent;
        margin-top: -6rem;
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip:padding-box;
    }

    #about .grid-3 {
        display:grid;
        grid-template-columns: 1fr;
    }
    
    #about .about-me {
        grid-row:1;
        grid-column:1/2;
    }

}

@media only screen and (max-width:455px) {
    body {
        padding-top:7.7em;
    }

    .container {
        border-top: 7.7rem solid transparent;
        margin-top: -7.7rem;
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip:padding-box;
    }
    
    .facebook-feed,
    .google-map {
        display:none;
    }
}