.header-copy .text-tertiary-color {
    color: var(--color-secondary);
}

.text-tertiary-color {
    color: var(--color-primary);
}

.page-top__btn-random {
    display: inline-block;
    font-family: 'Neucha', Arial, sans-serif;
    font-size: 1rem;
    border: 0.125rem solid var(--color-primary);
    border-radius: 0.5rem;
    background-color: var(--color-primary);
    color: var(--color-secondary);
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: 0.2s;
}

.page-top__btn-random:hover {
    background-color: var(--color-secondary);
    color: var(--color-primary);
}

.page-top__btn-random:active {
    color: var(--color-quinary);
}

.page-top__btn-random_disabled,
.page-top__btn-reload_disabled,
.page-top__btn-colour_disabled {
    cursor: not-allowed;
    background-color: var(--color-secondary);
    color: var(--color-quinary);
    border-color: var(--color-quinary);
}

.page-top__btn-random_disabled:hover,
.page-top__btn-reload_disabled:hover,
.page-top__btn-colour_disabled:hover {
    background-color: var(--color-secondary);
    color: var(--color-quinary);
}

.form__question .text-tertiary-color {
    text-decoration: underline;
}

.output__text a,
.output__text a:link {
    color: var(--color-primary);
}

.output__text a:hover {
    text-decoration: none;
}

.output__text a:active {
    color: var(--color-quinary);
}

[class^="dot"] {
    border-radius: 50%;
    background-color: var(--color-primary);
    border: 2px solid #000;
    margin: 0.2rem;
    width: 0.5rem;
    height: 0.5rem;
    animation: fade-in 2s;
}

.dot-hit {
    border: 2px solid var(--color-primary);
    background-color: var(--color-secondary);
}

.footer-copy a,
.footer-copy a:link {
    color: var(--color-secondary);
}

.footer-copy a:hover {
    text-decoration: none;
}

.footer-copy a:active {
    color: var(--color-quinary);
}

.scroll-to-top-btn {
    color: var(--color-secondary);
    background-color: var(--color-primary);
}

.scroll-to-top-btn:hover {
    background-color: var(--color-quinary);
}