*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}
.header{
    display: grid;
    background-color: #000000;
    grid-template-columns: 1fr;
    align-items: center;
    text-align: center;
    padding: 0%;
    opacity: .96;
    height: 78px;

    
}
.body{  
    background-color:111111; 
    display: block;
    margin: 0%;
    
    
}

.header>div>span>a{
    color: peachpuff;
    font: bold;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    padding:10;
    text-decoration: none;
    border:none;
    outline: none;

}
.header>div>span>a:hover{
    background: linear-gradient(45deg, rgb(255,163,0), #EE0000);
	border-radius: 3px;
}

.home{
    display: grid;
    margin-top: 10%;
    margin-bottom: 10%;
    grid-template-columns: 1fr 1fr;;
	min-height: 100vh;	
   
    
}
.profile{
    width: 50%;
    position: relative;
    justify-self: center ;
    border: 9px solid transparent;
	border-image: linear-gradient(to left, rgb(255, 163, 0), #EE0000);
	border-image-slice:1;

}

.profile p{
    font-family: Montserrat, sans-serif;
    color: peachpuff;
    justify-content: center;
    font-size: 68px;
}

.about{
	margin-top: 10%;
    width :50%;
    position: relative;
    justify-self: center ;
    font-family: Montserrat, sans-serif;
   
}
.about-head{
    margin: 7px;
    text-align: center;
    margin-right: 10px;
    
}
.about-head h
{   color: peachpuff;
    font-size: 48px;
    border-bottom: 9px solid;
	border-image: linear-gradient(to left,#ffa300,#EE0000);
	border-image-slice:1;
}
.about p{
    color: peachpuff;
    font-size:24px;
}
.projects{
	display:block;
	font-family: Montserrat, sans-serif;
}
.project_head{
	color:peachpuff;
	border-bottom:9px solid ;
	border-image: linear-gradient(to right, #ffa300,#EE0000) ;
	border-image-slice: 1;
}

.proj_grid{
	display:grid;
	min-height:100vh;
	grid-template-columns:  1fr 1fr 1fr;
	
}
.card{
     height:50vh;
	 background-image: linear-gradient(45deg, #ffa300, #EE0000);
	 margin-left:20%;
	 margin-right:20%; 
	 margin-top :30%; 
	 box-shadow:0px 4px 8px 0px #000000; 
} 
.cardimg1{
		grid-area: cardimg1;
	 	width:100%;
		height:50%; 
		background-image:url('img/laptopimg1.jpg'); 
		background-size:cover; 
		background-repeat:no-repeat; background-blend-mode:overlay; 
}
.info h1 { 
	color: #000000; 
	font-size: 32px; 
	font-weight: 500; 
}

.info{
	padding-top:20px;
	padding-left:8px;
	padding-right:8px;
	text-align:center;
	font-size:18px;	
	font-weight: 300;
	color:peachpuff;
}

.cardimg2{
		grid-area: cardimg2;
		width:100%;
		height:50%;
		background-image:url('img/laptopimg2.jpg');
		background-size:cover;
		background-repeat:no-repeat;
		background-blend-mode:soft;
}

.cardimg3{
		grid-area: cardimg3;
		width:100%;
		height:50%;
		background-image:url('img/laptopimg3.jpg');
		background-size:cover;
		background-repeat:no-repeat;
		background-blend-mode:overlay;
}

.card:hover{
	height: 60vh;
	box-shadow:0px 12px 16px 0px #000000;
	transition:0.3s;
}


.contact{
	margin-top: 10%;
	

}
.contacts_head{
	text-align:center;
	color:peachpuff;
	border-bottom:9px solid ;
	border-image: linear-gradient(to right,rgb(255,163,0),#EE0000);
	border-image-slice: 1;


}

.contact_body{
		display: flex;
		min-height: 50vh;
		max-height: 100vh;
		width: 100%;
		justify-content: center;
		align-items: center;
		align-content: center;
}
.contact_logo{
		background-image: linear-gradient(45deg, #ffa300,#EE0000 );
		height: 10vh;
		align-self: center;
		width:30%;
		display:flex;
	   border-radius: 10px;	
	   justify-content: space-around;
	   align-items: center;
	   align-content: center;

}

.logo1{
	background-size: contain;
	border-radius: 100px;
	background-color: peachpuff;
	height: 8vh;
	width: 8vh;
	align-self: center;

}
.social{
		max-height: 8vh;
		max-width: 8vh;
}
.logo{
	align-self: center;
	background-size: contain;
	border-radius: 100px;
	background-color: peachpuff;
	height: 8vh;	
	width: 8vh;
}
.logo1:hover{
		
		background-image: linear-gradient(90deg,#ffa300,#EE0000)
}
.logo:hover{
		
		background-image: linear-gradient(90deg,#ffa300,#EE0000)
}
@media only screen and (max-width:550px)
{
		.profile p{
				font-size: 42px;

		}

		.about-head h {
				font-size:24px;

		}
		.about div p {
				font-size: 16px;
		}
}

@media only screen and (max-width:800px){
		.contact_logo{
				width:36vh;
		}
}

@media only screen and (max-width:1000px){

	.home{
		display: grid;
		margin-top: 10%;
		margin-bottom: 10%;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr;
    

}
.profile{
		height: 100vw;
		font-size: 24px;

}
.about{
		height: 100vw;
		font-size: 24px;
}

.proj_grid{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	}
}