#compass-base, .compass-dial {
    display:block;
    position: absolute;
    top:0;
    left:0;
    width: auto;
    height: 100%;
    --angle: 0;
    transform: rotate(var(--angle));
    transition: transform 2s ease-in-out;
}

#compass-base {
  animation: spin 120s linear infinite;
}

#compass-base > path {
    color: var(--scribbles);
}

#compass-anchor {
    width: 128px;
    height: 128px;
    position: relative;
    display: inline-block;
    margin: -16px -8px -16px;
}

#compass-container {
    position: relative;
    display: block;
    margin: 10px auto;
    background-color: var(--anti-text-25);
    border-radius: 20px;
    padding: 10px;
    text-align: center;
    width: fit-content;
}

#compass-info {
  display: inline-block;
  vertical-align: center;
  padding: 0 10px;
  font-size: 0.8em;
}

#compass-info-metadata {
    font-family: "DM Sans", "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", sans-serif;
  font-size: 0.8em;
  letter-spacing: 0.3em;
  margin: 0em -1em 0.5em;
  opacity: 0.7;
}

#compass-info-metadata > span {
    font-family: "DM Sans", "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", sans-serif;
}

#compass-info-metadata-lower {
    font-family: "DM Sans", "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", sans-serif;
  font-size: 0.8em;
  letter-spacing: 0.3em;
  margin: 0 -1em;
  opacity: 0.7;
  filter: saturate(0);
}

#compass-info-body {
    margin: 0;
    text-transform: capitalize;
    font-family: Avara, Lora, serif;
    font-size: 2em;
    font-weight: 800;
}

#compass-info-header {
    margin: 0;
    font-family: "Avara", Lora, serif;
  font-style: italic;
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

#indicator-myno > path, #compass-meta-myno {
    color: hsl(289, 75%, 50%);
}

#indicator-viola > path, #compass-meta-viola {
    color: hsl(350, 75%, 50%);
}

#indicator-widget > path, #compass-meta-widget {
    color: hsl(17, 75%, 80%);
    filter: blur(10px);
}
#compass-meta-widget {
    filter: blur(0.1em);
}

#indicator-pickles > path, #compass-meta-pickles {
    color: hsl(120, 75%, 50%);
}