<!doctype html>
<html lang="en">
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@200;300;400;500;600&display=swap" rel="stylesheet">
  <meta charset="UTF-8">
  <title>Portfolio CSS</title>
  <meta name="description" content="A site that showcases my work.>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<style>

body {
	color: black;
	font-family: 'Fira Sans', sans-serif;
	font-size: 16px
	}

h1 {
	color: black;
	font-family: 'Fira Sans', sans-serif;
	font-size: 36px
	}

h2 {
	color: black;
	font-family: 'Fira Sans', sans-serif;
	font-size: 28px
	}

h3 {
	color: #4D4D4D;
	font-family: 'Fira Sans', sans-serif;
	font-size: 22px
	}

h4 {
	font-family: 'Fira Sans', sans-serif;
	font-size: 20px;
	padding: 0px;
	margin-bottom: 0px;
	}
	
p {
  color: black;
  font-family: 'Fira Sans', sans-serif;
  font-size: 16px
}

ul {
	color: black;
	font-family: 'Fira Sans', sans-serif;
	font-size: 16px;
	line-height: 1.8em
}

ol {
	color: black;
	font-family: 'Fira Sans', sans-serif;
	font-size: 16px
}

/* The sidebar menu */
.sidenav {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 250px; /* Set the width of the sidebar. Previously was 160px, I widened to 250px so text wasn't wrapping. */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
}

/* The navigation menu links */
.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-family: 'Fira Sans', sans-serif;
  font-size: 20px;
  color: #818181;
  display: block;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Style page content */
.main {
  margin-left: 250px; /* Same as the width of the sidebar */
  padding: 0px 10px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
.main {
  margin-left: 250px; /* Same as the width of the sidenav */
  font-size: 28px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

.footer {
	color: black;
	margin-top: 40px;
	font-family: 'Fira Sans', sans-serif;
	font-size: 12px
}

.contact_form {
  margin-left: 250px; /* Same as the width of the sidenav */
  margin-right: 320px;
  padding: 0px 10px;
  font-family: 'Fira Sans', sans-serif;
  font-size: 16px
}
	
	/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
  font-family: 'Fira Sans', sans-serif;
  font-size: 16px
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Fira Sans', sans-serif;
  font-size: 16px
  
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #45a049;
}

/* Add a background color and some padding around the form */
.contact_form  {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

</style>

</head>
