/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: White;
  color: black;
  font-family: Verdana;
}


p {
  color: black;
}


html {
  /* px means "pixels". The base font size is now 10 pixels high */
  font-size: 10px;
  /* Replace PLACEHOLDER with the font-family property value you got from Google Fonts */
  font-family: "Faculty Glyphic", sans-serif;
}

h1 {
  font-size: 60px;
  text-align: center;
}

p,
li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}

a,
li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}


html {
  background-color: #5e5c64;
}


body {
  width: 600px;
  margin: 0 auto;
  background-color: #9a9996;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}


h1 {
  margin: 0;
  padding: 20px 0;
  color: #5e5c64;
  text-shadow: 3px 3px 1px black;
}


img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

/* The sidebar menu */
.sidenav {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 160px; /* Set the width of the sidebar */
  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: #9a9996; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
  border: 5px solid black;
}

/* The navigation menu links */
.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #5e5c64;
  display: block;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Style page content */
.main {
  margin-left: 160px; /* Same as the width of the sidebar */
  padding: 0px 10px;
}

/* Solid border */
.solid {
  border-top: 5px solid black;
}