*,
::before,
::after{
	box-sizing: border-box;
}

/*Custom properties (relative to our need)*/

html{
	scroll-behavior: smooth;
}


:root{
	--fontf-primary: 'Lora', serif;
	--fontf-secondary: 'Roboto slab', serif;

	--fontweg-reg:  400;
	--fontweg-bold: 700;

	--color-light: #fff;
	--color-dark: #303030;
	--color-accent: #C71585;
	--fsize-h1: 3rem;
	--fsize-h2:  2.25rem;
	--fsize-h3: 1.25rem;
	--fsize-body:  1rem;

	--boxshadow: 0.25em 0.25em 0.75em rgba(0,0,0,0.25),
	0.125em 0.125em 0.25em rgba(0,0,0,0.15);
}

@media(min-width: 800px){
	:root{

	--fsize-h1: 4.5rem;
	--fsize-h2:  3.75rem;
	--fsize-h3: 1.5rem;
	--fszie-body:  1.125rem;
	}
}

				/* General Styles */

body{
	background:  var(--color-light);
	color:  var(--color-dark);
	margin:  0;
	font-family: var(--fontf-primary);
	font-size: var(--fsize-body);
	line-height:  1.6;

}

/* 5em -top and bottom, 2em-lefty and right*/

section{
	padding: 5em 2em;
}


img{
	display:  block;
	max-width: 100%;
}

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

/* to apply to all properties elements etc ..when someone clicks some specific area it shines or get focused*/

:focus {
	outline: 3px solid var(--color-accent);
	outline-offset: 3px;
}

/* -- Buttons */

.btn{
	display: inline-block;
	padding: 0.5em 1.5em;
	background: var(--color-accent);
	color: var(--color-dark);
	text-decoration: none;
	cursor: pointer;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: var(--fontweg-bold);
	transition: transform 200ms ease-in-out;
	border-radius: 20px;
}

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


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

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


.section__title{
	margin-bottom: .25em;
}

.section__title--intro{
	font-weight: var(--fontweg-reg);
}

.section__title--intro strong{
	display: block;
}

.section__subtitle{
	margin:  0;
	font-size: var(--fsize-h3);
}

.section__subtitle--intro,
.section__subtitle--about {
	background: var(--color-accent);
	padding:  0.25em 1em;
	font-family: var(--fontf-secondary);
	margin-bottom: 1em;
}

.section__subtitle--intro{
	display: inline-block;
}


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


/* --- Header ---*/

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

.nav{
	position: fixed;
	background: var(--color-dark);
	color: var(--color-light);
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;

	transform: translate(100%);

	transition: transform 250ms cubic-bezier(0.5, 0, 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(--fontweg-bold);
	font-size: var(--fsize-h3);
	text-decoration: none;
}

.nav__link:hover{
	color:  var(--color-accent);
}

.navbutton{
	padding: .5em;
	background: transparent;
	border: 0;
	cursor: pointer;
	position: absolute;
	right: 1em;
	top: 1em;
	z-index: 1000; /*to make at the top of the list itmes when list is opened*/
}


.nav__open .nav{
		transform: translateX(0);
}

.nav__open .navbutton{
		position: fixed;
}

.nav__open .hamburger{
	transform: rotate(.625turn);
}

.nav__open .hamburger::before{
	transform: rotate(90deg) translateX(-6px);
}

.nav__open .hamburger::after{
	opacity: 0;
}

.hamburger{
	display: block;
	position: relative;
}

.hamburger,
.hamburger::before,
.hamburger::after{
	background: var(--color-accent);
	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; }


/* --- Intro Section */

.intro{
	position: relative;

}


/* --- Mobiles and Tabs and any small screen--*/

 .intro__img{
 	box-shadow: var(--boxshadow);
 }

 .intro__img:hover{
	transform: scale(1.05, 1.05);
 }

@media(min-width: 600px) {
	 .intro {
	 	display: grid;
	 	grid-column-gap: 1em;
	 	width: min-content;
	 	margin:  0 auto;
	 	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: 2;
	 }


	 /* -1/1 means ..stretches over the edges of grid -- to overcome overlapping issue*/
	 /*relative will shift bar instead of covering area so to cover the right hand space we use*/
	 /*width: calc(100% + 1.5em);*/

	 .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 Section now (title)---*/

.my-services{
	background-color: var(--color-dark);
	background-image: url(../images/portfolio4.png);
	background-blend-mode: multiply;
	background-size: cover;
	color: var(--color-light);
	text-align: center;
}

.section__title-services{
	color: var(--color-accent);
	position: relative;
}

.section__title-services::after{
	content:'';
	display: block;
	width: 2em;
	height: 1px;
	margin: 0.5em auto 1em;
	background: var(--color-light);
	opacity: 0.25em;
}


/*For button to be not too conjusted with the whole section let us add some spacing */

.services{
	margin-bottom: 4em;
}


/* to make our paras look slightly squeezed for the big screen we'll add width to service*/

.service {
	width: 500px;
	margin: 0 auto;
}

/* -- My services --Mediawidth(according to smaller screens) -- For the partas in service*/
/*services is your whole damn Div for the Service section - we CSS it in a way that when on small screen ..so that..*/
/*..all three paras alongweith heading comes in line n in center */



/* a little change in the margin as when the screen gets squeezed it is getting too clingy with the paras*/
/*Just so it doesn't override the margin bottom in our services*/

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

		/*With below we are going to create distance between paras for bigger screen*/
		/* this plus between service and service will do the margin things between paras and not for the outside margin*/
		
		.service + .service {
				margin-left: 2em;
		}
	}

.about-me{
		width:  1000px;
		margin:  auto;
}

.about-me__img{
	box-shadow: var(--boxshadow);
}

@media (min-width: 600px){
	.about-me{
	display: grid;
	grid-template-areas:
	"title img"
	"subtitle img"
	"text img";
	grid-column-gap: 2em;
}
.section__title--about{
		grid-area: title;
}

.section__subtitle--about{
		grid-area: subtitle;
		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;
}
.about-me__img:hover{
	transform: scale(1.05,1.05);
 }
 }

 /* My Work Section */

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

.portfolio{
	display: grid;
	grid-template-columns: /*repeat(3, 1fr);*/ repeat(auto-fit, minmax(300px, 1fr));
}

.portfolio__item{
	background: var(--color-accent);
	overflow: hidden;
}

.portfolio__img{
	transition:  
	transform 750ms cubic-bezier(0.5, 0, 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: .85;
}

/*Footer*/

.footer{
	background: #111;
	color:  var(--color-accent);
	text-align: center;
	padding: 2.5em 0;
}

.footer a {
	color: inherit;
	text-decoration: none;
	font-size: var(--fsize-h3);
}

.footer__link{
	/*font-size: var(--fsize-h3);*/
	font-weight: var(--fontweg-bold);
}

.footer__link:hover,
.social-list__link:hover{
	opacity:  0.7;
}

.footer__link:hover{
	text-decoration: none;
}

.social-list{
	list-style: none;
	display: flex;
	justify-content: center;
	margin: 2em 0 0;
	padding: 0;

}

.social-list__item{
	margin: 0 .5em;
}
.social-list__link{
	padding: .5em;
}

/*individual portfolio Project*/


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

.portfolio-project p {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.portfolio-project__img:hover{
	transform: scale(1.1);
	overflow: hidden;
}

/*html, body {
  background: #333;
  height: 100%;
  overflow: hidden;
  text-align: center;
}*/

.svg-wrapper {
  height: 60px;
	margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 320px;
}

.shape {
  fill: transparent;
  stroke-dasharray: 140 540;
  stroke-dashoffset: -474;
  stroke-width: 8px;
  stroke:  #C71585;
}
  /*stroke: #19f6e8;
}*/

.text {
  color: var(--color-dark);
  text-align: center;
  font-size: 22px;
  letter-spacing: 8px;
  line-height: 32px;
  position: relative;
  top: -48px;
}

@keyframes draw {
  0% {
    stroke-dasharray: 140 540;
    stroke-dashoffset: -474;
    stroke-width: 8px;
  }
  100% {
    stroke-dasharray: 760;
    stroke-dashoffset: 0;
    stroke-width: 2px;
  }
}

.svg-wrapper:hover .shape {
  -webkit-animation: 0.5s draw linear forwards;
  animation: 0.5s draw linear forwards;
}