:root {
	--section-font-color: #445876;
	--lightblue: #92cccd;
	--darkgray:#31343d;
  }
  
  * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
  }
  
  body {
	font-family: 'Times New Roman', Times, serif, Helvetica, Arial, sans-serif;
	margin: 0;
	font-size: 14pt;
	display: flex;
	flex-direction: column; 
	justify-content: flex-start;
	background-color: #ededf6;
  }
  
  .main-header {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 2px;
	background: var(--darkgray);
	color: var(--lightblue);
	background-image: url(./nyc_skyline.JPG);
	background-size: cover;
	min-height: 200px;
	position: relative;
  }
  
  .main-header div {
	display: flex;
	background-color: var(--darkgray);
	align-items: right;
  }
  
  .main-header h1 {
	background: var(--lightblue);
	color: var(--darkgray);
	text-align: right;
	margin-top: 10;
	margin-bottom: 10;
	padding: 10px;
  }
  
  .sub-header {
	background:var(--lightblue);
	color:var(--darkgray);
	margin: 0;
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 10px;
  }
  
  /* top nav bar */
  nav {
	justify-content: right;
	flex: 3 0 0;
	margin: 10px;
	text-align: right;
  }
  
  nav a {
	color: var(--lightblue);
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	margin: 20px 10px;
	font-size: 18pt;
	border-bottom: 3px solid var(--lightblue);
	padding: 10px;
  }
  
  /* portfolio elements */
  .portfolio-item {
	display: flex;
	color: var(--section-font-color);
	margin: 20px;
  }
  
  .portfolio-item>header {
	font-size: 32pt;
	font-weight: bold;
	border-right: 6px solid var(--section-font-color);
	flex: 1 0 0;
	text-align: right;
	padding: 20px;
  }
  
  .portfolio-item>.content {
	text-align: left;
	flex: 4 0 0;
	padding-left: 20px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
  }
  
  /* work items */
  .work-card {
	padding: 0;
	margin: 10px;
	position: relative;
	border: 6px solid var(--lightblue));
	flex: 0 0 45%;
	display: flex;
	background-repeat: repeat-x;
	background-size: cover;
	min-width: 300px;
	min-height: 250px;
  }
  
  .work-card a {
	width: 100%;
	height: 100%;
  }
  
  .work-card header {
	position: absolute;
	bottom: 20px;
	padding: 5px;
	background-color: var(--lightblue);
	color: var(--section-font-color);
  }
  
  /* this "Highlights" the first project by making it bigger then the rest  */
  .work-card:first-child {
	flex: 0 0 92%;
	min-height: 600px;
  }
  
  /* project images */
  .project-1 {
	background-image: url(./vegitate.png);
  }
  
  .project-2 {
	background-image: url(./horiseon.png);
  }
  
  .project-3 {
	background-image: url(./PasswordGenerator.png);
  }
  
  .project-4 {
	background-image: url(./WeatherDash.pnßg);
  }
  
  .project-5 {
	background-image: url(./project5.jpg);
  }
  
  /* contact me section */
  #contact-me a {
	color: var(--section-font-color);
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	margin: 10px 15px;
	font-size: 15pt;
	padding: 25px;
	flex: 1 0 0;
	text-decoration: underline;
	text-decoration-color: var(--section-font-color);
	text-decoration-style: solid;
	text-decoration-style: none;
  }
  
 /* footer section */
  footer {
	background-color: var(--darkgray);
	color: var(--lightblue);
	font-size: 14px;
	text-align: center;
	padding: 10px;
	letter-spacing: 3pt;
  }
  
  /* @media query for screens with width smaller, or equal to 768px  */
  @media screen and (max-width: 768px) {
  
	main,
	nav {
	  flex-direction: column;
	}
  
	.main-header div {
	  flex-direction: column;
	}
  
	.main-header div h1 {
	  width: auto;
	}
  
	.portfolio-item {
	  flex-direction: column;
	}
  
	.portfolio-item header {
	  text-align: left;
	  border-right: none;
	  border-left: 6px solid var(--section-font-color);
	}
  
	.work-card:first-child {
	  flex: 0 0 92%;
	  min-height: 300px;
	}
	
	.portfolio-item .content
	{
	  flex-direction: column;
	}
  
  }