/* Setup */

:root {
  --c-accent: rgb(255, 209, 84);
  --c-accent-50: rgba(255, 209, 84, 0.5);
  --c-accent-10: rgba(255, 209, 84, 0.1);

  --c-accent-dark: rgb(255, 152, 24);
  --c-accent-dark-50: rgba(255, 152, 24, 0.5);

  --c-text: rgb(242, 242, 242);
  --c-text-50: rgba(242, 242, 242, 0.5);

  --c-bg: #152628;
  --c-highlight: rgb(219, 124, 7);
}

* {
  font-family: Source Code Pro, monospace, system-ui, -apple-system,
    BlinkMacSystemFont, sans-serif;
  color: var(--c-text);
  box-sizing: border-box;
  text-shadow: 2px 2px 2px var(--c-text-50);
}

/* Selectors */

::selection {
  background-color: var(--c-accent-50);
}

a,
a *,
code,
code *,
blockquote,
#ascii-art {
  color: var(--c-accent);
  text-shadow: 2px 2px 2px var(--c-accent-50);
}

img,
code,
blockquote {
  border: 1px solid var(--c-accent);
  box-shadow: 2px 2px 2px var(--c-accent-50);
}

code,
blockquote,
main {
  padding: 1rem;
}

p code,
ul code {
  display: inline;
  padding: 0;
  white-space: normal;
}

blockquote {
  font-style: italic;
}

body {
  background-color: var(--c-bg);
  overflow-y: scroll !important;
  margin: 0;
}

code {
  word-break: break-all;
  text-wrap: wrap;
  white-space: pre-wrap;
  display: block;
  background-color: var(--c-accent-10);
}

img {
  vertical-align: middle;
  display: block;
  max-width: 100%;
  height: auto;
}

main {
  max-width: 1024px;
  margin: 0 auto;
  min-height: 100dvh;
}

:focus-visible {
  outline-color: var(--c-highlight);
  outline-width: 1px;
  outline-style: solid;
}

a:active,
a:active * {
  color: var(--c-highlight);
}

#hot-links,
img {
  margin: 1rem 0;
}

.image-link {
  width: fit-content;
  display: block;
}

.bold {
  font-weight: bold;
}

@media screen and (max-width: 640px) {
  #ascii-art {
    font-size: 2.5vw;
  }
}