*,
*::before,
*::after{
    box-sizing: border-box;
}
:root{
    --ff-primary:'Caveat', cursive;
    --ff-secondary:Helvetica, Arial, Sans-Serif;
    --ff-body:cursive, Sans-Serif;

    --fw-reg:300;
    --fw-bold:900;

    --clr-light:#1111;
    --clr-dark:#1e1e1e;
    --clr-accent:#75DA8B;

    --fs-h1:3rem;
    --fs-h2:2.25rem;
    --fs-h3:1.25rem;
    --fs-body:1rem;

    --bs:0.25em 0.25em 0.75em rgba(0,0,0,.25),
    0.125em 0.125em 0.25em rgba(0,0,0,.15);
}
@media (min-width:800px){
    :root{
        --fs-h1:4.5rem;
        --fs-h2:3.75rem;
        --fs-h3:1.5rem;
        --fs-body:1.125rem;
    }
}

html{
    scroll-behavior: smooth;
}

body{
    background: var(--clr-light);
    color: var(--clr-dark);
    margin: 0;
    font-family: var(--ff-primary);
    font-size: var(--fs-body);
    line-height: 1.6;
}
section{
    padding: 5em 2em;
}
img{
    display: block;
    max-width: 100%;
}

strong{
    font-weight: var(--fw-bold);
}

.btn{
    display:inline-block;
    padding: .5em 3.75em;
    background: var(--clr-accent);
    color: var(--clr-dark);
    text-decoration: none;
    cursor: pointer;
    font-size: .8rem;
    font-family: var(--ff-secondary);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: var(--fw-bold);
    transition: transform 200ms ease-in-out;
    outline: 2px solid var(--clr-dark);
    text-align: center;
    margin-top: 1.25em;
    margin-left: auto;
    margin-right: auto;
    align-self: center;
}
.btn:hover{
    transform: scale(1.1);
}

h1,
h2,
h3{
    line-height: 1;
    margin: 0;
}

h1{
    font-size: var(--fs-h1);
}
h2{
    font-size: var(--fs-h2);
}
h3{
    font-size: var(--fs-h3);
}

.section_title{
    margin-bottom: .25em;
}
.section_title_intro{
    font-weight: var(--fw-reg);
}
.section_title_intro strong{
    display: block;
}
.section_subtitle{ 
    margin: 0;
    font-size: var(--fs-h3);
}
.section_subtitle_intro,.section_subtitle_about,.section_subtitle_contact{
    background: var(--clr-accent);
    padding: .25em 1em;
    font-family: var(--ff-secondary);
    margin-bottom: 1em;
}

header{
    display: flex;
    justify-content: space-between;
    padding: 1em;
}
.logo{
    max-width: 150px;
}


.intro{
    position: relative;
}
.intro-image{
    box-shadow: var(--bs);
}
@media (min-width:600px){
    .intro{
        display: grid;
        width: min-content;
        margin: 0 auto;
        grid-column-gap:1em;
        grid-template-areas:
        "img title"
        "img subtitle";
        grid-template-columns: min-content max-content;
    }
    .intro-image{
        grid-area: img;
        min-width: 250px;
        position: relative;
        z-index: 2;
    }
    .section_subtitle_intro{
        align-self: start;
        grid-column: -1 / 1;
        grid-row: 2;
        text-align:right;
        position: relative;
    }
}
.btn-intro{
    grid-column: 2;
}

.about-me,.contact-me{
    max-width: 1000px;
    margin: 0 auto;
}
.about-me_image{
    box-shadow: var(--bs);
}
.about-me_body,.contact-me_body,.contact-me_social{
    font-family: var(--ff-body);
}
.hide-on-mobile{
    display: none;
}

@media (min-width:800px){
    .about-me{
        display: grid;
        grid-template-columns: 1fr 300px ;
        grid-template-areas:
        "title img"
        "subtitle img"
        "text img";
        grid-column-gap: 2em;
    }
    .contact-me{
        display: grid;
        grid-template-columns: 1fr 400px;
        grid-template-areas: 
        "title  title"
        "subtitle text"
        "body text" ;
        grid-column-gap: 2em;
    }
    .section_title_about,.section_title_contact{
        grid-area: title;
    }
    .section_subtitle_about,.section_subtitle_contact{
        align-self: start;
        grid-column: -1 / 1;
        grid-row: 2;
        position: relative;
    }
    .section_subtitle_about{
        text-align:left;
    }
    .section_subtitle_contact{
        text-align:right;
    }
    .about-me_image{
        grid-area: img;
        position: relative;
        z-index: 2;
    }
    .hide-on-mobile{
        display: block;
    }
}

.feedback input[type="text"], .feedback input[type="email"], .feedback input[type="textarea"]{
    display: block;
    outline: none;
    height: 50px;
    width: 300px;
    margin-bottom: 1em;
    margin-top: 1em;
    text-align: center;
    box-shadow: var(--bs);
}
.feedback input[type="textarea"]{
    height: 80px;
}
.feedback input[type="submit"]{
    outline: none;
}
.btn-feedback{
    margin-bottom: 1em;
}

.social-list_contact{
    list-style: none;
    display: flex;
    justify-content: center;
    font-size: var(--fs-h3);
}

.social-list{
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 2em 0 0;
    padding: 0;
    font-size: var(--fs-h3);
}
.social-list_item{
    margin: 0 .5em 0 0;
}

.footer{
    background: var(--clr-dark);
    color: #FFFFFF;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--ff-secondary);
    padding: .25em;
}