style.css

@import 'utilities.css';
:root{
	--primary:#FF9900;
	--dark:#555555;
	--pure:#FFFFFF;
	--light:#F2F2F2;
	--blue:#4285F4;
	--ternary:#898989;
}
body{
	height:4800px;
	font-family:'Poppins',sans-serif;
}
html{
	scroll-behavior:smooth;
}
*{
	padding:0;
	margin:0;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
}
header
{
	background:var(--dark);
	height:680px;
	clip-path:polygon(0 0, 100% 0, 100% 100%, 80% 90%, 0 100%);
}
.container{
	max-width:1152px;
	padding:0 15px ;
	margin:0 auto;
}
@media (min-width:576px){
	.container{
		max-width:540px;
	}
}
@media (min-width:768px){
	.container{
		max-width:720px;
	}
}
@media (min-width:992px){
	.container{
		max-width:960px;
	}
}
@media (min-width:1200px){
	.container{
		max-width:1152px;
	}
}
header nav .left a{
	color:var(--pure);
	text-decoration:none;
	margin-right:2rem;
	text-transform:uppercase;
	transition:all .3s ease;
}
header nav .left a:hover{
	color:var(--primary);
}
header nav{
	padding:2rem 0;
}
header nav .brand{
	margin-right:3rem;
	color:var(--pure);
	font-size:2rem;
}
header nav .brand span{
	color:var(--blue);
}
.hero{
	padding:2rem 0;
}
.hero .left img{
	width:400px;
	height:430px;
	padding:0 30px;
}
.hero .right{
	color:var(--pure);
}
.hero .right h2{
	font-size:2.5rem;
	color:#3498db;
	margin-bottom:0.5rem;
}
.hero .right h1{
	font-size: 4rem;
	font-weight:100;
	line-height:1.2;
	margin-bottom:2rem;
}
.hero .right h1 span{
	color:var(--primary);
}
.hero .right p{
	line-height:1.9;
	margin-bottom:2rem;
}
.hero .right{
	margin-top:-7rem;
}
section{
	padding:6rem 0;
}
section.about .about-me-img{
	height:430px;
	width:300px;
}
section.about h1{
	margin bottom:1rem;
	font-size:1.6rem;
	font-weight:400;
}
section.about h1 span{
	color:var(--primary);
}
section.about h3{
	font-size:1rem;
	margin-bottom:1rem;
	font-weight:400px;
}
section.about p{
	font-family:'Lato',sans-serif;
	color:var(--ternary);
	line-height:1.8;
	margin-bottom:2rem;
}
section.about .social{
	display:flex;
}
section.about .social a{
	background-color:var(--dark);
	display:flex;
	align-items:center;
	justify-content:center;
	height:35px;
	width:35px;
	border-radius:50%;
	margin-right:0.6rem;
	transition:all .3s ease;
}
section.about .social a:hover{
	background:var(--primary);
}
section.about .social a img{
	width:100%;
	height:100%;
	padding:0.5rem;
}
.section-heading{
	color:#070606;
	text-align:center;
	margin-bottom:1rem;
	line-height:0.5;
}
.section-heading span{
	color:var(--primary);
}
.section-heading + p{
	color:var(--primary);
	font-family:'Lato',sans-serif;
	margin-bottom:8rem;
	text-align:center;
}
section.education{
	background:lightgrey;
	height:700px;
	margin-top:2rem;
}
section.education .card-wrapper{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	grid-column-gap:2rem;
	grid-row-gap:6rem;
}
section.education .card-wrapper .card{
	background:var(--pure);
	padding:3rem 2rem;
	position:relative;
	padding-top:4rem;
	text-align:center;
	transition:all .3s ease;
}
section.education .card-wrapper .card img{
	width:100px;
	height:100px;
	position:absolute;
	top:-3.5rem;
	left:50%;
	transform:translateX(-50%);
}
section.education .card-wrapper .card h2{
	font-weight:400;
	font-size:1.2rem;
	margin-bottom:0.5rem;
}
section.education .card-wrapper .card p{
	font-family:'Lato',sans-serif;
	color:var(--primary);
	line-height:1.6;
}
section.education .card-wrapper .card:hover{
	background:lightgoldenrodyellow;
}
section.education .card-wrapper .card:hover h2{
		color:#070606;
}
section.education .card-wrapper .card:hover p{
	color:#070606;
}
section.skills{
	height:700px;
	clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 90%, 0 100%);
	background-color:#DAF7A6;
}

section.skills .card-wrapper{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	grid-column-gap:5rem;
	grid-row-gap:4rem;
}

section.skills .card-wrapper .card{
	background:var(--pure);
	padding:2rem 1rem;
	position:relative;
	padding-top:2rem;
	text-align:center;
	transition: all .3s ease;
}
section.skills .card-wrapper .card img{
	width:30px;
	height:30px;
	position:absolute;
	top:-0.5rem;
	left:50%;
	transform:translateX(-50%);
}
section.skills .card-wrapper .card h1{
	font-weight:400;
	font-size:1.2rem;
	margin-bottom:0.5rem;
}
section.skills .card-wrapper .card:hover{
	background:#d7bde2 ;
}
section.skills .card-wrapper .card:hover h2{
		color:#070606;
}
section.projects{
	max-width:1152px;
	padding-top:3rem;
	margin:0 auto;
	height:700px;
	background-color:var(--pure);
}
section.projects .card-wrapper
{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	grid-gap:2rem;
	padding-top:3rem;
}
section.projects .card-wrapper .card{
	position:relative;
	height:250px;

}
section.projects .card-wrapper .card .overlay{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#eeeeee;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	color:pink;
	opacity:0;
	transition:all .3s ease;

}
section.projects .card-wrapper .card:hover .overlay{
 opacity:1;
}
section.projects .card-wrapper .card .overlay a{
	color:#161616;
	text-decoration:none;

}
section.projects .card-wrapper .card img{
	height:100%;
	width:100%;
}
section.contact{
	background-color:#ebdef0 ;
}
section.contact .card-wrapper{
		display:grid;
		grid-template-columns:repeat(3, 1fr);
		grid-gap:3rem;

}
section.contact .card-wrapper .card{
	text-align:center;
}
section.contact .card-wrapper .card img{
	margin-bottom:3rem;
	height:70px;
	width:70px;
}
section.contact .card-wrapper .card h1{
	font-weight:400;
   margin-bottom:1rem;
}
section.contact .card-wrapper .card h6{
	font-size:1rem;
	color:#dc7633;
	font-weight:400;
	margin-bottom:4rem;
}
section.contact .input-wrap{
	display:grid;
	grid-template-columns:repeat(1, 1fr);
	margin-bottom:2rem;
	font-size:0.9rem;
}
section.contact .input-wrap-1{
	display:grid;
	grid-template-columns:repeat(1, 1fr);
	margin-bottom:2rem;
}
section.contact .input-wrap-2{
	display:flex;
	flex-direction:column;
}
section.contact input{
	padding:0.5rem;
	border:1px solid lightblue;
	font-size:0.9em;
}
section.contact .input-wrap-2 textarea{
	padding:0.5rem;
	border:1px solid lightblue;
	margin-bottom:2rem;
}
section.contact .input-wrap-2 textarea:focus, section.contact input:focus
{
		outline:none;
}
section.contact .btn-wrapper{
	text-align:center;
}
footer{
	background:var(--dark);
	text-align:center;
	padding-top:5rem;
	height:400px;
}
footer .footer-icon a img{
	height:50px;
	width:50px;
	margin-top:3rem;
	margin-right:1rem;
}
footer .rights{
	color: var(--pure);
	margin-top:2rem;
}

.site-main-wrapper
{
	position:relative;
}
.hamberger{
	position:absolute;
	top:40px;
	right:40px;
	z-index:11;
	background:none;
	border:none;
	outline:none;
	cursor:pointer;
}

.hamberger img{
	width:30px;
}
.mobile-nav{
	position:fixed;
	top:0;
	left:0;
	z-index:1001;
	background:lightgrey;
	width:100%;
	height:100%;
	padding:2rem;
	padding-top:5rem;
	transform:translateX(-100%);
	-webkit-transform:translateX(-100%);
	-moz-transform:translateX(-100%);
	-ms-transform:translateX(-100%);
	-o-transform:translateX(-100%);
	transition:all. 5s ease-in-out;
}
.open{
	transform:translateX(0);
	-moz-transform:translateX(0);
	-ms-transform:translateX(0);
	-o-transform:translateX(0);
}
.times
{
	position:fixed;
	top:30px;
	right:30px;
	border:none;
	background:none;
	outline:none;
	cursor:pointer;
}
.times img{
	width:30px;
}
.mobile-nav ul{
	list-style-type:none;
}

.mobile-nav ul li a{
	color:black;
	text-decoration:none;
	font-size:2rem;
}
@media (max-width:1008px)
{
	body {
    height:4400px;
}
	header #main-nav
	{
		display:none;
	}
	.hero .left img{
		width:320px;
		height:330px;
	}
	.hero .right h2{
	font-size:1.9rem;
}
	.hero .right h1{
    font-size:2.5rem;
}
.hero {
    padding-top:8rem;
}

.hero .right {
    margin-top:-2rem;
}
header {
    height:630px;
   clip-path:polygon(0 0, 100% 0, 100% 100%, 78% 88%, 0 100%);
  }
  section.about .about-me-img {
    height:290px;
    width:250px;
    padding-left:3rem;
}
section.skills .card-wrapper {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
}
section.skills {
    height:700px;
}
.section-heading + p {
    margin-bottom:6rem;
}
section.projects .card-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap:3rem;
}
section.projects {
    height:730px;
}
section.contact .card-wrapper .card img{
	margin-bottom:1.5rem;
    margin-top:-1rem;
	height:55px;
	width:55px;
}
section.contact .card-wrapper .card h1{
	font-weight:300;
   margin-bottom:1rem;
}
section.contact .card-wrapper .card h6{
	font-size:0.8rem;
	color: #dc7633;
	font-weight:400;
	margin-bottom:3rem;
}
footer {
    padding-top:2rem;
    height:230px;
}
footer .footer-icon a img {
    height:30px;
    width:30px;
 }
 footer .rights 
 {
     font-size:0.8rem;
}
}
@media (max-width:576px){
	.hero{
		flex-direction:column;
	}
	header{
		clip-path:polygon(0 0, 100% 0, 100% 100%, 69% 95%, 0 100%);;
	}
	.hero .right{
		position:fixed;
		top:430px;
		 margin-top:-22rem;
		padding:0 1.2rem;
		background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.9));
	}
	.hero .right h2{
	font-size:1.6rem;
}
.hero .right h1{
    font-size:2.2rem;
}
	.hero .right p{
    line-height: 1.6;
    margin-top:11.5rem;
    margin-bottom:1rem;
}
	.hero left:
	{
		margin-top:-5rem;
		margin-right:-9rem;
	}
	.hero .left img{
		width:280px;
		height:280px;
	}
	header {
    height:570px;
}
.about-inner-wrap
{
	flex-direction:column;
}
section.about .about-me-img {
    height:240px;
    width: 210px;
    padding:0 1rem;
    margin-top:-2rem;
    margin-bottom:1.5rem;
}
.about .right{
	text-align:center;
}
section.about .social{
    justify-content: center;
}
section{
    padding:4rem 0;
}
section.education .card-wrapper{
	grid-template-columns:repeat(1, 1fr);
}
section.education .card-wrapper .card {
 margin-left:2rem;
 margin-right:2rem;
 margin-bottom:-1rem;
    }
section.education{
    height:1020px;
}
section.skills .card-wrapper {
    grid-template-columns:repeat(2, 1fr);
    margin-top:-1.5rem;
}
section.skills .card-wrapper .card{
	margin-left:0.7rem;
	margin-right:0.7rem;
	padding:1rem 1.0rem;
}
section.skills .card-wrapper .card h1 {
    font-weight: 400;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    margin-top:1rem;
}
section.skills{
    height:640px;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 96%, 0 100%);
}
section.projects{
	height:1370px;
}
section.projects .card-wrapper{
	grid-template-columns: repeat(1, 1fr);
}
section.projects .card-wrapper .card{
	margin:0.5rem 2rem;
}

section.contact .card-wrapper {
    grid-template-columns: repeat(1, 1fr);
    grid-gap:1rem;
}

section.contact .card-wrapper .card img{
	margin-bottom:0.5rem;
	margin-top:-2rem;
}
section.contact .card-wrapper .card h1{
	font-weight:350;
   margin-bottom:0.5rem;
   font-size:0.8rem;
}
section.contact .card-wrapper .card h6{
	font-size:0.5rem;
	color:#dc7633;
	font-weight:400;
	margin-bottom:3rem;
}
section.contact input{
	border-radius:1rem;
}
footer {
    padding-top:0.2rem;
    height:100px;
}
footer .footer-icon a img {
    height:15px;
    width:15px;
    margin-right:0.4rem;
 }
 footer .rights {
    margin-top:0.3rem;
    font-size:0.4rem;
}
.btn-secondary{
	width:120px;
	height:30px;
	font-size:1rem;
	border-radius:0.5rem;
}
.btn 
{
	width:130px;
	height:45px;
	font-size:0.6rem;
	font-weight:2rem;
		border-radius:0.5rem;
}
}