html {
    background: linear-gradient(170deg, #102a5080 0%, #2f2a5000 50%), 
                0 0 / 1024px url('/themes/moxif bg.svg');
    /* background-image: ;
    background-size: 1024px; */

    --bg: #2f2a50;
    --text: hsl(212, 100%, 97%);

    --button-hover: #2AF;
    --accent-border: #ee88f5;
    --accent-text: #2AF;

    --link: #2AF;
    --link-visited: #6AC;
    --link-hover: #CFF;

    --tag-lightness: 90;

    --min-text-on-grey: 60;
    
}

header {
    background: linear-gradient(170deg, #102a5080 0%, #2f2a5000 50%);
}

header h1 a {
    -webkit-text-fill-color: #aff4;
}

#sticky-line, footer, main, header, nav li {
    backdrop-filter: blur(5px);
}

nav ul {
    background-color: #2f2a508d;
}

h1 {
    border-left: 8px solid #4488ff;
    padding-left: 8px;
    margin-left: -16px;
}

main {
    background-color: var(--bg);
}


/* twow */

.twow-section-header .progress {
    background-image: url("/themes/moxif bg.svg");
    background-size: 1024px;
    box-shadow:  rgba(0, 0, 0, 0.9) 0 0 4px 0px inset;
  }
.twow-section-header .progress .bar {
    background: linear-gradient(309deg, rgba(255, 255, 255, 0.2) 0%, var(--col, rgba(85, 255, 85, 0.2)) 60%);
    backdrop-filter: blur(4px) saturate(2);
    box-shadow: rgba(0, 0, 0, 0.9) 0 0 40px 0px;
}
.twow-section-header .progress[completed] .bar {
    background: rgba(106, 233, 233, 0.206);
}

.response {
    box-shadow: rgba(0, 0, 0, 0.3) 0 0 3px 0px;
}