*,
*::before,
*::after{
				box-sizing: border-box;
				margin: 0;
				overflow-x: hidden;
				list-style: none;
				text-decoration: none;
}

/* custom properties*/

:root{
				--ff-primary: Arial, Helvetica, Verdana , sans-serif;
				--ff-secondary: monospace;
				
				--fw-reg: 300;
				--fw-bold: 900;
				
				--clr-light: #fff;
				--clr-dark: #303030;
				--clr-accent: #16e0bd;
				
				--fs-h-one: 3rem;
			 --fs-h-two: 2.25rem;
			 --fs-h-three: 1.25rem;
			 --fs-body: 1rem;
			 --bs: 0.25em 0.25em 0.75em rgba(0,0,0,0.5),
			       0.125em 0.125em 0.5em rgba(0,0,0,0.25);
				
}

@media (min-width: 800px){
				:root{
				--fs-h-one: 4.5rem;
			 --fs-h-two: 3.75rem;
			 --fs-h-three: 1.5rem;
			 --fs-body: 1.125rem;
				}
}

html{
				scroll-behavior: smooth;
				overflow-x: hidden;
}

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%;
				box-shadow: var(--bs);
}
strong{
				font-weight: var(--fw-bold);
}
:focus{
      
				outline: 2px solid var(--clr-accent);
				outline-offset: 3px;
}
/* header */

header{
				display: flex;
				justify-content: space-between;
				padding: 1em;
}
nav{
				position: fixed;
				inset: 0;
				background: var(--clr-accent);
		   z-index: 100;
				transform: translateX(100%);
				display: grid;
		   place-items: center;
		   transition: transform 1s ease;
				
}
.nav__list{
				margin: 0;
				padding: 0;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				flex-direction: column;
				min-height: 100vh;
		   
}
.nav__item{
			 background: transparent;
			 transition: 1s ease;
}
.nav__item:hover{
				opacity: 0.75;
				transform: scale(1.2);
				background: #fff;
				
}
.nav__link{
				color: var(--clr-dark);
			 text-transform: uppercase;
			 font-weight: var(--fw-bold);
			 margin-block: 4em;
			 padding: .25em .5em;
}
.logo{
				margin: 2vmin 1vmin;
				max-width: 150px;
				
}
.logo span{
				color: var(--clr-accent);
				font-size: var(--fs-h-three);
				font-width: var(--fw-bold);
}
.nav-toggle{
				border: 0;
				background: transparent;
				cursor: pointer;
				position: absolute;
				right: .5em;
				top: 2.0em;
				
}
.hamburger{
				background: var(--clr-dark);
				width: 2em;
				height: 3px;
				border-radius: 4px;
				display: block;
				position: relative;
				margin: 3px;
				z-index: 1000;
}
.nav-open .nav{
				transform: translateX(0);
}
.nav-open .nav-toggle{
				position: fixed;
				z-index: 1000;
}
.nav-open .hamburger{
				transform: rotate(.625turn);
}
.nav-open .hamburger--before{
				transform:  rotate(135deg) translateX(4px);
				transform-origin: bottom;
				
}
.nav-open .hamburger--after{
				opacity: 0;
}
/* Typography */

h1,h2,h3{
      line-height: 1.3;
				margin: 0;
}
h1{
				font-size: var(--fs-h-one);
}
h2{
				font-size: var(--fs-h-two);
}

h3{
				font-size: var(--fs-h-three);
}

.section__title{
				margin-bottom: 0.25em;
				
}
.section__subtitle{
				margin: 0;
				font-size: var(--fs-h-three);
}
.section__subtitle--intro,.section__subtitle--about{
      background: var(--clr-accent);
				font-family: var(--ff-secondary);
				margin-bottom: 1.5em;
				padding: 0.5em 2em;
}

.section__title--intro{
				font-weight: var(--fw-reg);
				
}
.section__title--intro strong{
				display: block;
}
.section__subtitle--intro{
				display: inline-block;
}

/* intro section */


intro{
				position: relative;
}


@media (min-width:600px){
				section.intro{
								display: grid;
								grid-gap: 1em;
								grid-template-areas: 
								"img title"
								"img subtitle";
								
								grid-template-columns: min-content max-content;
				}
				.intro__img{
								grid-area: img;
								min-width: 250px;
								position: relative;
								z-index: 3;
								}
				.section__subtitle--intro{
								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{
				background-image: url("images/thumb05.jpg");
				background-color: var(--clr-dark);
		   filter: brightness(100%);
				background-attachment: fixed;
				background-position: center;
				background-size: cover;
				background-blend-mode: multiply;
				color: var(--clr-light);
				text-align: center;
				
}
.my-services h3{
				margin: 2em 0;
}
.section__title--services{
				color: var(--clr-accent);
}
.section__title--services::after{
				content: "";
				display: block;
				width: 3em;
				height: 1px;
				background: var(--clr-light);
				margin: 0.5em auto 1em;
				opacity: 0.25;
}
.service{
				max-width: 500px;
				margin: 0 auto;
}
@media (min-width: 700px){
				.services{
								display: flex;
								max-width: 1000px;
								margin: 0 auto;
				}
				.service + .service{
								margin-left: 1.3em;
				}
}

.btn{
				display: inline-block;
				padding: 0.5em 2em;
				color: var(--clr-dark);
				text-decoration: none;
				background: var(--clr-accent);
				margin-top: 3.5em;
				text-transform: uppercase;
				letter-spacing: 1;
				font-weight: var(--fw-bold);
				font-size: 0.8em;
				cursor: pointer;
				transition: 1s ease;
				
}
.btn:hover{
				transform: scale(1.5);
				opacity: 0.5;
}

.about-me{
				max-width: 1000px;
				margin: 0 auto;
}
.about-me__body p{
				margin: 2em 0;
}

@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;
				}
				.about-me__img{
								grid-area: img;
								position: relative;
								z-index: 5;
				}
				.section__title--about{
								grid-area: title;
				}
				.section__subtitle--about{
								grid-area: subtitle;
								grid-column: 1/-1;
								grid-row: 2;
								position: relative;
								left: -2em;
								padding-left: 1em;
								width: calc(100% + 4em);
								padding-right: calc(200px + 2em);
				}
				.about-me__body{
								grid-area: text;
				}
}


.my-work{
				text-align: center;
				background: var(--clr-dark);
				color: var(--clr-light);
}
.section__subtitle--work{
				margin-bottom: 2em;
				color: var(--clr-accent);
				font-weight: var(--fw-bold);
}
.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(0.5,0,0.5,1), opacity 750ms linear;
}
.portfolio__item:focus{
				position: relative;
				z-index: 6;
}
.portfolio__img:hover,.portfolio__item:focus.portfolio__img{
				transform: scale(1.2);
				opacity: 0.85;
}
footer{
				
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: var(--clr-accent);
				background: #666;
				padding: 2em;
				
}
footer a{
				color: inherit;
				text-decoration: none;
}
.footer__link:hover, .social-list__link:hover{
				opacity: 0.7;
}
.footer__link:hover{
				text-decoration: underline;
}
.social-list{
      display: flex;
				justify-content: center;
				margin-block: 2em;
				list-style: none;
				margin-inline: auto;
}
.social-list__item{
				margin-left: 0.5em;
}

/* portfolio-item-details */
.portfolio-item-details{
				margin: 2em auto;
				padding: 2em;
				max-width: 1000px;
				
}
.portfolio-item-details p{
				margin-bottom: .5em;
}

.to-top{
				padding: 0.5em 1.5em;
				background: var(--clr-accent);
				color: var(-clr-light);
				position: fixed;
				right: 0;
				bottom: 10px;
				z-index: 999999;
}