:root {
  --link: #051F6B;
  --link-active: #540149;
}

body {
  header, footer, main>aside {
    background-image: url("/public/img/about/cardboard.webp");
    border-top: 1rem solid transparent; background-clip: padding-box;
    border-image: url("/public/img/about/border.webp") 25 round;
    padding-top: 0.5rem; color: var(--black);
    p, a {color: var(--black);}
  }
  header {
    border-top: 0; border-bottom: 1rem solid transparent;
    padding: 0 1rem 1rem;
  }
  main {
    padding: 1rem 1rem 0;
    aside {
      padding: 0.5rem; box-sizing: border-box;
      border-bottom: 1rem solid transparent;
      border-left: 1rem solid transparent;
      border-right: 1rem solid transparent;
      &:not(:last-child) {margin-bottom: 0.5rem;}
      h2,dl,ul { margin: 0;}
      dl, form {
        dd,dt, input, label {display: inline;}
        dt { font-weight: bold; &::after { content: ":";} }
        dd, label { margin: 0; &::after { content: "\A"; white-space: pre; } }
      }
    }
  }
  footer {
    nav > a { color: var(--link);}
    nav > a:visited { color: var(--link-active);}
    &::before { display: none;}
  }
}
/* Tiny-mobile */
@media screen and (max-width: 30rem) {
}

/* Tablet view */
@media screen and (min-width: 40rem) {
  body {
    div>main {
      padding: 1rem;
      column-width: 18rem; column-gap: 1rem;
      aside {
        display: inline-block;
        width: 100%;
        break-inside: avoid;
        &:not(:last-child) {margin-bottom: 1rem;}
      }
    }
  }
}
/* Desktop view */
@media screen and (min-width: 67rem) {
  body>div>main { column-width: 22rem; }
}