/* Main layout */
@import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');

:root {
	--background: rgb(104, 193, 248);
	--essense: rgb(13, 120, 187);
	/* --background: rgba(56, 170, 241, 1); */
	/* --background: rgba(38, 240, 247, 1); */
}
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* html {
	height: 100%;
} */

body {
	margin: 0;
	font-family: 'Work Sans', sans-serif;
	font-weight: 400;
	background: rgb(247, 249, 250);
	/* display: grid;
	grid-template-rows: 1fr 1fr auto auto; */
}

/* .wrapper {
	background: white;
} */

/* font */

h2 {
	font-size: 1rem;
}

.section-title-center {
	font-weight: 600;
}

.skill-list {
	font-size: .8rem;
}

.main-content {
	background: white;
	height: 100%;
}
/* about page text */

.main-grid {
	display: grid;
	grid-template-columns: minmax(1em, 1fr) minmax(0, 500px) minmax(1em, 1fr);
	grid-row: 250px auto auto auto;
	grid-gap: 1em;
}

/* ======= Layout main ======= */

.hero {
	margin-top: .5em;
	padding: 0;
	display: grid;
}

/* hero-title */
.hero > * {
	grid-column: 2/ -2;
	display: flex;
	align-content: space-around;
	justify-self: center;
	align-self: center;
	margin-top: 0;
	margin-bottom: 0;
	/* justify-content: space-evenly; */
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5em;
	letter-spacing: 2px;
	/* padding: ; */

	/* opacity: .6; */
}
/* about page layout */
.about {
	grid-column: 2/span 3;
}

.thankyou-note {
	font-weight: 600;
	color: var(--essense);
}

info {
	padding: 0;
	display: grid;
	/* justify-content: end; */
	/* margin-left: 1em; */
	/* margin-bottom: 2em; */
}

.contact {
	grid-column: 2/-2;
	justify-content: center;
	text-decoration: none;
}

.col {
	grid-column: 2/-2;
	justify-content: space-around;
	justify-items: center;
	line-height: 1.4;
}

/* link to Work demo */
.work-demo {
	color: rgba(45, 125, 199, 0.9);
	text-decoration: none;
	cursor: pointer;
}

.work-demo:hover,
.work-demo:focus {
	color: rgb(30, 122, 243);
}

.section-title-center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* footer */
.footer {
	/* height: 80px; */

	background: var(--background);
	/* height: 250px; */
	/* margin-top: 20px; */
	margin-bottom: 0;
	justify-items: center;
}
/* footer fixed on the bottom */

.footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	/* color: white; */
	text-align: center;
}

.footer-main,
.social-list {
	grid-column: 3/ -3;
}

.footer-text {
	font-size: 1rem;
	justify-items: space-around;
	margin-top: 0;
}

.footer-fineprint {
	font-size: .7rem;
	padding: .2em;
}

.footer-text,
.footer-fineprint {
	color: white;
	margin-bottom: 0.1rem;
	letter-spacing: 1px;
}

/* larger screen layout */

@media (min-width: 600px) {
	.info {
		grid-template-columns: minmax(1em, 2em) minmax(0, 500px)
			minmax(1em, 1fr);
	}
}

/* mls */

.first-line {
	height: 2px;
	display: block;
	background: rgb(247, 249, 250);
	margin-left: auto;
	margin-right: auto;
}

hr {
	/* margin-left: 25px;
	margin-right: 25px; */
	height: 2px;
	display: block;
	background: grey;
}

@media (min-width: 600px) {
	hr {
		display: none;
	}
}

@media (min-width: 800px) {
	.info {
		grid-template-columns: minmax(1em, 2em) minmax(0, 500px)
			minmax(1em, 1fr);
	}

	hr {
		display: none;
	}
}

/* end of Main layout */

/* navigation style start here */

.header {
	background: var(--background);
	text-align: center;
	position: sticky;
	display: grid;
	top: 0;
	width: 100%;
	/* margin-top: 0; */
}

.page-title {
	color: white;
	font-size: 1.8rem;
	font-family: cursive;
	letter-spacing: 3px;
	line-height: 10px;
	padding-top: 1em;
	margin-top: 1em;
	justify-self: center;
	align-self: center;
}

/* add display none to test the checkbox .nav-toggle */

nav {
	position: absolute;
	text-align: left;
	top: 100%;
	left: 0;
	background: var(--background);
	/* make nav background width fill the header  */
	width: 100%;
	/* display: none; */
	/* scale can take 2 values, first one is horizontal 1 is 100 width  */
	transform: scale(1, 0);
	transform-origin: top;
	/* when click at the hamburger bar, the nav-list will show up */
	transition: transform 400ms ease-in-out;
}

nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

nav li {
	margin-bottom: 1em;
	margin-left: 1em;
}

nav a {
	color: white;
	text-decoration: none;
	font-size: 1rem;
	text-transform: uppercase;
	/* set opacity 0 but when click opacity change to 1  see rule at nav-toggle: checked ~ nav a {} below*/
	opacity: 0;
	/* set transition when closing to be faster  speed and with no delay */
	transition: opacity 150ms ease-in-out;
}

/* toggle bar for checkbox */
/* since we make a lable for nav-toggle we don't need nav-toggle checkbox we will use X and then change X to hamburger bar as nav-toggle-label */
.nav-toggle {
	display: none;
}

/* style nav-toggle-label, initiall just use X and style it put them on the left corner */

.nav-toggle-label {
	position: absolute;
	top: 0;
	left: 0;
	margin-left: 1em;
	height: 100%;
	display: flex;
}

/* to create hamburger bar target span element use psudo before and after */

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
	display: block;
	background: white;
	height: 2px;
	width: 1.5em;
	margin-top: .5em;
	border-radius: 2px;
	position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
	content: '';
	position: absolute;
}

/* add the height for the top and bottom span so it show up above and below the main span line */

nav-toggle-label span::before {
	bottom: 7px;
}

.nav-toggle-label span::after {
	/* position away from top */
	top: 7px;
}

/* checed in the markup  if there is sibling element of nav-toggle, this case is a nav and then apply the rule we wants*/

/* checked is psudo element  in this case when check the input checkbox it will display the nav that hidden */

.nav-toggle:checked ~ nav {
	/* display: block; */
	transform: scale(1, 1);
}

/* transition when chick to show the nav list with delay, when uncheck it will use nav a with faster speed */
.nav-toggle:checked ~ nav a {
	opacity: 1;
	transition: opacity 250ms ease-in-out 250ms;
}

/*========= Style for larger screen ========*/

@media screen and (min-width: 800px) {
	.nav-toggle-label {
		display: none;
	}

	.header {
		position: sticky;
		top: 0;
		display: grid;
		/* grid-template-columns: 1fr auto minmax(600px, 1fr) 1fr; */
		/* grid-column: 1/ -1; */
	}

	.header-content {
		display: grid;
		/* grid-column: 1/ -1; */
		/* grid-template-columns: 1fr 1fr 1fr; */
		grid-template-columns: 1fr auto 1fr;
	}

	.page-title {
		display: flex;
		grid-column: 2;
		/* justify-self: flex-start; */
		justify-self: center;
		justify-items: center;
		font-size: 2rem;
		letter-spacing: 5px;
		font-weight: lighter;
		padding-top: .5em;
		/* padding: .5em; */

		margin-top: 0;
	}

	.page-slogan {
		grid-column: 2;
		justify-content: center;
		justify-self: center;
		align-self: center;
		margin-right: 2em;
		justify-items: center;

		color: white;
		font-size: 1rem;
		letter-spacing: 1px;
		line-height: 5px;
		margin-top: .5em;
	}

	/* all: unset take off the previouse styles from the small screen  */
	nav {
		position: absolute;
		top: 100px;
		text-align: right;
		all: unset;
		grid-column: 3/span 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* show nav list */
	nav a {
		opacity: 1;
	}

	nav ul {
		display: flex;
		justify-content: flex-end;
	}

	nav li {
		margin-left: 2em;
		margin-top: 1em;
	}
}

/* ==== social  ==== */ /* buttons */
btn {
	margin: 0;
	font-weight: 600;
	/* margin-top: .5em; */
	text-decoration: none;
	border: 0;
	cursor: pointer;
	display: flex;
	justify-content: flex-start;
}

/* ul */
.social-list {
	grid-column: 2/ -2;
	/* margin-top: 1em; */
	margin: 0;
	list-style-type: none;
	/* background: white; */
	display: flex;
	/* justify-content: space-around; */
	justify-items: center;
	align-content: center;
	align-items: center;
	padding: 0.1rem;
	order: -1;
	/* color: white; */
}

.social-top {
	grid-column: 2/-2;
	display: flex;
	order: 1;
	/* justify-content: center; */
	justify-items: center;
	justify-self: center;
	/* align-content: center;
	align-items: center; */
}

/* to make vertical align display grid 
 .social-top {
	grid-column: 2/-2;
	display: grid;
	order: 1;
	justify-content: center;
	justify-items: center;
	justify-self: center;
	/* align-content: center;
	align-items: center; 
} */

.social-item {
	/* color: rgba(6, 2, 26, 0.938); */
	/* justify-self: center;
	align-self: center; */
}

/* a */

.fab {
	color: rgba(6, 2, 26, 0.938);
	opacity: 1.6;
	padding: 5px;
	font-size: 1rem;
}

/* envelop */
.fas {
	font-size: 1.5rem;
	color: var(--background);
	margin-right: 5px;
}

.fas:hover,
.fas:focus {
	color: rgb(34, 215, 247);
	scale: 2;
	cursor: pointer;
}