/* Modern CSS Reset */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html, body {
  height: 100%;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
/* Fonts */
.averia-serif-libre-light {
  font-family: "Averia Serif Libre", serif;
  font-weight: 300;
  font-style: normal;
}

.averia-serif-libre-regular {
  font-family: "Averia Serif Libre", serif;
  font-weight: 400;
  font-style: normal;
}

.averia-serif-libre-bold {
  font-family: "Averia Serif Libre", serif;
  font-weight: 700;
  font-style: normal;
}

.averia-serif-libre-light-italic {
  font-family: "Averia Serif Libre", serif;
  font-weight: 300;
  font-style: italic;
}

.averia-serif-libre-regular-italic {
  font-family: "Averia Serif Libre", serif;
  font-weight: 400;
  font-style: italic;
}

.averia-serif-libre-bold-italic {
  font-family: "Averia Serif Libre", serif;
  font-weight: 700;
  font-style: italic;
}
.momo-trust-sans-<uniquifier> {
  font-family: "Momo Trust Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
/* Styling */
body {
  font-family: "Averia Serif Libre", serif;
  font-weight: 300;
  font-style: normal;
  background-color: #ffdddc;
  a {
    color: #000;
  } 
  h1 {
  }
}
  header {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 40PX;
    padding-top: 40PX;
    a {
      text-decoration: none;
    }
  }
  .menu {
    ul {
      padding: 0;
      margin: 0;
      list-style-type: none; /* Optional: removes the bullet points */
    }
  }
  .tagcloud {
    ul {
      padding: 0;
      margin: 0;
      list-style-type: none; /* Optional: removes the bullet points */
    }
  }
  .content-container {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 3fr 1fr;
    a {
      text-decoration: none;
    }
    .articles {
      .article-preview {
          padding-bottom: 35px;
          h2 {
            font-size: 2.5em;
          }
          p {
            width: 90%;
            font-size: 1.3em;
            margin-bottom: 25px;
          }
          ul {
            margin-bottom: 25px;
          }
          li {
            font-size: 1.3em;
          }
          img {
            width: 90%;
            height: auto;
            padding-bottom: 25px;
          }
          .posttags {
            font-size: 0.9em;
          }
          a {
            text-decoration: underline;
          }
          a:hover {
            text-decoration: none;
          }        
      }
    }
    .article-nav {
      grid-template-columns: 3fr 3fr 3fr;
      display: grid;
      vertical-align: top;
      font-size: 1.2em;
      margin-bottom: 70px;
      .article-nav-prev {
          text-align: left;
      }
      .article-nav-home {
          text-align: center;
      }
      .article-nav-next {
          text-align: right;
      }
    }
    .sidebar {
      .recents {
        padding: 0;
        margin: 0;
        list-style-type: none; /* Optional: removes the bullet points */
        a {
          text-decoration: underline;
        }
        a:hover {
          text-decoration: none;
        }        
      }
    }
  }
  footer {
    p {
      text-align: center;
    }
  }
/* Style for small screens only */
@media (max-width: 767px) {
  body {
    .content-container {
      width: 75%;
      margin-left: auto;
      margin-right: auto;
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr; /* Single column = vertical stack */
      gap: 1.5rem;
      align-items: start; /* Top-aligned content */
      a {
        text-decoration: none;
      }
      .articles {
        .article-preview {
            padding-bottom: 35px;
            h2 {
              font-size: 2.5em;
            }
            p {
              width: 90%;
              font-size: 1.3em;
              margin-bottom: 25px;
            }
            img {
              width: 90%;
              height: auto;
              padding-bottom: 25px;
            }
            .posttags {
              font-size: 0.9em;
            }
            a {
              text-decoration: underline;
            }
            a:hover {
              text-decoration: none;
            }        
        }
      }
    }

}