@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,
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(0, 0, 0, 1) 50%, rgba(148, 200, 233, 1) 100%);
}

body {
  background-color: rgba(0, 0, 0, 0.35);
  border-color: white;
  border-style: solid;
  border-width: 4px;
  border-radius: 12px;
  color: white;
}

a {
  color: rgb(255, 180, 180);
}

a:visited {
  color: rgb(180, 180, 255);
}

h1 {
  color: black;
  background-color: white;
  background-clip: border-box;
  max-width: fit-content;
  padding: 0.3rem 1rem;
  mix-blend-mode: screen;
  border-radius: 10px;
  /* 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: black;
}

nav {
  display: inline;
}

nav a::after {
  content: "";
}

nav a,
nav a:visited {
  color: black;
  background-color: white;
  padding: 2px 10px;
  margin: 10px 0.5px;
  mix-blend-mode: screen;
  border-radius: 4px;
  /* mask: radial-gradient(4px at 4px 4px, #0000 98%, #000) -4px -4px; */
}

table {
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.35);
}

td {
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.35);
}