:root {
  --font-family-cursive: Chicle, cursive;
  --font-family-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-family-sans-serif: 'Open Sans', sans-serif;
  --font-family-monospace: 'Source Code Pro', monospace;
  --font-size-base: 18px;
  --font-size-smaller: 16px;
  --font-size-small: 14px;
  --line-height-base: 1.4;

  /* colors by clrs.cc */
  --color-navy: #001f3f;
  --color-blue: #0074d9;
  --color-aqua: #7fdbff;
  --color-teal: #39cccc;
  --color-olive: #3d9970;
  --color-green: #2ecc40;
  --color-lime: #01ff70;
  --color-yellow: #ffdc00;
  --color-orange: #ff851b;
  --color-red: #ff4136;
  --color-maroon: #85144b;
  --color-fuchsia: #f012be;
  --color-purple: #b10dc9;
  --color-black: #111;
  --color-stone: #444;
  --color-grey: #aaa;
  --color-silver: #ddd;
  --color-white: #fff;

  /* define defaults */
  --color-text: var(--color-silver);
  --color-text-headings: var(--color-white);
  --color-highlight: var(--color-yellow);
  --color-background: var(--color-stone);
  --font-family-base: var(--font-family-monospace);
  --font-family-headings: var(--font-family-monospace);
}

html {
  box-sizing: border-box;
  font-size: var(--font-size-base);
}

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

*:first-child {
  margin-top: 0;
}

*:last-child {
  margin-bottom: 0;
}

body {
  font-family: var(--font-family-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-background);
  background-image: url("tobias-van-schneider-88137-unsplash.jpg");
  background-size: cover;
  padding: 2em;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  min-height: 100vh;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

@media (max-width: 576px) {
  body {
    padding: 1em;
    justify-content: flex-start;
  }
}

.🔍 {
  font-size: small;
}

a {
  --padding: 0.5ex;
  --border-radius: 0.2em;

  color: var(--color-background);
  text-decoration: none;
  background-color: var(--color-text);
  display: inline-block;
  border-radius: var(--border-radius);
  padding: 0 var(--padding);
  margin-left: calc(var(--padding) * -1);
  margin-right: calc(var(--padding) * -1);
}

a:hover,
a:focus {
  transform: rotate(2deg);
  background-color: var(--color-highlight);
  outline: 0;
}

h1, 
h2, 
h3, 
h4, 
h5 {
  --color-text: var(--color-text-headings);

  color: var(--color-text);
  font-weight: normal;
  font-family: var(--font-family-headings);
  margin: 0 0 0.67em;
}

h1 {
  font-size: 1.5em;
}

hr {
  border: none;
  border-bottom: 1px solid var(--color-grey);
  margin: 1em 0;
}

.📦 {
  width: 100%;
  max-width: 35rem;
  mix-blend-mode: difference;
}