/*
COLOR PALETTE
https://coolors.co/f7fff7-343434-2f3061-ffe66d-a1c6d7
#D3FFB5 - tea green
#6A8D92 - slate grey
#F7FFF7 - almost white
#FFFFFF - white
#343434 - dark gray - almost black
#D6D9DA - light grey (gainsboro)
#2F3061 - dark blue
#FFE66D - yellow
#FFBE0B - MIKADO YELLOW
#FFD93F - gargoyle gas
#A1C6D7 - light blue 
#393b82 - medium blue
#493548 - purple taupe
#80B192 - dark sea green
#FFAE03 - ucla gold
#E1DD8F - flax
#f4fec1 - pale spring bud
#8C1C13 - dark red
#504b3A - dark lava
#222e50 - space cadet blue
#DD0426 - med candy apple red
*/


/* Global styles
------------------------------------*/

body {
  	color: #343434;
  	margin: 0;
  	padding: 0;
  	font-family: 'Libre Franklin', sans-serif;
  	font-size: 15px;
  	line-height: 1.5;
}
	
h1{
  	font-family: 'Libre Franklin', sans-serif;
  	font-weight: 700;
  	margin: 0;
}

h2{
  	font-family: 'Libre Franklin', sans-serif;
  	font-weight: 400;
  	margin: 0;
}
	
.content-wrap {
  	max-width: 800px;
  	width: 85%;
  	margin: 0 auto;
  	padding: 20px 0;
}
		
a {
  	color: #F4FEC1;
}

a:hover {
  	text-decoration: none;
}
	

/* Top Header Bar
------------------------------------*/

header {
  	color: #F7FFF7;
  	font-family: 'Libre Franklin', sans-serif;
  	font-weight: 400;
  	font-size: 15px;
  	margin: 0px;
	background: #343434;
	background-image: url(../images/sparkplug.jpg);
	background-repeat: no-repeat;
    background-position: top left;
    background-size: 50% 100%; 
}

.grid-container {
	display: grid;
	grid-template-columns: 2fr 2fr 8fr 2fr;
	padding: 10px 40px;
	align-items: center;
}

.grid-item:nth-child(3) {
  	font-family: 'Libre Franklin', sans-serif;
  	font-weight: 700;
  	font-size: 20px;
  	color: #FFD93F;
  	align-items: center;
}
grid-item:nth-child(4) {
	display: flex;
  	justify-content: end;
}
/* Navbar container */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 400;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px; 
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #FFAE03;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Section One > Billboard Message Area 
------------------------------------*/
.billboard {
  	display: grid;
  	grid-template-columns: 2fr 2fr 8fr 2fr;
	grid-template-rows: .5fr 1fr;
  	padding-top: 60px;
	padding-bottom: 400px;
	padding-left: 25px;
	padding-right: 25px;
  	background: #D3FFB5;  
}

.billboard-item:nth-child(3) {
	font-family: 'Libre Franklin', sans-serif;
  	font-weight: 400;
  	color: #393b82;
  	font-size: 85px;
  	line-height: 1.1;
  	align-items: center;
}

.billboard-text {
	font-family: 'Libre Franklin', sans-serif;
  	font-weight: 400;
  	color: #393b82;
  	font-size: 45px;
  	line-height: 1.5;
  	align-items: start;
	justify-content: center;
}

.billboard-item:nth-child(7) {
	display: grid;
  	justify-content: center;
  	align-items: start;
	padding-right: 10%;
}
.billboard a {
  	color: #2F3061;
}

/* Section Two > Portfolio 
------------------------------------*/
.portfolio {
  	display: grid;
  	grid-template-columns: 2fr 2fr 2fr;
	grid-template-rows: 1fr 1fr 1fr;
	gap: 5px 10px;
  	padding: 100px 35% 400px;
	justify-content: center;
  	align-items: center;
  	background: #6A8D92;  
}

/* Section Two > Projects 
------------------------------------*/
.project {
  	display: grid;
  	grid-template-columns: 2fr 2fr 8fr 2fr;
	grid-template-rows: .5fr 1fr;
  	padding-top: 60px;
	padding-bottom: 00px;
	padding-left: 25px;
	padding-right: 25px;
  	background: #FFFFFF;  
}
.project2 {
  	display: grid;
  	grid-template-columns: 2fr 2fr 8fr 2fr;
	grid-template-rows: 1fr .3fr .3fr;
  	padding-top: 60px;
	padding-bottom: 00px;
	padding-left: 25px;
	padding-right: 25px;
  	background: #FFFFFF;  
}

.project-item:nth-child(3) {
	font-family: 'Libre Franklin', sans-serif;
  	font-weight: 400;
  	color: #393b82;
  	font-size: 45px;
  	line-height: 1.1;
  	align-items: center;
}

.project-text {
	font-family: 'Libre Franklin', sans-serif;
  	font-weight: 400;
  	color: #393b82;
  	font-size: 20px;
  	line-height: 1.5;
  	align-items: start;
	justify-content: center;
}

.project-item:nth-child(7) {
	display: grid;
	color: #343434;
  	font-size: 16px;
  	justify-content: left;
  	align-items: start;
	padding-right: 10%;
}
	
.project-image {
	padding-top: 0px;
}

.project a {
  	color: #2F3061;
}
/* Section Two > Other Projects Footer 
------------------------------------*/
.otherProjects {
  	display: grid;
  	grid-template-columns: 2fr 2fr 8fr 2fr;
	grid-template-rows: .25fr 1fr;
  	padding-top: 50px;
	padding-bottom: 00px;
	padding-left: 25px;
	padding-right: 25px;
  	background: #343434;
	/*border:0;*/
}

.otherProjects-item:nth-child(3) {
	display: grid;
	color: #FFBE0B;
  	font-size: 30px;
  	justify-content: left;
  	align-items: start;
	padding-right: 10%;
}
.CV {
  	display: grid;
  	grid-template-columns: 2fr 2fr 8fr 2fr;
	grid-template-rows: .25fr 1fr;
  	padding-top: 50px;
	padding-bottom: 00px;
	padding-left: 25px;
	padding-right: 25px;
  	background: #FFAE03;
	/*border:0;*/
}
.CV-item:nth-child(3) {
	font-family: 'Libre Franklin', sans-serif;
  	font-weight: 400;
  	color: #F4FEC1;
  	font-size: 85px;
  	line-height: 1.1;
  	align-items: center;
}
.CV-text {
	font-family: 'Libre Franklin', sans-serif;
  	font-weight: 400;
  	color: #222e50;
  	font-size: 45px;
  	line-height: 1.5;
  	align-items: start;
	justify-content: center;
}
.contact {
  	display: grid;
  	grid-template-columns: 2fr 2fr 8fr 2fr;
	grid-template-rows: .25fr 1fr .25fr 1fr;
  	padding-top: 50px;
	padding-bottom: 00px;
	padding-left: 25px;
	padding-right: 25px;
  	background: #DD0426;
	/*border:0;*/
}
.contact-item:nth-child(3) {
	font-family: 'Libre Franklin', sans-serif;
  	font-weight: 400;
  	color: #F4FEC1;
  	font-size: 85px;
  	line-height: 1.1;
  	align-items: center;
}
.contact-item:nth-child(11) {
	font-family: 'Libre Franklin', sans-serif;
  	font-weight: 400;
  	color: #F4FEC1;
  	font-size: 85px;
  	line-height: 1.1;
  	align-items: center;
}
.contact-item:nth-child(19) {
	font-family: 'Libre Franklin', sans-serif;
  	font-weight: 400;
  	color: #F4FEC1;
  	font-size: 85px;
  	line-height: 1.1;
  	align-items: center;
}
.contact-text {
	font-family: 'Libre Franklin', sans-serif;
  	font-weight: 400;
  	color: #343434;
  	font-size: 45px;
  	line-height: 1.5;
  	align-items: start;
	justify-content: center;
}