*,
*::before,
*::after {
    box-sizing: border-box;
}
:root {
    --ff-primary: 'Exo 2';
    --ff-secondary: 'Exo 2';

    --fw-reg: 300;
    --fw-bold: 900;
    
    --clr-dark: #000000;
    --clr-light: #fff;
    --clr-accent: #ff9d00;
    
    --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);

}

html {
    scroll-behavior: smooth;
}

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



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



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

:focus {
    outline: 3px solid var(--clr-accent);
    outline-offset: 3px;
}
.btn{
    display: inline-block;
    padding: .5em 2.5em;
    background: var(--clr-accent);
    color: var(--clr-dark);
    text-decoration: none;
    cursor: pointer;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: var(--fw-bold); 
    transition: transform 200ms ease-in-out;

}
.btn:hover{
    transform: scale(1.1);
} 

section {
    padding: 5em 2em;
}

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) }

.title{
    margin-bottom: .25em;
}
.title--introduction{
    font-weight: var(--fw-reg);
}
.title--introduction strong{
    display: block;
}

.subtitle{
    margin: 0;
    font-size: var(--fs-h3);
}
.subtitle--introduction,
.subtitle--about{
    background: var(--clr-accent);
    font-family: var(--ff-secondary);
    margin-bottom: 1em;
    padding: .25em 1em;
}

.title-work{
    color: var(--clr-accent);
    font-weight: var(--fw-bold);
    margin-bottom:10px;
}
.subtitle-work{
    margin-bottom: 20px;
}

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

}
.list{
    list-style: none;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content:flex-start;
    margin: 20px;
    align-items: center;    
    padding: 30px;

}

.nav-item{
   text-decoration: none; 
   color: inherit;
   font-size: 20px;
}
.nav-item:hover{
    color: var(--clr-light);

}
.span1{
   display: block;
   position: relative;
}
.nav-btn{
    padding: .5em;
    background: transparent;
    border: 0;
    cursor: pointer;
    position: absolute;
    top: 1em;
    right: 1em;
    z-index: 1000;
}

.nav-open .nav {
    transform: translateX(0);
}

.nav-open .nav-btn {
    position: fixed;
}

.nav-open .span1 {
    transform: rotate(.625turn);
}

.nav-open .span1::before {
    transform: rotate(90deg) translateX(-6px);
}
.nav-open .span1::after {
    opacity: 0;
}


.span1,
.span1::before,
.span1::after{
   background:var(--clr-light);
   width: 2em;
   height: 3px;
   border-radius: 1em;
   transition: transform 250ms ease-in-out;

}

.span1::before,
.span1::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
}
.span1::before{
    top:6px;
}
.span1::after{
    bottom: 6px;
}



.nav-open .nav{
    transform: translateX(0);
}

/* introduction */

.introduction{
    position: relative;
}
.nav-open .nav-btn{
    position: fixed;

}
.nav-open .span1{
    transform: rotate(90deg) transform ;
}

.subtitle--introduction{
    display: inline-block;
}

@media (min-width: 600px) {
    .introduction {
        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;
    }
            
    .introduction__img {
        grid-area: img;
        min-width: 250px;
        position: relative;
        z-index: 2;
    }    
            
    .subtitle--introduction {
        align-self: start;
        grid-column: -1 / 1;
        grid-row: 2;
        text-align: right;
        position: relative;
        left: -1.5em;
        width: calc(100% + 1.5em);
    }
}

    
    .introduction__img {
        grid-area: img;
        min-width: 250px;
        position: relative;
        z-index: 2;
    }    
    
    .subtitle--introduction {
        align-self: start;
        grid-column: -1 / 1;         
        grid-row: 2;
        text-align: right;
        position: relative;
        left: -1.5em;
        width: calc(100% + 1.5em);
    }

    /* My Services */

    .my-services {
        position: relative;
        color: var(--clr-light);
        text-align: center;
      }
      
      .my-services::before {
        content: "";
        background-image: url(./img/myServiceBG.jpg);
        background-size: cover;
        background-position: center;
        filter: blur(5px); /* Adjust the blur value as needed */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
      }
      
    .title--myservice{
        color: var(--clr-accent);
        position: relative;
    }
    .title--myservice::after{
        content: '';
        display: block;
        width: 3em;
        height: 1px;
        margin: 0.5em auto 1em;
        background: var(--clr-accent);
        opacity: 0.25;
    }
    .services {
        margin-bottom: 4em;
    }
    .service{
        max-width: 500px;
        margin: auto;
    }

    @media (min-width: 800px) {
        .services{
            display: flex;
            max-width: 1000px;
            margin-left: auto;
            margin-right: auto;
        }

        .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;
        }
        .subtitle--about{
            grid-area: title;

        }
        .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-works{
        background-color: var(--clr-dark);
        color:var(--clr-light);
        text-align: center;
    }
    
    .portfolio{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    .portfolio__item{
        /* background: var(--clr-accent); */
        overflow: hidden;
    }
    .portfolio__img{
        transition: 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: 0.80;
    }

/* footer */

.footer{
    background: rgb(36, 36, 36);
    color: var(--clr-accent);
    text-align: center;
    padding: 2.5em 0;
    font-size: var(--fs-h3);
}
footer a{
    color: inherit;
    text-decoration: none;
}

.footer__link:hover,
.social-media__link:hover{
    opacity: .8;
}
.footer__link:hover{
    text-decoration: underline;
}
.social-media{
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 2em 0 0;
    padding: 0;
    
}
.social-media__items{
    margin: 0 .5em;
}
.social-media__link{
    margin: .5em;
}

/* Individual projects  */

.project-item-individual {
    padding: 0 2em 2em;
    max-width: 1000px;
    margin: 0 auto;
}

.project-item-individual p {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.video {
    width: 580px; 
    height: 360px;
  }
.project__img{
    width: 200px;
    height: 200px;
}
.site-link{
    color: black;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
.site-link:hover {
    background-color: #0056b3; 
  }