html {
  color: var(--color);
  font-family: "Georgia", serif;
  font-size: 1.2em;
  background-color: var(--color-bg);
  width: 100;
  overflow-x: hidden;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

body {
  width: min(80ch, 75vw);
  margin: 0;
  overflow-x: visible;
}

h1,h2,h3,h4,h5 {
  color: var(--color-h);
  font-family: "Verdana", sans-serif;

  &:has(+ nav) {
    margin-bottom: 0.25lh;
  }

  &:target {
    animation: target-flash 1s ease;
  }
  
}  

@keyframes target-flash {
  0% {
    background-color: var(--color-h);
    color: var(--color-bg);
  }
  100% {
    background-color: inherit;
    color: inherit;
  }
}

b,strong {
  color: var(--color-b);
}

svg {
  fill: var(--color);
}

img {
  width: 100%;
}

a {
  --color: var(--color-a);
  color: var(--color);

  overflow-wrap: break-word;
  
  &:hover {
    --color: var(--color-a-hov);
  }

  /* outlink */
  &[href^="http"]:not([href*="bta.kirisoup.dev"]) {
    &::after {
      content: "";
      display: inline-block;
      width: 1ch;
      height: 1em;
      background-color: var(--color);
      mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'><path d='M14 9 L3 9 3 29 23 29 23 18 M18 4 L28 4 28 14 M28 4 L14 18' /></svg>");
      mask-repeat: no-repeat;
      mask-position: top;
      margin-left: 0.25ch;
    }  
  }  
}  

ul {
  padding-inline-start: 3ch;
  margin-block: 0.5lh;
}

hr {
  border-style: dotted;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: left;
  flex-wrap: wrap;
  font-size: 1.2em;
  margin-bottom: 20px;
}

.block {
  --color: var(--color-block);
  border: 1px dotted var(--color);
  /* margin: 0 10px; */
  margin-block: 1lh;
  
  > * {
    margin-inline: 1ch;
  }
  
  h1:first-child {
    font-size: 1em;
    position: relative;
    margin: 0;
    text-align: left;
    padding-inline: 1ch;
    padding-block: 0.2lh;
  }
}

.small {
  font-size: 0.8em;
}

footer {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  hr {
    width: 100%;
    border-style: solid;
  }
}