:root {
    --main: #131415;
    /* --accent: hsl(from var(--main) calc(h * 2.3) calc(s * 14) calc(l * 5)); green */
    --accent: hsl(from var(--main) h s calc(l * 14));
    --anti-accent: hsl(from var(--main) h s calc(l * 1));
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    background-color: #0f0f0f;
    background-image: url("data:image/svg+xml;utf8,\
                                        <svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'>\
                                        <g transform='rotate(25 60 60)'>\
                                        <circle cx='60' cy='60' r='10' fill='white' fill-opacity='0.08'/>\
                                        </g>\
                                        </svg>");
    background-repeat: repeat;
    background-size: 60px 60px; /* kleiner */
    color: hsl(from var(--accent) h s l);
}


* {
    box-sizing: border-box;

    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
    font-family: 'Roboto', sans-serif;
    overflow-anchor: none;
}

a {
    color: hsl(from var(--accent) h s calc(l * 1));
    font-style: italic;
}

.layout .header {
    background-color: var(--accent);
    color: hsl(from var(--anti-accent) h s l);
}

.layout .header .buttons button {
    background-color: hsl(from var(--anti-accent) h s l);
    color: hsl(from var(--accent) h s calc(l * 1));

    border: 1px solid hsl(from var(--main) h s calc(l * 14));
}

.layout .search input {
    border: 1.5px solid var(--accent);
}

.layout .quick-actions span {
    background-color: var(--accent);
    color: hsl(from var(--anti-accent) h s l);
}

.layout .footer a,
.layout .footer {
    background-color: var(--accent);
    color: hsl(from var(--anti-accent) h s l);
}

#promptContainer .gif-info-container .media_variants {
    background: linear-gradient(
            90deg,
            hsl(from var(--main) calc(h * 1.1) calc(s * 18) calc(l * 8)),
            hsl(from var(--main) calc(h * 1.3) calc(s * 18) calc(l * 8))
    );
}

#promptContainer .gif-info-container .media_variants button {
    background-color: transparent;
    color: hsl(from var(--anti-accent) h s l);
    border: 1px solid hsl(from var(--anti-accent) h s l / 20%);
}


/* account.css */
#accountPopup {
    background-color: hsl(from var(--main) h s calc(l * 1) / 80%);
    color: hsl(from var(--anti-accent) h s calc(l * 1) / 80%);
}

#accountPopup .account-layout {
    background-color: hsl(from var(--anti-accent) h s l);
    color: hsl(from var(--accent) h s l);
    border: 1px solid hsl(from var(--accent) h s calc(l * 1) / 80%);
}

#accountPopup .account-layout .nav {
    background-color: var(--accent);
    color: hsl(from var(--anti-accent) h s l);
}

#accountPopup .account-layout .nav details ul li {
    background-color: hsl(from var(--anti-accent) h s l);
    color: hsl(from var(--accent) h s l);
}

#accountPopup .account-layout .nav details button {
    background-color: transparent;
    color: hsl(from var(--accent) h s l);
    border: none;
}

#promptContainer .login-error{
    border: 1px solid indianred;
    background-color: rgba(205, 92, 92, 0.58);
}