/*=============
===VARIABLES===
=============*/
:root {
	--light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	--dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
	--transition: all 0.3s linear;
	--clr-primary-drk: rgb(178, 21, 34);
	--clr-primary: rgb(255, 34, 18);
	--clr-primary-lite: rgb(255, 180, 20);
	--clr-light-grey: #9eb2c7;
	--letter-space-sml: 0.1rem;
	--letter-space-mid: 0.25rem;
	--letter-space-lrg: 0.5rem;

	/* other colors */
	--clr-white: #fff;
	--clr-black: #000;
	--clr-grey: #979b91;
	--clr-dark-blue-1: #063251;
	--clr-blue: #3056df;
	--clr-blue-2: #4da1ab;
}

/*===========
====FONTS====
===========*/
@import url("https://fonts.googleapis.com/css2?family=Russo+One&display=swap");

/*=============
  =GLOBAL STYLES=
  =============*/
/*removes the padding and margin by default*/
*,
*::before,
*::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
html {
	font-size: 62.5%;
}
body,
main {
	display: flex;
	flex-direction: column;
	color: #aaa;
	font-family: "Russo One";
	background: var(--clr-dark-blue-1);
}
h1 {
	font-size: 5rem;
}
h2 {
	font-size: 3rem;
}
h3 {
	font-size: 2rem;
}
ul {
	list-style-type: none;
	text-transform: uppercase;
}
a {
	text-decoration: none;
}
a:hover,
a:focus {
	color: var(--clr-primary-drk);
}

/*=============
======NAV======
=============*/
nav {
	background: #222;
	box-shadow: var(--light-shadow);
}
.nav-header {
	display: flex;
	/* aligns items in the middle of the screen/horizontally(on x-axis) */
	align-items: center;
	justify-content: space-between;
	padding: 1rem;
}
.logo {
	text-transform: uppercase;
	letter-spacing: var(--letter-space-lrg);
	font-size: 2.5rem;
	color: var(--clr-blue-2);
	cursor: pointer;
	transition: var(--transition);
}
.logo:hover,
.logo:focus {
	color: var(--clr-blue);
	transform: scale(0.8);
}
.nav-btn {
	font-size: 2.5rem;
	color: var(--clr-blue-2);
	background: transparent;
	border-color: transparent;
	transition: var(--transition);
	cursor: pointer;
}
.nav-btn:hover {
	color: var(--clr-light-grey);
	transform: rotate(360deg);
}
.nav-link {
	color: var(--clr-light-grey);
	font-size: 2.5rem;
	text-transform: uppercase;
	letter-spacing: var(--letter-space-sml);
	display: block;
	padding: 0.5rem 1rem;
	transition: var(--transition);
}
.nav-link:hover {
	color: var(--clr-blue-2);
	background: #222;
	padding-left: 1.5rem;
}
.nav-svg {
	transition: var(--transition);
	height: 7rem;
	width: 7rem;
}
.nav-svg:hover,
.nav-svg:focus {
	height: 7.5rem;
	width: 7.5rem;
	transform: translateY(0.75rem);
}
.foot-svg:hover,
.foot-svg:focus {
	transform: translateY(-0.75rem);
}
/*adds outline to the section targeted by a clicked nav-link
:target {
  outline: firebrick solid 1px;
}*/
.socials {
	display: none;
}

/*[class*="socials-"]*/
/*=====================
  Hide links by default 
  =====================*/
.links {
	height: 0;
	overflow: hidden;
	transition: 0.3s;
	padding-right: 10rem;
}

/*toggle menu class*/
.show-links {
	height: 13rem;
}

/*=============
=MEDIA QUERIES=
=============*/
/* If screen size is more than 800px wide*/
@media screen and (min-width: 800px) {
	h1 {
		font-size: 6rem;
	}
	h2 {
		font-size: 4rem;
	}
	h3 {
		font-size: 3rem;
	}
	.navbar {
		max-width: 1170px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 1rem;
	}
	.nav-header {
		padding: 0;
	}
	.nav-btn {
		display: none;
	}
	/*==========
  IMPORTANT TO ADD ELSE THE HEIGHT WILL REMAIN 224PX/14REM IN FULLSCREEN 
  AND DISAPPEAR WHEN BUTTON IS PRESSED
  ==========*/
	.links {
		height: auto;
		display: flex;
	}
	.nav-link {
		padding: 0;
		margin: 0 0.5rem;
		font-size: 2.5rem;
	}
	.nav-link:hover,
	.nav-link:focus {
		padding: 0;
		background: transparent;
	}
	.socials {
		display: flex;
	}

	.socials a {
		margin: 0 0.5rem;
		color: var(--clr-light-grey);
		transition: var(--transition);
	}
	.socials a:hover,
	.socials a:focus {
		color: var(--clr-blue);
		transform: translateY(-5px);
	}
}
/*If screen size is less than 400px wide*/
@media screen and (max-width: 400px) {
	h1 {
		font-size: 4rem;
	}
	h2 {
		font-size: 2.5rem;
	}
	h3 {
		font-size: 1.5rem;
	}
	.logo {
		font-size: 1.85rem;
	}
}
/*==============
======ABOUT=====
==============*/
.About {
	text-align: center;
	padding-top: 15rem;
	box-shadow: var(--dark-shadow);
}
.about-main {
	padding: 0 1.5em;
}
.profile-img {
	object-fit: cover;
	border-radius: 50%;
	width: 25rem;
	height: 25rem;
	border: 2px solid var(--clr-blue);
}
.About h1 {
	text-transform: capitalize;
	color: var(--clr-white);
}
.About h1:last-of-type {
	color: var(--clr-light-grey);
	padding-bottom: 20rem;
	letter-spacing: var(--letter-space-mid);
}
.about-me {
	background-color: #fff;
	padding-bottom: 10rem;
	box-shadow: var(--dark-shadow);
}
.about-header {
	text-transform: capitalize;
	letter-spacing: var(--letter-space-mid);
	padding-top: 10rem;
	color: var(--clr-dark-blue-1);
}
.about-text {
	display: inline-block;
	padding-left: 2rem;
	padding-right: 2rem;
}
.about-text p {
	color: var(--clr-dark-blue-1);
	font-size: 1.75rem;
	font-weight: lighter;
	padding-top: 2.5rem;
}

/*=============
=MEDIA QUERIES=
=============*/
/* If screen size is at least 690px wide*/
@media screen and (min-width: 690px) {
	.about-text {
		display: flex;
		justify-content: space-evenly;
		column-gap: 2rem;
	}
	.about-text p {
		flex-basis: 350px;
	}
}

/*If screen size is less than 690px wide*/
@media screen and (max-width: 690px) {
	.About {
		padding-top: 10rem;
		padding-bottom: 0;
	}
	.about-main {
		padding: 0 2rem;
	}
}
/*=============
=====SKILLS====
=============*/
.skills-head {
	text-transform: capitalize;
	letter-spacing: var(--letter-space-mid);
}
#skills-desc {
	padding: 10rem 2rem 0 2rem;
	background: var(--clr-dark-blue-1);
	color: var(--clr-white);
}
#skills-desc p {
	color: var(--clr-white);
	font-size: 2rem;
}
/*
.skills {
  display: grid;
  grid-template-columns: repeat(5, minmax(10px, 1fr));
  grid-template-rows: auto;
  row-gap: 3em;
  padding-top: 5rem;
  padding-bottom: 10rem;
  justify-content: space-evenly;
  text-align: center;
}*/
.skills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-evenly;
	column-gap: 5rem;
	row-gap: 6rem;
	padding: 8rem;
	background: var(--clr-dark-blue-1);
	color: var(--clr-white);
}
.skills li {
	flex-basis: 20rem;
}
.skills li p {
	padding: 1em 0;
	font-size: 1.25rem;
	color: var(--clr-white);
}

/*=============
=MEDIA QUERIES=
=============*/
/* If screen size is less than 400px wide*/
@media screen and (max-width: 460px) {
	.skills {
		column-gap: 1rem;
	}
	#skills-desc p {
		font-size: 1.5rem;
	}
	.skills__icon {
		font-size: 4rem;
	}
	.skills li {
		flex-basis: 10rem;
	}
	.skills li p {
		padding: 0.25rem 0;
		font-size: 1.75rem;
	}
}

/*==============
====PROJECTS====
==============*/
.Projects {
	background-color: var(--clr-white);
	padding: 50rem 1rem 30rem 1rem;
	text-align: center;
	box-shadow: var(--dark-shadow);
}
.projects-header {
	color: var(--clr-dark-blue-1);
	margin-top: -45rem;
	padding: 5rem 0;
	letter-spacing: var(--letter-space-mid);
	text-transform: capitalize;
}
.portfolio {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-evenly;
	gap: 5rem;
}
.project {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding: 1rem;
	background-color: var(--clr-light-grey);
	border-radius: 1rem;
	border: 2px solid var(--clr-black);
	box-shadow: var(--light-shadow);
	width: 65rem;
	height: fit-content;
}
.project img {
	width: 60rem;
	height: 50rem;
	border-radius: 0.5em;
	padding: 2rem 0;
}
.project-btn {
	cursor: pointer;
	color: var(--clr-white);
	letter-spacing: var(--letter-space-mid);
	text-transform: capitalize;
	font-size: 2rem;
	background-color: var(--clr-dark-blue-1);
	width: fit-content;
	padding: 1rem 0.5rem;
	text-align: center;
	margin: 0 auto;
	border-radius: 1rem;
	transition: var(--transition);
	box-shadow: var(--light-shadow);
	border: 1px solid black;
}
.project-btn:hover {
	box-shadow: var(--dark-shadow);
}
.project-btn:focus {
	color: var(--clr-primary);
	box-shadow: var(--dark-shadow);
}
/*=============
=MEDIA QUERIES=
=============*/
/* If screen size is less than 400px wide*/
@media screen and (max-width: 430px) {
	.portfolio {
		gap: 2rem;
	}
	.project {
		width: 35rem;
		height: fit-content;
		padding: 1rem 0;
	}
	.project img {
		width: 30rem;
		height: 25rem;
		border-radius: 0.5em;
		padding: 0;
	}
	.project-btn {
		font-size: 1.5rem;
	}
	.Projects {
		padding-bottom: 4rem;
	}
}
/* If screen size is equal to or more than 450px wide*/
/*
@media screen and (min-width: 400px) {
  #portfolio {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    padding: 5em;
    row-gap: 5em;
    column-gap: 5em;
  }
}
*/

/*=============
====CONTACT====
=============*/
.Contact {
	background: var(--clr-dark-blue-1);
	padding-top: 25rem;
	padding-bottom: 15rem;
	display: flex;
	flex-direction: column;
	/* aligns items in the middle of the screen/horizontally(on x-axis) */
	align-items: center;
	justify-content: center;
	box-shadow: var(--dark-shadow);
}
.contact-header {
	margin-top: -15rem;
	text-transform: capitalize;
	color: var(--clr-white);
	letter-spacing: var(--letter-space-mid);
	padding: 0rem 3em 5rem 3em;
	text-align: center;
}
.email-btn {
	background-color: var(--clr-light-grey);
	outline: black solid 2px;
	padding: 0.75em;
	color: var(--clr-black);
	letter-spacing: var(--letter-space-mid);
	font-size: 2rem;
	text-align: center;
	border-radius: 0.25em;
	transition: var(--transition);
	font-family: "Russo One";
	/*background-image:*/
}
.email-btn:hover,
.email-btn:focus {
	color: var(--clr-blue);
	cursor: pointer;
}

/*=============
====FOOTER=====
=============*/
footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 10rem;
	box-shadow: var(--light-shadow);
	background-color: #222;
}
.footer-socials {
	display: flex;
	justify-content: center;
}
.footer-socials li {
	padding: 2rem;
}
.footer-socials a {
	color: var(--clr-light-grey);
}

/*==================
====CONTACT FORM====
==================*/
.contact-form {
	background: #ddd;
	color: var(--clr-dark-blue-1);
	text-align: center;
	display: flex;
	flex-direction: column;
	min-height: 90vh;
}
.contact-form-head {
	padding-top: 1rem;
	text-transform: capitalize;
	color: var(--clr-dark-blue-1);
	letter-spacing: var(--letter-space-mid);
}
.form {
	background-color: var(--clr-light-grey);
	display: grid;
	column-gap: 2rem;
	row-gap: 3rem;
	grid-template-areas:
		"name email"
		"subject subject"
		"message message"
		"messageBtn messageBtn";
	letter-spacing: var(--letter-space-lrg);
	padding: 2rem;
	border: 2px solid black;
	border-radius: 0.5rem;
	margin: 0 auto;
}
input,
textarea {
	background: var(--clr-white);
	color: #000;
	border-radius: 1rem;
	border: 2px solid var(--clr-dark-blue-1);
	font-size: 2rem;
	padding: 1rem;
}
/* input:focus,
textarea:focus {
	background: var(--clr-light-grey);
} */
input::placeholder,
textarea::placeholder {
	font-size: 2rem;
}

#message-btn {
	background: var(--clr-blue);
	color: #fff;
	grid-area: messageBtn;
	width: fit-content;
	padding: 1rem;
	font-size: 2rem;
	text-transform: uppercase;
	border: 2px solid var(--clr-dark-blue-1);
	transition: var(--transition);
	cursor: pointer;
	place-self: center;
}
#message-btn:hover,
#message-btn:focus {
	background: var(--clr-dark-blue-1);
	border: 2px solid var(--clr-blue-2);
	color: var(--clr-blue-2);
}
#name {
	grid-area: name;
	/* grid-column: 1/2;
	grid-row: 1; */
}
#email {
	grid-area: email;
	/* grid-column: 2/4;
	grid-row: 1; */
}
#subject {
	grid-area: subject;
	/* grid-column: 1/4;
	grid-row: 2; */
}
#message {
	grid-area: message;
	/* grid-column: 1/4; */
}

/*=============
=MEDIA QUERIES=
=============*/
/* If screen size is less than 400px wide*/
@media screen and (max-width: 430px) {
	.form {
		letter-spacing: var(--letter-space-mid);
		display: flex;
		flex-direction: column;
		min-width: 40vh;
	}
	input,
	textarea {
		font-size: 1.5rem;
	}
	input::placeholder,
	textarea::placeholder {
		font-size: 1.5rem;
	}
}