@font-face
{
  font-family: 'Fedra Mono';
  src: url('fonts/FedraMonoL-Book.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face
{
  font-family: 'Fedra Mono';
  src: url('fonts/FedraMonoL-MediumItalic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
}
@font-face
{
  font-family: 'Fedra Sans';
  src: url('fonts/FedraSansL-Book.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face
{
  font-family: 'Fedra Sans';
  src: url('fonts/FedraSansL-BookItalic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
}
@font-face
{
  font-family: 'Fedra Sans';
  src: url('fonts/FedraSansL-Medium.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}

:root
{
  --primary: black;
  --inverse: white;
  --secondary: rgba(0, 0, 0, 0.75);
  --tertiary: rgba(0, 0, 0, 0.5);
  --gradient-from: hsl(224, 100%, 80%);
  --gradient-to: hsl(20, 100%, 90%);
}
@media (prefers-color-scheme: dark)
{
  :root
  {
    --primary: white;
    --inverse: black;
    --secondary: rgba(255, 255, 255, 0.75);
    --tertiary: rgba(255, 255, 255, 0.5);
    --gradient-from: hsl(268, 100%, 37%);
    --gradient-to: hsl(329, 98%, 46%);
  }
}

@media print
{
  :root
  {
    --primary: black;
    --inverse: white;
    --secondary: black;
    --tertiary: grey;
    --gradient-from: white;
    --gradient-to: white;
  }
  body[style]
  {
    background-color: var(--inverse) !important;
  }
}

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

h1
{
  font-size: 2em;
  font-weight: normal;
}
h2,
h3
{
  font-weight: normal;
}
h2
{
  margin: 1.5rem 0 0 0;
  font-size: 1.75em;
}
h3
{
  margin: 0;
  font-size: 1.375em;
}

ul,
ol
{
  margin: 1em 0;
  padding: 0;
}
li
{
  margin: 0.5em 0 0.5em 1.5em;
  padding: 0;
}
ul li
{
  list-style-type: disc;
}

div.legalese > ol > li
{
  margin: 0.5em 0;
  list-style-position: inside;
}

div.artifacts ul
{
}
div.artifacts ul,
div.artifacts li
{
  margin: 0;
  padding: 0;
}
div.artifacts li
{
  list-style-type: none;
}

dt
{
  color: var(--secondary);
  font-weight: bold;
  float: left;
}
dt:after
{
  content: ': ';
}
dd
{
  margin: 0.5em 0;
}
@media (min-width: 480px)
{
  dd
  {
    margin-left: 12em;
  }
}

@media print
{
  nav
  {
    display: none;
  }
}

a
{
  color: inherit;
}
@media print
{
  a
  {
    text-decoration: none;
  }
  a:not(.logo)[href^=http]:after
  {
    content: " (" attr(href) ")";
    color: var(--tertiary);
  }
}

strong
{
  font-weight: bold;
}

tt
{
  font-family: 'Fedra Mono';
}

::selection
{
  color: var(--inverse);
  background-color: var(--secondary);
}

html,
body
{
  min-height: 100%;
}
body
{
  margin: 0;
  padding: 0;
  font-family: 'Fedra Sans';
  line-height: 1.375;
  font-synthesis: none;
  --webkit-text-size-adjust: none;
  text-size-adjust: none;
  color: var(--primary);
  background: var(--inverse) no-repeat
              linear-gradient(to right bottom, var(--gradient-from), var(--gradient-to));
}
@media (max-width: 480px)
{
  body
  {
    background-image: linear-gradient(to bottom, var(--gradient-from), var(--gradient-to));
  }
}

body > div:not(.artifacts)
{
  padding: 0
           max(env(safe-area-inset-right), 1rem)
           0
           max(env(safe-area-inset-left), 1rem);
  max-width: 48rem;
}
body > div:first-child
{
  padding-top: max(0, env(safe-area-inset-top));
}
body > div:last-child
{
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

.logo
{
  display: block;
  margin: 0 0 1.5em 0;
  padding: 0.875em 1em 0.75em 1em;
  width: fit-content;
  font: 1.25em/1 'Fedra Mono';
  font-weight: normal;
  font-style: italic;
  text-align: center;
  text-transform: lowercase;
  text-decoration: none;
  color: var(--inverse);
  background: var(--secondary);
  mix-blend-mode: multiply;
}
a.logo:active
{
  background: var(--primary);
}
@media (prefers-color-scheme: dark)
{
  .logo
  {
    mix-blend-mode: screen;
  }
}

div.artifacts ul
{
  display: flex;
  padding: 0.5rem max(env(safe-area-inset-right), 1rem) 0.5rem max(env(safe-area-inset-left), 1rem);
  gap: 1rem;
  font-size: min(48px, max(16px, 2vw));  /* Controls artifact size, nicest when divisible by 8. */
  overflow-x: auto;
}
@media (any-pointer: coarse)  /* Hide scrollbar on touch devices. */
{
  div.artifacts ul
  {
    scroll-snap-type: x mandatory;
  }
  div.artifacts ul::-webkit-scrollbar
  {
    display: none !important;
  }
}
@media (any-pointer: fine)  /* Show a custom scrollbar on devices with a mouse pointer. */
{
  div.artifacts ul::-webkit-scrollbar
  {
    height: 0.5rem;
    background: transparent;
  }
  div.artifacts ul::-webkit-scrollbar-thumb
  {
    background-color: var(--tertiary);
    background-clip: padding-box;
    border-radius: 0.25rem;
  }
  div.artifacts ul::-webkit-scrollbar-button:start:decrement,
  div.artifacts ul::-webkit-scrollbar-button:end:increment
  {
    display: block;
    width: 1rem;
    background: transparent;
  }
  div.artifacts ul::-webkit-scrollbar-button:start:increment,
  div.artifacts ul::-webkit-scrollbar-button:end:decrement
  {
    display: none;
  }
}

div.artifacts li
{
  box-sizing: border-box;
  position: relative;
  flex: 0 0 auto;
  height: 10em;
  aspect-ratio: 3/2;
  border-radius: 0.125em;
  scroll-snap-align: center;
}
div.artifacts li,
div.artifacts li:after
{
  background: var(--secondary);
}
div.artifacts li > div
{
  position: absolute;
  inset: 0.0625em;
  border-radius: 0.0625em;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: top left;
}

div.artifacts li.desktop
{
  aspect-ratio: 4/3;
  border-radius: 0.1875em;
}
div.artifacts li.desktop > div
{
  inset: 0.5em 0.0625em 0.0625em 0.0625em;
  border-radius: 0.125em;
}

div.artifacts li.phone
{
  aspect-ratio: 0.475;
  border-radius: 0.625em;
}
div.artifacts li.phone > div
{
  inset: 0.125em;
  border-radius: 0.5em;
  background-position: top 0.5em left;
}
div.artifacts li.phone:after
{
  content: '';
  position: absolute;
  left: 50%;
  top: 0.3125em;
  width: 1.25em;
  height: 0.125em;
  margin: 0 0 0 -0.625em;
  border-radius: 0.0625em;
}

div.artifacts li.tablet
{
  aspect-ratio: 0.725;
  border-radius: 0.4375em;
}
div.artifacts li.tablet > div
{
  inset: 0.3125em;
  border-radius: 0.1875em;
  background-position: top 0.125em left;
}

div.project
{
  margin-top: 1rem;
}
div.details + div.project
{
  margin-top: 2rem;
}

div.details p > span
{
  font-weight: bold;
  color: var(--secondary);
}

p.version
{
  color: var(--tertiary);
}
h1 + p.version
{
  margin-top: -0.5rem;
}