@font-face {
  font-family: AtkinsonNext;
  src: url(fonts/AtkinsonHyperlegibleNext-Regular.ttf);
}

@font-face {
  font-family: AtkinsonNext;
  src: url(fonts/AtkinsonHyperlegibleNext-RegularItalic.ttf);
  font-style: italic;
}

@font-face {
  font-family: AtkinsonNext;
  src: url(fonts/AtkinsonHyperlegibleNext-Bold.ttf);
  font-weight: bold;
}

@font-face {
  font-family: AtkinsonNext;
  src: url(fonts/AtkinsonHyperlegibleNext-BoldItalic.ttf);
  font-style: italic;
  font-weight: bold;
}

body {
  margin: 2em auto;
  max-width: 40rem;
  font-family: AtkinsonNext, "Atkinson Hyperlegible";
  border-width: 4px;
  border-style: solid;
  padding: 2em;
}

a {
  text-decoration: none;
  font-weight: bold;
}

a::after {
  content: ' [' attr(href) ']';
  font-size: 75%;
}

h1 {
  background-clip: border-box;
  max-width: fit-content;
  padding: 0.3rem 1rem;
  mix-blend-mode: multiply;
  mask: radial-gradient(10px at 10px 10px, #0000 98%, #000) -10px -10px;
}

h1,
h3 {
  text-align: center;
  margin: 0.2rem auto;
}

h2::after {
  content: ' [#' attr(id) ']';
  font-size: 75%;
}

ul {
  list-style-type: '❤ ';
}

html {
  background: linear-gradient(90deg, rgba(238, 174, 202, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(148, 200, 233, 1) 100%);
}

body {
  background-color: rgba(255, 255, 255, 0.35);
  border-color: black;
}

a {
  color: rgb(100, 0, 0);
}

a:visited {
  color: rgb(0, 0, 100);
}

h1 {
  color: white;
  background-color: black;
  background-clip: border-box;
  max-width: fit-content;
  padding: 0.3rem 1rem;
  mix-blend-mode: multiply;
  mask: radial-gradient(10px at 10px 10px, #0000 98%, #000) -10px -10px;
}

ul {
  list-style-type: '❤ ';
}

h1>a::after {
  content: "";
}

h1>a,
h1>a:visited {
  color: white;
}