:root{
    --color-01-main-background:        var(--color-01-84);
    --color-01-main-background-rgb:    rgba(var(--color-01-rgb-84),0.83);
    --color-01-primary-element:        var(--color-01-80);
    --color-01-main-text:              var(--color-01-40);
    --color-01-background-hover:       var(--color-01-65);

    /** Calendar **/
    --color-01-background-dark:        var(--color-01-73); /** Days which aren't in the current month **/
    --color-01-primary-element-light:  var(--color-01-65);
}

/** Nextcloud specific **/
html.ng-csp header#header{
    background-color: var(--color-01-80);
    /* New Gradient based on original background (80 -5, 80, 80 +1, 80 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-75), var(--color-01-80), var(--color-01-81), var(--color-01-85));
    color: var(--color-01-17);
}

.files-list__row-name button, button.button-vue{
    background: transparent;
}

html.ng-csp div#postsetupchecks ul.info{
    background-color: transparent;
}


/** I wounder if this is correct here or if it belongs to the mastodon role */

div#mastodon .column-link{
    color: var(--color-01-55); 
}

div#mastodon .column-back-button {
    color: var(--color-01-58);
}

div#mastodon textarea, div#mastodon input, div#mastodon .compose-form__highlightable {
    background-color: var(--color-01-89);
    /* New Gradient based on original background (89 -5, 89, 89 +1, 89 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-84), var(--color-01-89), var(--color-01-90), var(--color-01-94));
    color: var(--color-01-19);
}

div#mastodon .status-card__title, div#mastodon .display-name strong{
    color: var(--color-01-33);
}

div#mastodon a.unhandled-link, div#mastodon .dropdown-button, div#mastodon .status__content a, div#mastodon .status-card__author{
    color: var(--color-01-29);
}
div#mastodon .dropdown-button{
    border: 1px solid #8c8dff;
}

div#mastodon .button, div#mastodon .button:active, div#mastodon .button:focus, div#mastodon .button:hover{
    background-color: var(--color-01-71);
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-66), var(--color-01-71), var(--color-01-72), var(--color-01-76));
}

.compose-form__actions .icon-button {
    color: var(--color-01-28);
}