/*! JF CSS variables */
:root {
  --lightest: #eee;
  --blue: #00a2cb;
  --grey: #444;
  --green: #00d230;
  --darkest: #111111;
}

/*! JF CSS tweaks */
.navigation {
  padding-top: 1.5rem;
}

.navigation-content {
  display: flex;
}

.nav-elements {
  display: flex;
  margin-left: auto;
  padding-top: 2rem;
}

.nav-elements a:link, .nav-elements a:visited {
  padding-left: 2rem;
  color: #222;
  text-decoration: none;
}

.nav-elements a:hover {
  color: var(--darkest);
  text-decoration: underline;
}

.current-page {
  padding-left: 2rem;
  color: var(--blue);
  text-decoration: none;
}

.site-title {
  font-weight: 600;
}

.site-title a:link, .site-title a {
  color: var(--darkest);
  text-decoration: none;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5rem;
  background-color: var(--grey);
  color: white;
  text-align: left;
  padding-top: 2rem;
}

@media (max-width: 550px) {
  .footer .container .one-half {
    width: 50%;
  }
  .projects-grid {
    padding-bottom: 10rem;
  }
}

.social {
  text-align: right;
  font-size: 2rem;
}

.social a {
  padding-left: 0.25rem;
  color: white;
}

.intro-content {
  padding-top: 5rem;
}

.img-full-width {
  max-width: 100%;
  max-height: 100%;
}
.projects-grid {
  padding-top: 5rem;
  padding-bottom: 7rem;
}

.projects-grid .row {
  padding-bottom: 3rem;
}

img.project-thumb {
  border: 2px solid rgba(255, 0, 0, 0) !important;
}

img.project-thumb:hover {
  border: 2px solid var(--blue) !important;
}

/*! Resume Styling */
.education-content .row, .volunteer-content .row {
  padding: 1.25rem;
}

.experience-content .row {
  margin-bottom: 2rem;
  padding: 1.25rem;
}

.grey {
  background-color: var(--lightest);
}

.volunteer-content .row h5 {
  font-size: 2rem;
}

.vertical-space {
  margin-bottom: 12rem;
}