/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
/*
  2. Remove default margin
*/
* {
  margin: 0;
}
/*
  3. Allow percentage-based heights in the application
*/
html,
body {
  min-height: 100%;
}
/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
  6. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  fill: currentColor;
  height: auto;
}
/*
  7. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
  font: inherit;
}
/*
  8. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/*
  My Styles
*/
:root {
  --black: #222;
  --white: #eee;

  /* Color scheme */
  --textcolor: var(--black);
  --bgcolor: var(--white);
  --highlight: repeating-linear-gradient(
    to right,
    hsl(333, 100%, 59%),
    hsl(27, 100%, 65%),
    hsl(50, 100%, 50%),
    hsl(108, 70%, 58%),
    hsl(170, 63%, 64%),
    hsl(233, 63%, 64%),
    hsl(284, 97%, 41%),
    hsl(305, 97%, 41%)
  );
}

@media (prefers-color-scheme: dark) {
  :root {
    --textcolor: var(--white);
    --bgcolor: var(--black);
  }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  font-weight: 300;
  color: var(--textcolor);
  background: var(--bgcolor);
  padding: 16px;
  max-width: 60ch;
  margin-inline: auto;
}

section,
article,
main {
  margin-block-start: 24px;
}

ul,
ol {
  padding-inline-start: 2ch;
}

a {
  position: relative;
  text-decoration: none;
  color: currentColor;
  font-weight: 400;
  overflow-wrap: anywhere;
}

a:hover {
  background: var(--highlight);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  a:hover {
    background-size: 200% 100%;
    animation: rainbow 0.8s linear infinite;
  }
}

a.underlined::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 3px;
  width: 100%;
  background: var(--highlight);
}

@keyframes rainbow {
  100% {
    background-position: -200% 0;
  }
}

/* External links */
a[href*="//"]:after
{
  content: '\2197'; /* top right arrow: ↗ */
  color: var(--textcolor);
  font-size: 0.7em;
  opacity: 0.25;
  margin-inline-start: 4px;
}