*,
*::before,
*::after {
  /* Use a more intuitive box-sizing model */
  box-sizing: border-box;
  /* https://www.youtube.com/watch?v=cH8VbLM1958 */
  min-width: 0;
  /* Remove all margins and padding */
  margin: 0;
  padding: 0;

}

/* Only show focus outline when the user is tabbing (not when clicking) */
/* Except for input and textarea */
*:focus:not(:is(input, textarea)) {
  outline: none;
}

*:focus-visible {
  outline: 1px solid blue;
}

html {
  /* Allow percentage-based heights */
  /* Setting width: 100% isn't required because it is a default for block-level elements (html and body are block level) */
  height: 100%;

  /* Sets font-size to 10px. 
  Percent units are used to ensure font will scale if user has a custom font-size browser setting (for ally).
  Using 10px as the base to make it easy to set font sizes in elements. Example: for 16px, use 1.6rem, for 32px, use 3.2rem, ...  */
  font-size: calc(100% / 16 * 10);
  line-height: 1.5;
  /* Prevent the browser from synthesizing missing typefaces */
  font-synthesis: none;
  font-smooth: always;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  /* Prevent mobile browsers increasing font-size */
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;

  color: black;
  font-family: system-ui, ui-sans-serif, sans-serif;
}

body {
  height: 100%;

  /* Prevent the rubber band effect when the user scrolls to the top or bottom of the page (WebKit only) */
  overscroll-behavior: none;

  /* UI controls color (example: range input) */
  accent-color: black;

  /* Because overscroll-behavior: none only works on WebKit, a background color is set that will show when overscroll occurs  */
  background: white;

  font-size: 1.5rem;
}

p {
  /* Prevents orphans (ensures the final line of text has at least two words). */
  text-wrap: pretty;
  /* Avoid text overflow */
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  /* Stronger effect than 'pretty'. Attempts to make each line of text the same length */
  text-wrap: balance;
}

strong {
  overflow-wrap: break-word;
}

/* Remove unintuitive behaviour such as gaps around media elements.  */
img,
picture,
video,
canvas,
svg,
iframe {
  display: block;
}

input,
textarea,
button,
button:disabled {
  font: inherit;
  color: inherit;
  border: none;
  border-radius: 0;
  background: none;
}

fieldset {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}


.wrapper {
  margin: auto;
  max-width: 300px;
}

img {
  margin: auto;
  max-width: 100%;
}

img:not(:last-child) {
  padding-block-start: 5rem;
  padding-block-end: 15rem;
}

img.bandcamp {
  width: 70%;
}

a {
  margin: auto;
}