:root { 
  --s:#0d0e0f;
  --w: #d3d2d1; 
  --accent: #1160a8;
  --grey: #5b5d57;
  --bar: #a4a7a7;
  --btngrey: #bcb9b7;
}

@media (prefers-color-scheme: dark) {
:rfoot { 
  --s:#0e0f0d;
  --w: #d3d2d1; 
  --accent: #1160a8;
  --grey: #5b5d57;
  --bar: #a4a7a7;
  --btngrey: #bcb9b7;
 }
}

body {
    margin: 0;
    background-color: var(--w);
    font-style: normal;
  font-family: noto-serif, serif, system-ui;
  }

.title {
  align-items: center;
  color: var(--accent);
  margin: 20px auto 100px 0;
  font-size: 0.6rem;
  font-family: serif, system-ui;
}

.back {
  align-items: center;
  color: var(--accent);
  font-style: italic;
  text-decoration: 1px underline;
  font-size: 0.8rem;
  font-family: serif, system-ui;
}

.backnav {
  margin: 0 auto 20px;
}
.dis {
  align-items: center;
  color: var(--grey);
  margin: 0 auto 40px 0;
  font-size: 0.6rem;
  font-family: serif, system-ui;
}

.footer {
  align-items: center;
  color: var(--btngrey);
  margin: 0 auto 80px 0;
  font-size: 0.4rem;
  font-style: italic;
  font-family: serif, system-ui;
}

.heading00 {
  align-items: center;
  color: var(--s);
  margin: 0 auto 10px;
  font-size: 1rem;
  font-family: serif, system-ui;
}

.cat {
  align-items: center;
  color: var(--s);
  line-height: 2;
  font-size: 1.2rem;
  font-family: serif, system-ui;
}

.mainnav {
  align-items: center;
  color: var(--s);
  margin: 0 auto 40px;
  font-size: 1.2rem;
  font-family: serif, system-ui;
}

.content {
   padding: clamp(20px, 10%, 60px) clamp(20px, 10%, 120px) clamp(10px, 6%, 80px);
   max-width: 45ch;
   margin: min(8vw, 60px) auto min(30vw, 200px);
}

.player {
  display: flex;
  align-items: center;
  gap: 16px;
  background: transparent;
  color: var(--grey);
  user-select: none;
  font-size: 0.8rem;
  margin: 0 auto 60px;
}
.player-time { min-width: 2.5em; }
.player-track {
  position: relative;
  flex: 1;
  height: 4px;
  border-radius:0px;
  background: var(--btngrey);
  opacity: 100%;
  cursor: pointer;
}
.player-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  border-radius:0px;
  width: 0%;
  background: var(--accent);
}
.player-back {
  font-family: noto-serif, serif, system-ui;
  font-weight: 400;
  color: var(--accent);
  cursor: pointer;
  background-color: var(--btngrey);
  border-colohjr: var(--accent);
  padding: 2px 8px;       /* vertical | horizontal space */
  border-radius: 0px;     /* rounded corners */
}
.player-toggle {
  font-family: noto-serif, serif, system-ui;
  font-weight: 400;
  color: var(--btngrey);
  cursor: pointer;
  background-color: var(--accent);
  padding: 2px 8px;       /* vertical | horizontal space */
  border-radius: 0px;     /* rounded corners */
  }

.player-audio { display: none; }