@use "everforest";

/// Stole this from Stack Overflow (https://stackoverflow.com/a/54702294) {{{

.rainbow_text_animated {
    background: linear-gradient(to right, everforest.$red, everforest.$orange, everforest.$yellow, everforest.$green, everforest.$blue, everforest.$purple);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow_animation 1s ease-in-out infinite;
    background-size: 600% 100%;
}

@keyframes rainbow_animation {
    0%,100% {
        background-position: 0 0;
    }

    50% {
        background-position: 100% 0;
    }
}

/// }}}

h1 {
  margin: 0;
}

html {
  background-color: everforest.$bg0;
  height: 100%;
}

body {
  color: everforest.$fg;
  background-color: everforest.$bg1;
  margin: 0 auto;
  max-width: 800px;
  padding: 10px;
  min-height: 100%;
}

a {
  color: everforest.$blue;
}

img {
  max-width: 100vw;
  max-height: 720px;
}

pre {
  padding: 1rem;
  overflow: auto;
}
/* The line numbers already provide some kind of left/right padding */
pre[data-linenos] {
  padding: 1rem 0;
}
pre table td {
  padding: 0;
}
/* The line number cells */
pre table td:nth-of-type(1) {
  text-align: center;
  user-select: none;
}
pre mark {
  /* If you want your highlights to take the full width */
  display: block;
  /* The default background colour of a mark is bright yellow */
  background-color: rgba(254, 252, 232, 0.9);
}
pre table {
  width: 100%;
  border-collapse: collapse;
}

.wip-indicator {
  color: everforest.$yellow;
}

.langcolor {
  &-rust {
    color: everforest.$orange;
  }
}