*,
*::before,
*::after{
    box-sizing: border-box;
}
:root{
    --ff-primary:'Source Sans Pro',sans-serif ;
    --ff-secondary:'Source Code Pro',monospace;
    --fw-reg:300;
    --fw-bold:900;
    --clr-light:#fff;
    --clr-dark:#303030;
    --clr-accent:#16e0bd;

    --fs-h1:3rem;
    --fs-h2:2.25rem;
    --fs-h3:1.25rem;
    --fs-body:1rem;
}
@media(min-width:800px){
  :root{
      --fs-h1:4.5rem;
      --fs-h2:3.75rem;
      --fs-h3:1.5rem;
      --fs-body:1.125rem;
  } 

}
header{
    display:flex;
    justify-content: space-between;
    padding:1em;
}
.nav{
    position:fixed;
    background:var(--clr-dark);
    color: var(--clr-light);
    top: 0;
    bottom: 0;
    left:0;
    right:0;
    z-index:100;
    transform:translateX(100%);
    transition: transform 250ms cubic-bezier(0.5,0,.5,1);

}
.nav__list{
    list-style:none;
    display:flex;
    height:100%;
    flex-direction: column;
    justify-content: space-evenly;
    align-items:center;
    margin:0;
    padding: 0;
}
.nav__link{
    color:inherit;
    font-weight:var(--fw-bold);
    font-size:var(--fs-h2);
    text-decoration: none;

}
.nav__link:hover{
    color:var(--clr-accent);
}
.nav-toggle{
    padding: 0.25em;
    background:transparent;
    border:0;
    cursor:pointer;
    position: absolute;
    right:1em;
    top:1em;
    z-index:1000;
}
.nav-open.nav{
    transform:translatex(0);

}
.nav-open.nav-toggle{
    position: fixed;
}
.hamburger{
    display:block;
    position:relative;

}
.hamburger,
.hamburger::before,
.hamburger::after{
    background:var(--clr-dark);
    width:2em;
    height:3px;
    border-radius: 1em;
    transition:transform 250ms ease-in-out;
}
.hamburger::before,
.hamburger::after{
   content:"";
   position:absolute;
   left:0;
   right:0;
    
}
.hamburger::before{top:6px;}
.hamburger::after{bottom:6px;}


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: 50%;
    margin-left: auto;
    margin-right: auto;
    
}
strong{font-weight: var(--fw-bold);}
h1,h2,h3{
    line-height:1.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{
    background: var(--clr-accent);
    font-family: var(--ff-secondary);

}
.section__subtitle--about{
    color: var(--clr-accent);
    font-weight:var(--fw-bold);
    margin-bottom: 2em;
}
.section__subtitle--work{
    color:var(--clr-accent);
    font-weight:var(--fw-bold);
    margin-bottom: 1em;
}


/*Intro section */
.intro{
    position:relative;

}
.service + .service{
    margin-left:2em;
}
.about-me{
    max-width:1000px;
    margin:0 auto;
}
.about-me__img{
    box-shadow:var(--bs) ;
}
@media(min-width:600px){
    .about-me{
        display:grid;
        grid-template-columns: 1fr 200px;
        grid-template-areas:
        "title img"
        "subtitle img"
        "text img";
        grid-column-gap:2em;
    }
    .section__title--about{
        grid-area:title;
    }
    .section__subtitle--about{
        grid-column:1/-1;
        grid-row:2;
        position:relative;
        left:-1em;
        width:calc(100% + 2em);
        padding-left:1em;
        padding-right: calc(200px+4em);

    }
    .about-me__img{
        grid-area: img;
        position:relative;
        z-index:2;
    }
}

/*my work*/
.my-work{
    background-color: var(--clr-dark);
    color:var(--clr-light);
    text-align:center;
}

.portfolio{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    
}
.portfolio__item{
    background-color: var(--clr-accent);
    overflow:hidden
}
.portfolio__img{
    transform: transform 750ms cubic-bezier(.5,0,.5,1),
    opacity 250ms linear;

}
.portfolio__item:focus{
    position:relative;
    z-index:2;
}

.portfolio__img:hover,
.portfolio__item:focus,.portfolio__img{
    transform: scale(1.2);
    opacity:.75;
}
.footer{
    background: #111;
    color:var(--clr-accent);
    text-align: center;
    padding: 2.5em 0;
}
.footer__link{
    font-size:var(--fs-h3);
    font-weight:var(--fw-bold) ;
}
.footer__link:hover, 
.social-list__link:hover{
    opacity:.7;
}
.footer__link:hover{
    text-decoration: underline;
}
.social-list {
    list-style: none;
    display: flex;
    justify-content: center;
    margin:2em 0 0;
    padding:0;
}
.social-list__item{
    margin:0.5em;
}