/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

body {
  /* 3. Add accessible line-height */
  line-height: 1.5;
  /* 4. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 5. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 6. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 7. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 8. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*  9. Create a root stacking context */
#root, #__next {
  isolation: isolate;
}

/* Styles */
html {
  width: 100%;
  background-color: #141414;
  color: white;
  font-family: sans-serif;
  font-size: 100%;
}
body {
  max-width: 100ch;
  margin-inline: auto;
  padding-inline: 10px;
}
.skip-link:not(:focus):not(:active) {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
main:focus {
  outline: none;
}
a {
  text-decoration-style: solid;
}
a:link {
  color: white;
}
a:visited {
  color: wheat;
}
header ul, footer ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
header a, footer a, .header-logo {
  display: block;
  padding: 8px;
}
nav a:visited {
  color: white;
}
h1, h2, h3, p {
  margin: 1em 0 1em 0;
}
h1 {
  font-size: 2.2rem;
}
h1, h2, h3, details, aside summary, figcaption {
  border-bottom: 1px dashed white;
}
.hero {
  position: relative;
  height: 267px;
  background-image: url('../images/detail_White_Horse_-_And_I_Saw_Heaven_Opened_Panel_13_-_Irene_Barberis.png');
  background-repeat: repeat;
  margin-bottom: 2rem;
}
.hero h1 {
  font-size: 4rem;
  position: absolute;
  bottom: 0;
  margin-bottom: 0;
  -webkit-text-fill-color: white;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
}
li {
  margin-bottom: 5px;
}
.no-italics {
  font-style: normal;
}
aside {
  margin-top: 1em;
}
.button-row {
  display: flex;
  justify-content: space-evenly;
}
.button-row button {
  width: 10ch;
}
.columns {
  display: flex;
  justify-content: space-between;
}
.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.not-sidebar {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 50%;
}
.sidebar {
  flex-basis: 20rem;
  flex-grow: 1;
}
details {
  margin-left: 10px;
}
blockquote p:first-child, aside {
  max-width: fit-content;
  padding: 10px;
  border-radius: 5px;
  border: 2px solid white;
}
.border {
  padding: 10px;
  border-radius: 5px;
  border: 2px solid white;
}
.border p {
  margin-top: 0;
}
blockquote {
  border-left: 2px solid dimgray;
  padding: 0 5px;
  margin-top: 2em;
  margin-bottom: 2em;
}
summary i {
  font-weight: bold;
}
h2, h3 {
  margin-top: 3em;
}
h2 {
  font-size: 1.8rem;
}
h3 {
  font-size: 1.5rem;
}
.margin-top {
  margin-top: 1rem;
}
figure {
  margin-inline: 1em;
}
img {
  margin-inline: auto;
  width: 500px;
  height: auto;
  border: 2px solid white;
}
.smaller-portrait-image {
  max-width: 300px;
}
figcaption {
  font-size: 85%;
  margin-inline: auto;
  max-width: fit-content;
  text-align: center;
}
.font-size-small {
  font-size: small;
}
.border-none {
  border: 0;
}
footer {
  margin-top: 10vh;
  margin-bottom: 2vh;
}
footer details {
  text-align: center;
}
footer img {
  border-top: 0;
  border-right: 0;
  border-bottom: 1px dashed white;
  border-left: 0;
}