html {
  font-size: 1.2rem;
  box-sizing: border-box;
  scrollbar-gutter: stable both-edges; 

  --hue: 60;
  --accent-hue: 20;
  --invert-percent: 0;

  --background: hsl(var(--hue), 17%, 98%);
  --active-color-normal: hsl(var(--accent-hue), 10.94%, 95.67%);
  --border-color-normal: hsl(var(--accent-hue), 6.88%, 37.06%);

  --text-color-normal: hsl(var(--hue), 0%, 0%);
  --secondary-color-normal: hsl(var(--hue), 0%, 10%);

  --accent-color-normal: hsl(21, 78.65%, 34.9%);

  color: var(--text-color-normal);
}

html[data-theme='dark'] {
  --hue: 0;
  --accent-hue: 20;
  --invert-percent: 100;

  --background: hsl(var(--accent-hue), 27%, 10%);
  --active-color-normal: hsl(var(--accent-hue), 15.46%, 19.02%);
  --border-color-normal: hsl(var(--accent-hue), 6.88%, 37.06%);
  
  --text-color-normal: hsl(var(--hue), 100%, 100%);
  --secondary-color-normal: hsl(var(--hue), 0%, 90%);
  --accent-color-normal: hsl(var(--accent-hue), 78.65%, 34.9%);
}

html.color-theme-in-transition,
html.color-theme-in-transition *,
html.color-theme-in-transition *:before,
html.color-theme-in-transition *:after {
  transition: all 750ms !important;
  transition-delay: 0 !important;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: Helvetica, Arial, sans-serif;
}

a {
  color: var(--text-color-normal);
}

body {
  max-width: 55rem;
  margin-inline: auto;
  margin-block: 0.5rem 2rem;
  padding-inline: 1rem;
  background-color: var(--background);
}



/* Post List */
.post-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 2rem;
  margin-block: 2rem;
  width: 100%;
}

.post-list article {
  background-color: var(--active-color-normal);
  border-bottom: 2px solid var(--accent-color-normal);
  border-radius: 0.5rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-wrap: break-word;
  word-break: break-all;
  min-width: 0;
  overflow: hidden;
}

.post-list article img {
  width: 100%;
  height: 12rem;
  object-fit: cover;
  border-radius: 0.25rem;
  margin-bottom: 0.75rem;
}

.post-list article h2 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  overflow-wrap: break-word;
  word-break: normal;
}

.post-list .date-and-tags {
  display: flex;
}

.post-list article p {
  overflow-wrap: break-word;
  word-break: normal;
}

.post-list article p.date, .post-list article .tags {
  font-size: 0.9rem;
  color: var(--secondary-color-normal);
  margin-bottom: 0.5rem;
}

.post-list article .tags {
  font-style: italic;
  margin-left: 0.5rem;
}

/* prevent .post-list from overflowing on very narrow viewports */
@media screen and (max-width: 25rem) {
  .post-list {
    grid-template-columns: 1fr;
  }
}

/* Images */
img {
  max-width: 100%;
}
img[width][height] {
  height: auto;
}
img[src$=".svg"] {
  width: 100%;
  height: auto;
  max-width: none;
}

/* Article */

@media screen and (max-width: 50rem) {
  article.post {
    padding-inline: 1rem;
  }
}

article.post {
  margin-block: 2rem;
}

.frontmatter {
    display: flex;
    flex-direction: column;
    gap: 0.5rem
}

.frontmatter p {
  font-style: italic;
}

.tags {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* space between label and list */
}

.tags ul {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}


.post-content {
  line-height: 1.6;
  margin-block: 1rem;
}

.post-content p,
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
  margin-block: 0.5rem;
}

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
  margin-top: 2rem;
}

.post-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-block: 1rem;
}

.post-content img.float-left {
  float: right;
  max-width: 40%;
  margin: 0 1rem 1rem 0;
}

.post-content img.float-right {
  float: right;
  max-width: 40%;
  margin: 0 0 1rem 1rem;
}

.post-content .emphasised {
  font-size: 1.5rem;
  font-weight: bold;
}

.post-content h1, .frontmatter h1 {
  font-size: 2rem;
}

.post-content a {
  color: var(--text-color-normal);
}

/* clearfix */
.post-content::after {
  content: "";
  display: table;
  clear: both;
}

/* disable floats on narrow screens */
@media screen and (max-width: 50rem) {
  .post-content img.float-left,
  .post-content img.float-right {
    float: none;
    width: 100%;
    margin: 1rem 0;
  }
}

/* Nav header */
.header {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 15px;
  grid-row-gap: 10px;
  grid-column: 2/2;
  margin-bottom: 1rem;
}

.header_content {
  display: flex;
  align-items: center;
  gap: 0rem;
}

.header_name {
  float: left;
  padding: 0.6rem;
  border-bottom: 3px solid var(--accent-color-normal);
  margin-right: 0rem;
  text-decoration: none;
}

.header_name h1 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  font-weight: bold;
  margin:0;
}

/* stacked-alpha-video {
  display: inline-block;
} */

stacked-alpha-video video {
  display: none;
}

.is-hidden { opacity:0 !important; pointer-events:none; }

.fox-player { position: relative; width: var(--size, 80px); }
.ratio-1x1::before { content: ""; display: block; } /* square */

.fox-player > * { position: absolute; inset: 0; width: 100%; height: 100%; }

.fox-thumb { all:unset; cursor:pointer; display:block; z-index:2; }
.fox-thumb img { width:100%; height:100%; display:block; object-fit:cover; }



.nav {
  padding-top: 1rem;
  grid-column: 3/3;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

.nav ul li a {
  text-decoration: none;
  -webkit-text-decoration: none;
  padding: 0.5rem 1rem;
  transition: color 0.1s ease-in, background-color 0.1s ease-in;
  text-transform: uppercase;
}

.nav ul li.current a {
  font-weight: bold;
}

.nav ul li a:hover {
  text-decoration: underline;
}

.nav ul li.current a:hover {
  text-decoration: none;
}

.nav button {
  background-color: var(--background);
  color: var(--text-color-normal);
}

@media screen and (max-width: 50rem) {
  .header {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    margin-top: 1rem;
  }
  .header_content {
    grid-column: 1;
    grid-row: 1;
  }
  .nav {
    grid-column: 1;
    grid-row: 2;
    justify-content: flex-start;
    padding-inline: 1rem;
  }
  .nav ul li a {
    text-decoration: underline;
    padding: 0;

  }
}

/* Footer */
.footer {
  margin-top: 1rem;
  margin-bottom: 2rem;
  border-top: 2pt solid var(--accent-color-normal);
}

.footer_content {
  padding: 0.5em 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer_content p {
  margin: 0;
  font-size: 0.8rem;
  flex: 1;
  line-height: 1;
}

p.footer_center {
  text-align: center;
}
p.footer_left {
  text-align: left;
}
p.footer_right {
  text-align: right;
}

.footer_center svg {
  vertical-align: middle;
  width: 1em;
  height: 1em;
}

.footer_right .footer_logo {
  width: 1.2em;
  vertical-align: middle;
}