.attribution { font-size: 11px; text-align: center; position:absolute; top:0; margin:0 auto;}
.attribution a { color: hsl(228, 45%, 44%); }
:focus {
    outline:1px solid red;
    outline-offset: 0.5em;
}
:root {
    /* PRIMARY */
    --strong-cyan:hsl(171, 66%, 44%);
    --strong-cyan-hover:hsl(171, 67%, 46%);
   
    --light-blue:hsl(233, 100%, 69%);
    --light-blue-hover:hsl(233, 93%, 70%);

    /* NEUTRAL */
    --dark-grayish-blue:hsl(210, 10%, 33%);
    --grayish-blue:hsl(201, 11%, 66%);
}

* {
    box-sizing:border-box;
}

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

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

    background:url('../images/bg-header-mobile.png')  no-repeat;
    background-size:contain;
}

/* STYLE WRAPPER */
.wrapper {
    
    padding:1.8em;
    text-align:center;

}

/* LOGO STYLE */
.wrapper__logoFigure {
    margin-top:5.02em;
}

/* STYLE OF ALL TITLES*/ 

h1 {

    font-weight:600;
    margin-top:1.9em;
    font-size:1.99rem;
    margin-bottom:.3em;

}

 h2 {
     font-size:1.52em;
    margin:0;
    margin-bottom:.7em;
}

h3 {
    margin-top:3.2rem;
    font-size:1.45rem;
    margin-bottom:0;
} 
.wrapper__title {
    color:var( --dark-grayish-blue);
}

/* STYLE OF PARAGRAPHS */
p {
    color:var(--grayish-blue);
    font-size:1rem;
    line-height:1.6rem;
}

/* STYLE OF BUTTONS */
button {
    color:white;

    font-size:1.03rem;
    font-weight:600; 
    font-family:inherit;
    letter-spacing:0.1em;

    padding:1em 0;
    width:100%;

    border-radius:2em;
    border:none;
    
    cursor:pointer;

    

   
}

.wrapper__buttons {
    margin-top:2.7em;
    
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1.45em;
}

.wrapper__buttons--cyan {

    background:var(--strong-cyan);

    box-shadow: 0px 8px 23px -16px  var(--strong-cyan);
    -webkit-box-shadow:0px 8px 23px -16px  var(--strong-cyan);
    -moz-box-shadow:0px 8px 23px -16px  var(--strong-cyan);
}
.wrapper__buttons--cyan:hover {
    background:var(--strong-cyan-hover);
}

.wrapper__buttons--blue {
    background:var(--light-blue);
    box-shadow: 0px 8px 29px -12px var(--light-blue);
    -webkit-box-shadow: 0px 8px 29px -12px var(--light-blue);
    -moz-box-shadow: 0px 8px 29px -12px var(--light-blue);
}
.wrapper__buttons--blue:hover {
    background:var(--light-blue-hover);
}
/*STYLE OF THE SNIPPETS*/
.wrapper__snippets {
    margin-top:9em;
}

.wrapper__snippets img {
    margin-top:2.8em;
    width:100%;
}
.wrapper__snippets p {
    margin-top:0.4em;
}

/* STYLE OF CLIPBOARDS */
.wrapper__clipboard {
    margin-top:10.6em;
}

.wrapper__clipboard__image {
    margin-top:2.8em;
    width:100%;
}

/* STYLE OF WORKFLOW */
.wrapper__workflow {
    margin-top:5em;
}

.wrapper__workflow__productivity-tools {
    margin-top:5.05em;
}

.wrapper__workflow h2 {
    margin-bottom:0.4em;
}

.wrapper__workflow p {
    margin-top:0;
}

.wrapper__workflow h3 {
    margin-top:2.3rem;
    margin-bottom:0.7em;
}

.wrapper__workflow__productivity-tools section {
    margin-top:3.3rem;
}

/* LOGO STYLE */

.wrapper__logo {
    margin-top:7.3em;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4em;
}

.wrapper__logo__image {
    display:block;
}

/* STYLE CLIPBOARD IOS MAC */
.wrapper__clipboard-mac-ios {
    margin-top:10em;
    padding-bottom:8.5em;
}

/* FOOTER  */
li + li {
    margin-top:1.5em;
}

.footer-c {
    background:#F5f6f8;
    text-align:center;
    padding-bottom:3em;
}

.footer-c img {
    margin-top:2.5em;
    width:15%;
}

.footer-c ul {
    margin-top:2.3em;
    list-style:none;
    padding:0;
    margin-bottom:2em;
}

.footer-c ul li a {
    color:var(--dark-grayish-blue);
    text-decoration:none;
}
.footer-c ul li a:hover {
    color:var(--strong-cyan);
}
.footer-c__icons {
    margin-top:1em;
    display:flex;
    justify-content:center;
    align-content:center;
    gap:2.4em;
}

.fab {
    margin-top:0.6em;
    font-size:1.4em;
    color:var(--dark-grayish-blue);
    cursor:pointer;
}

.fa-facebook-square:hover {
    color:#4C6EF5;
}

.fa-twitter:hover {
    color:#00acee;
}

.fa-instagram:hover {
    color:#e95950;
}
@media all and (min-width:1024px) {
   
    body {
        background:url('../images/bg-header-desktop.png') no-repeat;
        background-size:contain;
    }
   
    .wrapper__buttons {
        display:flex;
        flex-direction:row;
        justify-content:center;


    }
   
    button {
        max-width:230px; 

    }
    /* STYLE OF ALL TITLES */
    
    h1 {
        font-size:2.7rem;
    }
   
    h2 {
        font-size:2.3rem;   
    }
   
    /* STYLE OF PARAGRAPHS */
    h1 + p {
        font-size:1.2rem;
    }
    
    h2 + p {
        font-size:1.1rem;
    }
   
    h2 + p, h1 + p {
        width:50%;
        margin-left:auto;
        margin-right:auto;
    }

    /* STYLE OF SNIPPETS */
     .wrapper__snippets__grid-component {
        display:grid;
        
        grid-template-columns:1.5fr 1fr;
        grid-template-rows:1fr;
        grid-template-areas:"pc   text";
        column-gap:3em;

        align-items:center;
    } 
  
    .wrapper__snippets__grid-component img {
        width:100%;
        max-width:750px;
        grid-area:pc;
        position:relative;
        left:-3.5em;    
    }
 
    .wrapper__snippets__grid-component div p {
        width:70%;
    }
 
    .wrapper__snippets__grid-component div {
        grid-area:text;
        text-align:left;
    } 

    /* STYLE OF SNIPPETS */
    .wrapper__clipboard__image {
        max-width:900px;
    }

    /* STYLE OF WORKFLOW */
    .wrapper__workflow {
        margin-top:4em;
        margin-left:auto;
        margin-right:auto;
        width:83%;
    }

    .wrapper__workflow__productivity-tools{
        display:flex;
        align-items:center;
        gap:1em;
    }

    .wrapper__workflow__productivity-tools section {
        width:45%;
        margin-top:0;

    }

    /* STYLE OF WRAPPER LOGO */
    .wrapper__logo {
        flex-direction:row;
        justify-content: center;
    }

    .wrapper__logo__image {
        /* width:100%; */
    }

    /* STYLE OF THE FOOTER */
    .footer-c {
        padding-bottom:1em;
        padding-top:1em;
    }
    .footer-c__wraper {
        display:flex;

        width:83%;
        margin-left:auto;
        margin-right: auto;
        justify-content: space-between;
    }
    .footer-c img {
        width:70px;
        height:70px;
        margin:0;

    }

    .footer-c__logo-faq {
        display:flex;
        flex-direction:row;
        align-items:center;
        gap:3em;
    }

    .footer-c__logo-faq__option{
        display:flex;
        flex-direction:row;
        gap:2em;
        align-items:center;
        flex-wrap:wrap;
        margin:0;
    }

    li + li {
        margin:0;
    }

    .footer-c__icons {
        margin:0;
        align-items:center;
    }
    .fab {
        margin:0;
    }
}