.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--neon-yellow);
    border-top: var(--border);
    padding: 0.5rem 1rem;
    z-index: 9999999;
    margin-top: auto}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0}

.footer:hover .footer-content {
    gap: 0.35rem}

.footer-hover-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.2s ease, opacity 0.2s ease}

.footer:hover .footer-hover-menu {
    max-height: 8rem;
    opacity: 1}

.footer-credit {
    color: var(--color-black);
    text-align: center;
    font-size: 0.55rem;
    
    margin: 0}

.footer-links {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center}

.footer-links a {
    color: var(--color-black);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    border-radius: var(--radius);
    font-size: 0.55rem}

.footer-links a:hover {
    text-decoration: none}

.footer-panel {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem 1rem}

.footer-panel-group {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: center}

.footer-panel-label {
    font-size: 0.55rem;
    font-style: italic;
    color: var(--color-black)}

.footer-panel-buttons {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap}

.footer-panel-btn {
    border: var(--border);
    background: transparent;
    color: var(--color-black);
    font-size: 0.55rem;
    
    padding: 0.2rem 0.4rem;
    cursor: pointer}

.footer-panel-btn:hover {
    background: var(--color-black);
    color: var(--neon-yellow)}

.footer-panel-btn.is-active {
    background: var(--color-black);
    color: var(--neon-yellow)}

img.tsm-image-target {
    transition: filter 0.2s ease}

html[data-image-mode="grayscale"] img.tsm-image-target,
body[data-image-mode="grayscale"] img.tsm-image-target {
    filter: grayscale(100%)}

html[data-image-mode="low"] img.tsm-image-target,
body[data-image-mode="low"] img.tsm-image-target {
    filter: blur(1.8px) saturate(0.55) contrast(0.75) brightness(1.05)}

html[data-image-mode="bitmap"] img.tsm-image-target,
body[data-image-mode="bitmap"] img.tsm-image-target {
    filter: grayscale(100%) contrast(2.6) blur(1.2px) saturate(0);
    image-rendering: pixelated}