@use "everforest.module";

/// 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;
    }
}

/// }}}

.dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0);
  border: 2px solid white;
}

html,
body,
#root {
  height: 100%;
  margin: unset;
}

h1 {
  margin: 0;
}

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

a {
  color: everforest.$blue;
}

img {
  max-width: 100%;
  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;
  }
}

.textPopup {
  /* text-align: center; */
  pointer-events: none;
  background-color: everforest.$bg1;
  color: everforest.$fg;
  border-radius: 5px;
  font-size: 15px;
  width: 200px;
  max-width: 50vw;
  padding: 5px;
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}