/* fixed-header.css */
.header-fixed header {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.header-fixed main {
  margin-top: var(--header-size);
}
.header-fixed :target {
  padding-top: var(--header-size);
  margin-top: calc(0rem - var(--header-size));
  -webkit-background-clip: content-box;
  background-clip: content-box;
}

/* target-highlight.css */
section .title {
  width: min-content;
  position: relative;
}
section .title:after,
section .title:before {
  display: inline-block;
  opacity: 0;
  transition: opacity var(--animation-duration);
  position: absolute;
  --offset: -2.4ch;
  visibility: hidden;
  color: var(--c-acc);
}
section .title:before {
  content: "\27a1";
  left: var(--offset);
}
section .title:after {
  content: "\2b05";
  right: var(--offset);
}
section:target .title:before,
section:target .title:after {
  opacity: 0.6;
  visibility: visible;
}

/* header.css */
header {
  display: grid;
  font-size: var(--f-header);
  background-color: var(--c-bg-acc);
  margin-top: 0;
  box-shadow: 0px 0px 10px gray;
}
header .title {
  grid-area: title;
  margin: 0.3em 0;
  font-size: 0.5em;
  margin-inline-start: 0.5em;
}
header nav.menu {
  grid-area: nav;
  font-size: 0.24em;
  margin: 0 auto;
}
header nav.menu ul {
  display: flex;
  height: 100%;
  margin: 0;
  list-style: none;
  gap: 1rem;
  align-items: center;
}
header {
  grid-template: "title" "nav" / auto;
}
:root {
  --header-size: calc(var(--f-header) + 0.3rem + calc(var(--f-header) * 0.24)) !important;
}
@media (min-width: 50rem) {
  header {
    grid-template: "title nav" / max-content auto;
  }
  :root {
    --header-size: calc(var(--f-header) + 0.3rem) !important;
  }
}

/* style.css */
:root {
  --c: forestgreen;
  --c-acc: orangered;
  --opacity: 0.9;
  --c-bg: rgba(248,248,255,var(--opacity));
  --c-bg-acc: rgba(255,255,224,var(--opacity));
  --f: 1rem;
  --f-header: 4rem;
  --f-xxlarge: 3rem;
  --f-xlarge: 2rem;
  --f-large: 1.5rem;
  --header-size: calc(var(--f-header) + 0.3rem);
  --gap-h: 4.5rem;
  --gap-v: 3rem;
  --width: 80ch;
  --animation-duration: 0.5s;
}
a:link,
a:visited,
a:hover,
a:active {
  text-decoration-line: none;
}
html {
  color: var(--c);
  background-color: var(--c-bg);
  font-size: var(--f);
}
body {
  margin: 0;
  padding: 0;
}
a {
  color: var(--c-acc);
}
h1,
h2,
h3,
h4 {
  margin: 0;
  margin-bottom: 0.5rem;
}
h1 {
  font-size: var(--f-xxlarge);
}
h2 {
  font-size: var(--f-xlarge);
}
h3 {
  font-size: var(--f-large);
}
h4 {
  font-size: var(--f-large);
}
main {
  max-width: min(calc(100vw - var(--gap-h)), var(--width));
  margin: 0 auto;
}
h2 {
  text-decoration: underline;
}
.card {
  background-color: var(--c-bg-acc);
  border: solid;
  border-radius: 0.1rem;
  padding: 1.5rem 2rem;
}
section h3:before {
}
section {
  margin: var(--gap-v) 0;
}
a.picture img {
  height: 1rem;
  width: 1rem;
}
a.external,
a[href^=http]:after {
  content: "\2197";
  display: inline-block;
  vertical-align: super;
  font-size: smaller;
  transform: translateX(-0.2em);
}
i {
  display: inline-block;
  color: var(--c-acc);
}