/* Box sizing rules */
*,
*::before,
*::after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/* Remove default padding */
ul[class],
ol[class] {
	padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
	margin: 0;
}

/* Set core body defaults */
body {
	min-height: 100vh;
	scroll-behavior: smooth;
	text-rendering: optimizeSpeed;
	line-height: 1;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
	list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
	text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
	max-width: 100%;
	display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
	margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
	font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
	* {
		-webkit-animation-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		-webkit-animation-iteration-count: 1 !important;
		animation-iteration-count: 1 !important;
		-webkit-transition-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/*======================================================*/
/*======================================================*/
/*======================================================*/
/* ============ VARIABLES ============ */
/* ============ COLORS ============ */
/* OBSIDIAN */
/* BLUE */
/* Lighter BLUE */
/* ORANGE Vibrant*/
/* ORANGE Subdued*/
/* TEAL*/
/* MAROON */
/* GREEN */
/* ============ FONTS ============ */
html {
	font-size: 62.5%;
}

body {
	font-family: "Merriweather", serif;
	font-weight: 300;
	background-color: #ffeede;
}

h1,
h2,
h3 {
	font-family: "Oswald", Sans-Serif;
}

.header {
	padding: 20px;
	display: -ms-grid;
	display: grid;
	background-color: #bd4108;
}

.primary-image {
	-ms-grid-column-align: center;
	justify-self: center;
	border-radius: 50%;
	-webkit-box-shadow: 5px 9px 15px 12px rgba(0, 0, 0, 0.17);
	box-shadow: 5px 9px 15px 12px rgba(0, 0, 0, 0.3);
	margin-bottom: 20px;
}

.header-text,
.intro {
	color: #ffeede;
}

p.intro {
	margin-bottom: 20px;
}

.name,
.title {
	text-align: center;
	font-family: "Oswald", Sans-Serif;
}

.name {
	font-size: 3.2rem;
	line-height: 1;
}

.title {
	margin-bottom: 12px;
	font-size: 1.9rem;
	line-height: 1.7;
}

.info-wrapper {
	padding: 20px;
}

.section-title {
	color: #bd4108;
	font-size: 2.75rem;
	margin-bottom: 6px;
}

.info-wrapper section {
	margin-bottom: 15px;
}

.position,
.employer {
	color: #323232;
	font-weight: bold;
	font-size: 1.6rem;
}

p,
li {
	color: #4b4b4b;
	font-size: 1.5rem;
	line-height: 1.5;
}

.location,
.dates {
	line-height: 1.4;
}

.experience ol {
	margin-bottom: 10px;
}

.experience li {
	list-style: initial;
	margin-left: 30px;
}

.linked-in a,
.github a,
.email a,
.phone a {
	font-weight: 900;
	color: #1146a8;
}

.address .lead-text {
	font-weight: 700;
	color: #323232;
}

.small-text {
    color: #4b4b4b;
    font-size: 15px;
}

.projects .section-title {
	margin-bottom: 5px;
}

.projects-container {
	display: -ms-grid;
	display: grid;
	gap: 12px 15px;
}

.project-wrapper {
	display: -ms-grid;
	display: grid;
	-ms-grid-rows: auto 1fr auto;
	grid-template-rows: auto 1fr auto;
	margin-bottom: 10px;
	border: #e6d6c4 solid 5px;
	border-radius: 7px;
	padding: 5px;
	background-color: #e6d6c4;
	-webkit-box-shadow: 10px 10px 8px -6px rgba(75, 75, 75, 0.28);
	box-shadow: 10px 10px 8px -6px rgba(75, 75, 75, 0.28);
}

.project-title {
	font-size: 1.6rem;
}

.project-description {
	font-size: 13px;
	margin-bottom: 7px;
}

.project-description .lead-text {
	font-weight: 900;
}

.btn-wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.live-site {
	background-color: #76a800;
	border-radius: 6px;
	display: inline-block;
	cursor: pointer;
	color: #ffeede;
	font-family: Arial;
	font-size: 16px;
	font-weight: bold;
	padding: 10px 20px;
	text-decoration: none;
	margin-right: 5px;
}

.live-site:hover {
	background-color: #88c200;
}

.site-code {
	background-color: #1146a8;
	border-radius: 6px;
	display: inline-block;
	cursor: pointer;
	color: #ffeede;
	font-family: Arial;
	font-size: 16px;
	font-weight: bold;
	padding: 10px 15px;
	text-decoration: none;
}

.site-code:hover {
	background-color: #1350bf;
}

/*======================================================*/
/*======================================================*/
/*======================================================*/
@media screen and (min-width: 450px) {
	.info-wrapper {
		display: -ms-grid;
		display: grid;
		grid-template-areas: "exper exper" "skills skills" "contact contact"  "next next" "projects projects" "about about";
		-ms-grid-columns: 1fr 1fr;
		grid-template-columns: 1fr 1fr;
	}
	.about-me {
		-ms-grid-row: 6;
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		grid-area: about;
	}
	.contact-me {
		-ms-grid-row: 2;
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		grid-area: contact;
	}
	.experience {
		-ms-grid-row: 1;
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		grid-area: exper;
	}
	.skills {
		-ms-grid-row: 3;
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		grid-area: skills;
	}
	.whats-next {
		-ms-grid-row: 4;
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		grid-area: next;
	}
	.projects {
		-ms-grid-row: 5;
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		grid-area: projects;
	}
}

/*======================================================*/
/*======================================================*/
/*======================================================*/
@media screen and (min-width: 595px) {
	.info-wrapper {
		grid-area: info;
		/*grid-template-areas: "exper exper" "contact contact" "skills next" "projects projects" "about about";*/
	}
	.projects-container {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 1fr 1fr;
		grid-template-columns: 1fr 1fr;
		gap: 15px 15px;
		grid-template-areas: "project-1 project-2" "project-3 project-4" "project-5 project-6";
	}
	.project-1 {
		-ms-grid-row: 1;
		-ms-grid-column: 1;
		grid-area: project-1;
	}
	.project-2 {
		-ms-grid-row: 1;
		-ms-grid-column: 2;
		grid-area: project-2;
	}
	.project-3 {
		-ms-grid-row: 2;
		-ms-grid-column: 1;
		grid-area: project-3;
	}
	.project-4 {
		-ms-grid-row: 2;
		-ms-grid-column: 2;
		grid-area: project-4;
	}
	.project-5 {
		-ms-grid-row: 3;
		-ms-grid-column: 1;
		grid-area: project-5;
	}
	.project-6 {
		-ms-grid-row: 3;
		-ms-grid-column: 2;
		grid-area: project-6;
	}
}

/*======================================================*/
/*======================================================*/
/*======================================================*/
@media screen and (min-width: 865px) {
	.info-wrapper {
		display: -ms-grid;
		display: grid;
		/*grid-template-areas: "exper exper" "contact contact" "skills skills" "next next" "projects projects" "about about";*/
		-ms-grid-columns: 1fr 1fr;
		grid-template-columns: 1fr 1fr;
	}
	.container {
		display: -ms-grid;
		display: grid;
		grid-template-areas: "header info";
		-ms-grid-columns: 1fr 1fr;
		grid-template-columns: 1fr 1fr;
		max-width: 1360px;
		min-height: 100vh;
		margin: auto;
	}
	.header {
		-ms-grid-row: 1;
		-ms-grid-column: 1;
		grid-area: header;
	}
	.primary-image {
		-ms-grid-column-align: right;
		justify-self: right;
		-ms-flex-item-align: end;
		align-self: flex-end;
	}
	.name,
	.title,
	.intro {
		text-align: right;
	}
	.projects-container {
		display: block;
	}
}

/*======================================================*/
/*======================================================*/
/*======================================================*/
@media screen and (min-width: 980px) {
	.info-wrapper {
		grid-area: info;
		/*grid-template-areas: "exper exper" "contact contact" "skills next" "projects projects" "about about";*/
	}
}

/*======================================================*/
/*======================================================*/
/*======================================================*/
@media screen and (min-width: 1190px) {
	.projects-container {
		display: -ms-grid;
		display: grid;
	}
}