:root {
  --max-page-width: 800px;
  /* The following colors have AAA contrast with white background if font size >18px or 14px and bold */
  --primary-blue: #016d77;
  --visited: #754263;
  --primary-orange: #d24529;
  --primary-purple: #b03669;
  --background-color: #f4f7fb;
  --black: #000000;
  --title-color: rgb(91, 149, 194);
}

* {
  box-sizing: border-box;
  font-family: "Crimson Pro", serif;
}

/* Used for blog titles in both links on homepage and title of a post on it's specific page */
h2 {
  font-size: 1rem;
  margin: 0;
}

/* Container for all the website content (header, main, and footer) */
body {
  max-width: var(--max-page-width);
  width: 100%;
  margin: auto; /* Centers the website content within the browser */
  display: flex; /* Flex layout allows easier control over the layout */
  flex-direction: column; /* Stacks elements in the body vertically - helps align footer at bottom of page */
  min-height: 100vh;
  padding: 0 20px;
  background-color: var(--background-color);
}

/* Default (mobile) */
header {
  display: flex;
  justify-content: space-between; /* Pushes elements in header apart, so jpmoore is on the left and posts/about is on the right */
  align-items: center; /* Aligns items vertically in the center of the header */
  margin: 0 0 50px 0;
  padding: 0 5px;
  background-color: var(--background-color);
  position: sticky; /* Sticks header in its position */
  top: 0; /* Positions header to top of page so it stays present when user scrolls */
  z-index: 10; /* Keeps header in front of everything else */
}

header h1 {
  font-size: 1.5rem;
}

/* Prevents the page 'title' (jpmoore) from inheriting the default <a> tag styling */
#header-title {
  color: --title-color;
  text-decoration: none;
}

/* Styles the 'posts' and 'about' navigation links in the header */
header ul {
  display: flex;
  gap: 2rem; /* Gap between posts and about */
  list-style: none; /* Removes 'dot points' that are default for <ul> <li> elements */
  padding-left: 0;
}

footer {
  padding: 4rem 0 1rem 0;
  text-align: center;
  margin: auto auto 0 auto;
  background-color: var(--background-color);
}

a {
  color: var(--title-color);
}

a:visited {
  color: var(--title-color);
}

.nav-link {
  font-size: 1.2rem;
  text-decoration: none;
}

a.nav-link {
  color: var(--title-color);
}

a.current-nav-link {
  color: var(--primary-purple);
}

/* "Grid" that contains all the posts displayed on the homepage */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 column on mobile by default */
  gap: 10px;
  padding: 0;
  background-color: var(--background-color);
}

.post-card-container:hover {
  animation: hover-card 0.4s; /* Card opacity changes when hovering */
  animation-fill-mode: forwards; /* Animation ends and does not go back to 1 opacity unless hover stops */
  cursor: pointer;
}

/* Animation to change opacity of an item */
@keyframes hover-card {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.7;
  }
}

a.post-card-link {
  text-decoration: none; /* Removes default <a> tag styling from post title in posts grid */
}

.post-card-title {
  text-align: center;
  color: var(--black);
  font-weight: 200;
}

/* Default (mobiles, <460px wide) */
.post-card-container {
  list-style: none; /* Removes default <li> tag styling */
}

td > img {
  width: 100%;
}

/* Tablets 520-768px wide */
@media screen and (min-width: 520px) {
  .posts-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 cols */
  }
}

/* Small screens 768-1024px wide */
@media screen and (min-width: 768px) {
  .posts-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 cols  */
  }
  td > img {
    width: 100%;
  }
}

/* Desktops (>1024px wide) */
@media screen and (min-width: 1024px) {
  .posts-grid {
    grid-template-columns: repeat(4, 1fr); /* 3 cols */
  }
}

/* Image container to control potential overflow of image from post card if image is not the same aspect ratio */
.post-card-image-wrapper {
  border-radius: 15px;
  border: 0.5px solid #7eaaae;
  width: 100%;
  aspect-ratio: 8/5;
  overflow: hidden;
}

.post-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Image "covers" entire container (doesn't shrink to fit) */
  overflow: hidden; /* If the image is bigger than its container, it is cropped */
  object-position: top left; /* Image is positioned starting at top-left corner */
}

/* Post date shown under title on a blog post page */
#post-date {
  font-style: italic;
  margin: 0;
}

.post-content {
  max-width: 100%;
  padding: 0;
}

.post-content > table {
  margin: 20px auto;
}