:root {
  --font-family: -apple-system, system-ui, sans-serif;

  --max-page-width: 84rem;
  --max-hero-width: 80rem;
  --max-prose-width: 64rem;
  --gutter: clamp(1rem, 4vw, 2rem);

  /*
  --color-background: #001a1d;
  --color-foreground: #839496;

  --color-black: #073642;
  --color-red: #dc322f;
  --color-green: #859900;
  --color-yellow: #b58900;
  --color-blue: #268bd2;
  --color-magenta: #d33682;
  --color-cyan: #2aa198;
  --color-white: #eee8d5;

  --color-bright-black: #4c4c4c;
  --color-bright-red: #cb4b16;
  --color-bright-green: #586e75;
  --color-bright-yellow: #657b83;
  --color-bright-blue: #839496;
  --color-bright-magenta: #6c71c4;
  --color-bright-cyan: #93a1a1;
  --color-bright-white: #fdf6e3;
  */
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

html, body {
  background: #dde1e4;
  color: #1a1c1e;
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-style: normal;
  font-weight: 400;
  margin: 0;
}

/*
html, body, input {
  background: var(--color-foreground);
  color: var(--color-background);
  font-family: var(--font-family);
  line-height: 1.5;
}
*/

h1, h2, h3, h4, h5, h6 {
  font-family: 'Red Hat Display', sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 900;
  line-height: 1.2;
}

h1 { font-size: clamp(2rem, 5vw + 1rem, 6rem); }
h2 { font-size: clamp(1.75rem, 3vw + 0.75rem, 4rem); }
h3 { font-size: clamp(1.5rem, 2.5vw + 0.5rem, 3rem); }
h4 { font-size: clamp(1.25rem, 2vw + 0.25rem, 2rem); }
h5 { font-size: clamp(1.125rem, 1.5vw + 0.125rem, 1.5rem); }
h6 { font-size: clamp(1rem, 1vw + 0.125rem, 1.25rem); }

p, table, ol, ul {
  font-size: clamp(1.125rem, 1rem + 0.75vw, 1.75rem);
  line-height: 1.4;
}

/*
table {
  font-size: clamp(1rem, 1vw + 0.125rem, 1.25rem);
  line-height: 1.4;
}
*/

.season table th:last-child,
.season table td:last-child {
  white-space: nowrap;
}

table {
  border-collapse: collapse;
}

thead {
  border-bottom: 3px solid #a9c4bf;
}

tr {
  border-bottom: 2px solid #a9c4bf;
}

tbody tr:hover {
  background: #a9c4bf;
}

tr:last-child {
  border-bottom: none;
}

th, td {
  vertical-align: top;
  padding: 0.5rem 1rem;
}

header {
  padding-block: 1rem;
}

main header, article {
  padding-block: 2rem;
}

main header, footer {
  background: #0077a7;
  color: #fff;
  padding-block: 2rem;
}

body > header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-direction: column;
}

body > header span {
  display: none;
}

.brand, footer a {
  color: #1a1c1e;
  font-family: 'Red Hat Display', sans-serif;
  font-size: clamp(1.125rem, 1.5vw + 0.125rem, 1.5rem);
  text-decoration: none;
}

footer a {
  color: #fff;
  display: block;
  font-size: inherit;
}

nav {
  font-size: clamp(1.125rem, 1.5vw + 0.125rem, 1.5rem);
  display: flex;
  gap: 1rem;
}

a {
  color: #0077a7;
  text-decoration-color: #a9c4bf;
  text-decoration-line: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: .2em;
}

a:hover {
  color: #be4843;
  text-decoration: none;
}

nav a {
  color: #1a1c1e;
  text-decoration: none;
}

nav a:hover {
  color: #1a1c1e;
  text-decoration-color: #e99b26;
  text-decoration-line: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: .2em;
}

.container {
  inline-size: min(100% - 2 * var(--gutter), var(--max-page-width));
  margin-inline: auto;
}

main header .container {
  inline-size: min(100% - 2 * var(--gutter), var(--max-hero-width));
  text-align: center;
}

article.container {
  inline-size: min(100% - 2 * var(--gutter), var(--max-prose-width));
}

footer .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 20vw, 20rem);
}

img, table {
  max-width: 100%;
  width: 100%;
}

img {
  border-radius: 0.5rem;
}

cite {
  font-size: clamp(1rem, -0.4375rem + 3vw, 1.25rem);
}

.regulars .sharks {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 20vw, 2rem);
  text-align: center;
}

.regulars h4 {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.regulars p {
  margin-bottom: 0;
}

.regulars > p cite {
  text-align: center;
  display: block;
  width: 100%;
}

@media (min-width: 768px) {
  body > header span {
    display: inline;
  }

  .regulars .sharks {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 992px) {
  body > header {
    flex-direction: row;
  }

  .regulars .sharks {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/*
a {
  color: var(--color-blue);
  text-decoration: none;
}

a:hover, a:focus {
  text-decoration: underline;
}

a:visited {
  color: var(--color-bright-magenta);
}

a:active {
  color: var(--color-red);
}

ul li::marker {
  content: '- ';
}

blockquote {
  position: relative;
  font-style: italic;
}

blockquote::before {
  content: '> ';
  position: absolute;
  left: -1.5rem;
}

header, main, footer {
  margin: 0 auto;
  max-width: 80ch;
}

header, main, footer {
  padding: 1rem 2rem;
}

header nav {
  display: flex;
  gap: 0 1ch;
  flex-wrap: wrap;
}

header a:hover {
  text-decoration: none;
}

header nav span {
  display: block;
}

header span a {
  color: var(--color-bright-yellow) !important;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

pre {
  background-color: var(--color-black);
  border-radius: 0.5rem;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  font-size: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
}

img, table {
  max-width: 100%;
}

img {
  border-radius: 0.5rem;
}

table {
  width: 100%;
}

table {
  margin-bottom: 1rem;
}

table, th, td {
  border: 1px solid var(--color-foreground);
  border-collapse: collapse;
  padding: 0.5rem;
}

code {
  color: var(--color-magenta);
  font-size: 1rem;
}

.pagination {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
}

.meta {
  color: var(--color-cyan);
}

ul.tags {
  list-style-type: none;
  display: flex;
  gap: 2rem;
}

ul.tags li::marker {
  content: '# ';
}

input {
  background: var(--color-foreground);
  color: var(--color-background);
  border: 0;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  width: 500px;
  max-width: 100%;
}

input:focus {
  outline: none;
}