@font-face  {
font-family: "Anonymous Pro", monospace;
  font-weight: 400;
  font-style: normal;
}

html {
font-family: "Anonymous Pro", monospace;
  color:#607D8B;
  background:ivory;
  text-wrap:balance;
  text-shadow:1px 1px 1px #fffa, 1px 1px 2px #607D8BAA;
}
body {
  max-width:960px;
  margin:auto;
  padding:2em;
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto 1fr auto auto;
}
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 2;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  text-align:start;
}
ol,ul,pre,blockquote,hr {
  text-align:start;
  margin:1em auto;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}
img {
 max-width: 100%;
 height: auto;
 margin:1em auto;
}
em {
 color: #666;
}


a {
  color:inherit;
  text-decoration:underline 1px tomato;
}
a:hover {
  color:#454545;
  -webkit-text-stroke:1px;
}

		/**************/
		/* theme mini */
		/**************/

@media (prefers-color-scheme: dark) {
  html, img {
    filter:invert(85%);
  }
  a {
    color:black;
  }
}

.header {
  display:grid;
  grid-template-columns: auto 1fr;
  align-items:center;
  gap:2rem 0;
  border-bottom: dashed 1px silver ;
  margin-bottom:3em;
}
.header h1 img  {
  filter: drop-shadow(1px 1px 1px #fffa) drop-shadow(1px 1px 1px #607D8BAA);
  vertical-align:middle;
  display:inline-block;
  width:.75em;
}
.header h1,.breadcrumbs {
  font-weight:bold;
}
.breadcrumbs {
  padding-bottom:.2em;
}
.navigation {
  grid-column:1/-1;
}
.navigation .menu {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:1em;
  padding-inline:.5em;
  text-transform:uppercase;

}
.menu .menu ,
.menu ul {
  display:contents;
}
.menu .menu span {
  display:none;
}
.main{
  display: flex;
  flex-flow: column;
}
article,
.footer{
  text-align:left;
}
article {
  padding-inline:4em;
}
article header h2 {
  font-weight:100;
  display:flex;
  flex-wrap:wrap;
  gap:0 1em;
  color: #0A59AA;  

}
article h2 time {
  color:#607D8B88
}
.content {
  margin:1em auto 3em;
  max-width:260em;
}
.more {
  text-align:end;
}
.more a::before,
.more a::after {
  content:'🞂 ';
  color:tomato;

}
.more a::after {
  content:' 🞀';
}
.pagination {
  margin-top:auto;
  text-align:end;
  border-top:dotted 1px;
  padding:2em 1em;
  background:#fff2
}
[href*='feed'] {

  float:left;
  margin:0 1em 0 0;
}
.footer {
  border-top:dashed 1px;
  padding: 4em 0 0;
}