#debug-bar {
    position: fixed;
    bottom: 0;
    right: 2rem;
    z-index: 9999;
}

#debug-bar details {
    color: #000;
}

#debug-bar details summary {
    cursor: pointer;
    padding: 6px 10px;
    background: #c9870b;
    color: #fff;
    font-weight: bold;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    text-align: center;
}

#debug-bar details summary:hover {
    background: #e1960f;
}

#debug-bar details summary::marker {
    content: '';
    letter-spacing: 5px;
}

#debug-bar details[open] summary {
    box-shadow: rgba(0, 0, 0, 0.5) 0 0 10px;
    padding: 1rem;
}

#debug-bar details[open] > summary::marker {
    content: '';
}

#debug-bar details summary small {
    display: block;
    font-weight: normal;
    font-size: 0.6rem;
    color: #fff;
}

#debug-bar ul {
    background: palegoldenrod;
    font-size: 0.9rem;
    padding: 1rem 2rem 1rem 2rem;
    list-style: square;
    box-shadow: rgba(0, 0, 0, 0.3) 0 0 10px;
}

#debug-bar ul li {
    margin: 0.25rem 0;
}

#debug-bar .debug-bar-separator {
    border-bottom: 1px dotted #000;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

#debug-bar a {
    color: #000 !important;
}