/* Variables */
html {
  --bg: center / cover no-repeat url('/background.svg');

  --fg: #efefef;
  --link-fg: oklch(80% 45% 262);
  --link-hover: oklch(80% 45% 328);
  --link-active: oklch(80% 45% 82);

  --glow-blue: oklch(70% 45% 262);
  --glow-magenta: oklch(70% 45% 328);
}

* {
  transition:
    background 0.2s ease-in-out,
    color 0.2s ease-in-out,
    text-shadow 0.2s ease-in-out;
}

html, body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

html,
body {
  background: var(--bg);
  color: var(--fg);
  font-family: monospace;
  font-size: 13pt;
  text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.8);
}

main {
  margin-top: 5rem;
  max-width: 100%;
  text-align: center;
  padding: 1ex 1em;
}

p, nav {
  margin: 1em auto;
  max-width: 80ex;
}

p {
  text-align: justify;
}

a,
a:visited {
  color: var(--link-fg);
  text-decoration: underline;
}

h1 {
  font-size: 2.5em;
}

a:hover {
  color: var(--link-hover);
  text-decoration: underline;
  text-shadow:
    0px 0px 6px var(--link-hover),
    0px 0px 6px var(--link-hover);
}

a:active {
  color: var(--link-active);
  text-decoration: underline;
  text-shadow:
    0px 0px 6px var(--link-active),
    0px 0px 6px var(--link-active);
}

img.refsheet {
  box-sizing: border-box;
  max-width: calc(100% - 24px);
  padding: 12px;
  border-radius: 24px;
  box-shadow:
    0px 0px 8px 2px rgba(255, 255, 255, 1) inset,
    0px 0px 16px 2px var(--glow-magenta) inset,
    0px 0px 24px 2px rgba(255, 255, 255, 0.7),
    0px 0px 16px 2px var(--glow-blue);
}