/* Local instance branding: kept separate from PairDrop's upstream styles. */

body {
    --primary-color: #6cae2a;
    --paired-device-color: #0875d1;
    --public-room-color: #e6332a;
    --accent-color: #6cae2a;
    --ws-peer-color: #e6332a;

    --lt-bg-color: 250, 247, 239;
    --lt-bg-color-secondary: #f0eadb;
    --lt-border-color: #687255;
    --lt-badge-color: #58751f;
    --lt-dialog-bg-color: #fffdf8;

    --dt-bg-color: 24, 29, 20;
    --dt-bg-color-secondary: #303a28;
    --dt-border-color: #9ab66a;
    --dt-badge-color: #789e35;
    --dt-dialog-bg-color: #20281b;
}

body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    height: 5px;
    z-index: 100;
    background: linear-gradient(90deg, #e6332a 0 33%, #6cae2a 33% 66%, #0875d1 66%);
}

svg.logo {
    background: #fff8e8 url("../images/peepos-rucksack-512.png") center / cover no-repeat;
    border: 3px solid #6cae2a;
    border-radius: 24%;
    box-sizing: border-box;
    overflow: hidden;
}

svg.logo > use {
    display: none;
}

#about .title-wrapper h1 {
    color: var(--primary-color);
}

#about .title-wrapper h1::after {
    content: " · PairDrop";
    color: rgb(var(--text-color));
    font-size: 0.55em;
    font-weight: normal;
}

footer .logo {
    box-shadow: 0 4px 0 rgba(230, 51, 42, 0.2), 0 8px 20px rgba(23, 35, 13, 0.16);
}