@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

 :root {
      --link: #2196F3;
      --visit: #900;
    --link-active: #29f;

      --bd: #ddd;
      --bg: white;
      --bg2: #eee;

      --font-sans: "Helvetica Neue", Helvetica, sans-serif;
      --font-serif: "Lora", "Palatino", serif;

      --font-weight-regular: 400;
      --font-weight-medium: 500;
      --font-weight-semi-bold: 600;
      --font-weight-bold: 700;

      --font-style-normal: normal;
      --font-style-italic: italic;

      --line-height-tight: 1.4;
      --line-height-normal: 1.5;
      --line-height-relaxed: 1.75;

      --font-feature-defaults: "kern" on, "liga" on, "calt" on;

      --space-xxs: 0.25rem;
      --space-xs: 0.5rem;
      --space-sm: 0.75rem;
      --space-md: 1rem;
      --space-lg: 1.5rem;
      --space-xl: 2rem;
      --space-xxl: 3rem;
    }

    html { font-size: 110%;       font-family: var(--font-serif);
}
html {
  /* Set the font globally */
  font-family: var(--serif-font);
  scroll-behavior: smooth;
}

/* Make the body a nice central block */
body {
  color: var(--text);
  background-color: var(--bg);
  font-size: 1.15rem;
  line-height: 1.5;
  display: grid;
  grid-template-columns: 1fr min(45rem, 90%) 1fr;
  margin: 0;
}
body > * {
  grid-column: 2;
}

/* Make the header bg full width, but the content inline with body */
body > header {
  background-color: var(--accent-bg);
  border-bottom: var(--border-width) solid var(--border);
  text-align: center;
  padding: 0 0.5rem 2rem 0.5rem;
  grid-column: 1 / -1;
}

body > header > *:only-child {
  margin-block-start: 2rem;
}

body > header h1 {
  max-width: 1200px;
  margin: 1rem auto;
}

body > header p {
  max-width: 40rem;
  margin: 1rem auto;
}

/* Add a little padding to ensure spacing is correct between content and header nav */
main {
  padding-top: 1.5rem;
}

body > footer {
  margin-top: 4rem;
  padding: 2rem 1rem 1.5rem 1rem;
  color: var(--text-light);
  font-size: 0.9rem;
  text-align: center;
  border-top: var(--border-width) solid var(--border);
}



    h1 {
      font-family: var(--font-serif);
      font-weight: var(--font-weight-regular);
      line-height: var(--line-height-tight);
      font-feature-settings: var(--font-feature-defaults);
      font-size: clamp(1.25rem, 2.5vw + 1rem, 3rem);
    margin-bottom:var(--space-md);}

    .content h1{margin-bottom:var(--space-md);}

    h2, h3 {
      font-family: var(--font-serif);
      font-weight: var(--font-weight-medium);
      line-height: var(--line-height-normal);
      font-feature-settings: var(--font-feature-defaults);
      font-size: clamp(1.3rem, 1.5vw + 0.5rem, 2rem);
      margin: .5rem 0 .05rem 0;
    }

    h3 {  font-size: clamp(1.2rem, 1.2vw + 0.5rem, 2rem);font-style: var(--font-style-italic); }

    h4, h5 {
      font-family: var(--font-sans);
      font-weight: var(--font-weight-regular);
      line-height: var(--line-height-relaxed);
      font-feature-settings: var(--font-feature-defaults);
      font-size: clamp(1rem, 1.5vw + 0.25rem, 1.25rem);
      font-style: var(--font-style-italic);
    }

    p, li, blockquote, small {
      font-family: var(--font-serif);
      font-feature-settings: var(--font-feature-defaults);
      line-height: var(--line-height-normal);
    }

    p {
      font-weight: var(--font-weight-regular);
      font-size: clamp(1rem, 1.25vw + 0.25rem, 1.115rem);
      margin: .15rem 0;
      text-indent: .5rem;
    }

    small {
      font-family: var(--font-sans);
      font-weight: var(--font-weight-regular);
      line-height: var(--line-height-relaxed);
      font-size: clamp(0.85rem, 0.85vw + 0.25rem, 0.975rem);
    }

.sitename
{
	font-family: var(--font-sans);
	font-weight: var(--font-weight-medium);
	text-transform: uppercase;
}
    .navigation a {
      color: var(--link);
      font-weight: var(--font-weight-medium);
      text-decoration: none;
      font-family: var(--font-sans);
    }

.navigation a:hover {
    color: var(--link);
    border-bottom: solid 3px var(--link);
}
    .entry-tags{margin-top:1rem;}

    .entry-content{margin-bottom:1.5rem;}
    .entry-content a
    {
    	font-weight: normal;
    	font-style: oblique;
    }

    .spacer{var(--space-xl);}

    .siteinfo-banner{      font-family: var(--font-sans);
text-align:center;line-height:var(--line-height-tight);}

/* Container for the tag list */
.blogtags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    list-style: none; /* Removes default bullet points */
}
.blogpages ul {	list-style-type: square;
}

.blogpages ul li a:visited
{
	font-family: var(--font-sans);
	font-weight: var(--font-weight-regular);
	color: var(--visit);
}

/* Individual tag styling as buttons */
.blogtags li a {      font-family: var(--font-sans);

    display: inline-block;
    padding: 6px 12px;
    background-color: #f0f0f0; /* Light gray background */
    color: #333;               /* Dark text */
    text-decoration: none;     /* Removes underline */
    border-radius: 4px;        /* Rounded corners */
    font-size: 0.9em;
    transition: background-color 0.3s ease; /* Smooth hover effect */
      font-weight: var(--font-weight-medium);
}

/* Hover effect */
.blogtags li a:hover {
    background-color: #007bff; /* Primary blue on hover */
    color: #fff;               /* White text on hover */
}

hr{border-top:1px solid silver;}
.date{font-family:var(--font-sans);font-size:var(--space-sm);text-align:left;margin-top:.5rem;}

.tag-* a:visited{font-family:var(--font-sans);}