@import "ds.css";

/* Logo */
.logo a{
  color: var(--color-text-default);
  text-decoration: none;

}

.logo i {
  font-size: .9em;
}

/** Text Rotation Animation */
.animation {
  --animation-height: 2em;
  --animation-speed: 15s;

  vertical-align: sub;
  height: var(--animation-height);
  overflow: hidden;
  display: inline-block;
  line-height: var(--animation-height);
}

.animation ul {
  animation: animation var(--animation-speed) infinite;
  padding: 0;
  margin-top: calc(0 * var(--animation-height));
  list-style: none;
}

@keyframes animation {
  0%        { margin-top: calc(0 * var(--animation-height)); }
  12.5%     { margin-top: calc(-1 * var(--animation-height)); }
  25%       { margin-top: calc(-2 * var(--animation-height)); }
  37.5%     { margin-top: calc(-3 * var(--animation-height)); }
  50%       { margin-top: calc(-4 * var(--animation-height)); }
  62.5%     { margin-top: calc(-3 * var(--animation-height)); }
  75%       { margin-top: calc(-2 * var(--animation-height)); }
  87.5%     { margin-top: calc(-1 * var(--animation-height)); }
  100%      { margin-top: calc(0 * var(--animation-height)); }
}


.animation.slow{
  --animation-speed: 25s;
}

.animation.average{
  --animation-speed: 15s;
}

.animation.fast{
  --animation-speed: 10s;
}

/** End Text Rotation Animation **/


.faq summary, .faq details {
  text-align: left;
}


:root {
  --comment: var(--color-dark-comment);
  --function: var(--color-dark-function);
  --language: var(--color-dark-language);
  --string: var(--color-dark-string);
  --keyword: var(--color-dark-keyword);
  --html: var(--color-dark-html);
  --section: var(--color-dark-section);
  --bullet: var(--color-dark-bullet);
  --color-code-background: var(--color-dark-background);
  --color-code-text: var(--color-dark-code-text);
}

pre code {
  color: var(--color-code-text);
  background: var(--color-code-background);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}