@font-face {
    font-family: "Garamond";
    src: url("/fonts/EBGaramond-VariableFont_wght.ttf");
}

/* Remove text decoration from links inside headers */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, header a {
    text-decoration: none;
    color: darkblue; /* optional, keeps header link color consistent with header */
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    color: darkblue; /* optional, keeps header link color consistent with header */
}

h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
    color: darkblue; /* optional, keeps header link color consistent with header */
}

body {
    font-family: "Garamond";
    font-size: large;
    max-width: 800px;
    margin: 0 auto;
    width: 90%;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
}

.container {
    text-indent: 20px;
    overflow-wrap: break-word;
}

@media (max-width: 768px) {
    body {
        font-size: medium;
        padding: 10px 0;
    }

    h1, h3 {
        font-size: 1.5em;
    }

    .container {
        text-indent: 10px;
    }
}


@media (max-width: 480px) {
    body {
        font-size: small;
    }

    h1 {
        font-size: 1.2em;
    }

    p, li, dt {
        font-size: 0.9em;
    }
}

.posts {
  max-width: 700px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.post-preview {
  margin-bottom: 3rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #ddd;
}

.post-title {
  font-size: 1.6em;
  margin-bottom: 0.4rem;
}

.post-title a {
  text-decoration: none;
  color: #2c3e50;
}

.post-title a:hover {
  color: darkblue;
}

.post-summary {
  color: #333;
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

.read-more {
  color: darkblue;
  text-decoration: none;
  font-weight: 500;
}

.read-more:hover {
  text-decoration: underline;
}

.post-preview:hover {
  transform: translateY(-2px);
  transition: transform 0.1s ease;
}

.post-date {
  color: #777;
  font-size: 0.9em;
  margin-bottom: 0.8rem;
}