/* website colors */
/* c_ to start names bc not allowed to start name with integer  ex. 2nd_darkest_shade */
:root {
    --darkest_shade: #333;
    --c_2nd_darkest_shade: #c6c6c6;
    --filter_for_c_2nd_darkest_shade: invert(95%) sepia(0%) saturate(0%) hue-rotate(147deg) brightness(86%) contrast(88%);
    --c_3rd_darkest_shade: #f1f1f1;
    --filter_for_c_3rd_darkest_shade: invert(99%) sepia(8%) saturate(699%) hue-rotate(178deg) brightness(119%) contrast(89%);
    --c_4th_darkest_shade: #333;
    --button_3d_border_lighter_color: #cccccc;
    --button_3d_border_darker_color: #878787;
}



/* darkest_shade*/
body, #title_and_submit_your_own_and_login, #filter_inputs_and_currently_selected_filters, #input_names, #input_filter_type_2s, #input_filter_type_3s, ul, .form_submit_button, #go_to_the_entries_button, #go_to_the_entries_button_parent, #results, .col, #basebar {
    background-color: var(--darkest_shade);
}
#input_names:focus, #input_filter_type_2s:focus, #input_filter_type_3s:focus {
    + label {
        background-color: var(--darkest_shade);
    }
}
#top_button, #bottom_button {
    /* background-color: var(--darkest_shade);    toggle this on if using circle around the double arrows in the top and bottom buttons */
}
#logout_form, #logout_form [type="submit"] {
    color: var(--darkest_shade);
}



/* 2nd_darkest_shade */
#op_ed_articles_list, #op_ed_article, form:not(#logout_form), #password_reset_msg_wo_form {
    background-color: var(--c_2nd_darkest_shade);
}
#results, #basebar:not(:first-child) {
    color: var(--c_2nd_darkest_shade);
}



/* 3rd_darkest_shade */
body, #input_names_and_ul_names a, #input_filter_type_2s_and_ul_filter_type_2s a, #content_filter_type_3s a, #input_names, #input_filter_type_2s, #input_filter_type_3s, .vose, .playlist, #playlistitems, #basebar a, form:not(#logout_form) a, #op_ed_articles_list a, a.remove_filter_button  {
    color: var(--c_3rd_darkest_shade);
}
#top_button, #bottom_button, .form_submit_button, .playlistitem, .all_text_below_vid_wrapper, .all_text_below_vid, #logout_forms_submit_button {
    background-color: var(--c_3rd_darkest_shade);
}
#input_names, #input_filter_type_2s {
    &:not(:focus) {
        color: rgba(241, 241, 241, .3);
    }
}



/* 4th_darkest_shade */
.playlistitem, #op_ed_articles_list, #op_ed_article, form:not(#logout_form), #password_reset_msg_wo_form, .form_submit_button {
    color: var(--c_4th_darkest_shade);
}



/* opacity change */
[full_alpha_for_text="false"] {
    color: rgba(241, 241, 241, .5);
}
.modal_container {
    background-color: rgba(0,0,0,.8);    /* this color sits over the content when modal is open */
    &.out {
        background-color: rgba(0,0,0,0);
    }
}
#go_to_the_entries_button_twin {
    color: rgba(255, 255, 255, 0);
}



/* rainbow gradient */
@media (pointer:fine) {
    #vose_modal_close_button, #playlist_modal_close_button, #go_to_the_entries_button, form:not(#logout_form) a, .modal a, #extras a, #op_ed_articles_list a, a.remove_filter_button {
        &:hover {
            animation: birthday_justtext .5s infinite;
        }
    }
    ul li a:hover {
        animation: birthday_textandstraightenedborder .5s infinite;
    }
    #input_names, #input_filter_type_2s, #input_filter_type_3s {
        &:hover:not(:focus) {
            animation: birthday_justborder_desktop .5s infinite;    /* needed bc has rounded borders */
            + label {
                animation: birthday_justtext .5s infinite;
            }
        }
    }
    [inside_modal="false"], [window_within_buttons_clickable_height="true"], .form_submit_button, #logout_forms_submit_button {
        &:hover {
            animation: birthday_justborderboxbackground .5s infinite;
        }
    }
    textarea, #form_fields input {
        &:hover:not(:focus) {
            animation: birthday_justborderboxbackground .5s infinite;
        }
    }
    .playlistitem:not(.active) {
        &:hover {
            animation: birthday_justborderboxbackground .5s infinite;
            opacity: .75;
            /* .playlistitem_modal_name {
                animation: birthday_justtext .5s infinite;
            } */
        }
    }
}

@media (pointer:coarse) {
    #vose_modal_close_button, #playlist_modal_close_button, #go_to_the_entries_button, form:not(#logout_form) a, .modal a, #extras a, #op_ed_articles_list a, a.remove_filter_button {
        &:active {
            animation: birthday_justtext .5s infinite;
        }
    }
    ul li a:active {
        animation: birthday_textandstraightenedborder .5s infinite;
    }
    #input_names, #input_filter_type_2s, #input_filter_type_3s {
        &:active:not(:focus) {
            animation: birthday_justborder_mobile .5s infinite;
            + label {
                animation: birthday_justtext .5s infinite;
            }
        }
    }
    [inside_modal="false"], [window_within_buttons_clickable_height="true"], .form_submit_button, #logout_forms_submit_button {
        &:active {
            animation: birthday_justborderboxbackground .5s infinite;
        }
    }
    textarea, #form_fields input {
        &:active:not(:focus) {
            animation: birthday_justborderboxbackground .5s infinite;
        }
    }
    .playlistitem:not(.active) {
        &:active {
            animation: birthday_justborderboxbackground .5s infinite;
            opacity: .75;
            /* .playlistitem_modal_name {
                animation: birthday_justtext .5s infinite;
            } */
        }
    }
}


@keyframes birthday_justtext {
	0% {
		background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
		background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
		color: rgba(255, 255, 255, 0);
		-webkit-background-clip: text;
		background-clip: text;
	}
	16% {
		background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #ff2), color-stop(0.15, #f22), color-stop(0.3, #f2f), color-stop(0.45, #22f), color-stop(0.6, #2ff), color-stop(0.75, #2ff), color-stop(0.9, #2f2), color-stop(1, #ff2) );
		background-image: gradient( linear, left top, right top, color-stop(0, #ff2), color-stop(0.15, #f22), color-stop(0.3, #f2f), color-stop(0.45, #22f), color-stop(0.6, #2ff),color-stop(0.75, #2ff), color-stop(0.9, #2f2), color-stop(1, #ff2) );
		color: rgba(255, 255, 255, 0);
		-webkit-background-clip: text;
		background-clip: text;
	}
	33% {
		background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #2f2), color-stop(0.15, #ff2), color-stop(0.3, #f22), color-stop(0.45, #f2f), color-stop(0.6, #22f),color-stop(0.75, #22f), color-stop(0.9, #2ff), color-stop(1, #2f2) );
		background-image: gradient( linear, left top, right top, color-stop(0, #2f2), color-stop(0.15, #ff2), color-stop(0.3, #f22), color-stop(0.45, #f2f), color-stop(0.6, #22f),color-stop(0.75, #22f), color-stop(0.9, #2ff), color-stop(1, #2f2) );
		color: rgba(255, 255, 255, 0);
		-webkit-background-clip: text;
		background-clip: text;
	}
	50% {
		background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #2ff), color-stop(0.15, #2f2), color-stop(0.3, #ff2), color-stop(0.45, #f22), color-stop(0.6, #f22),color-stop(0.75, #f2f), color-stop(0.9, #22f), color-stop(1, #2ff) );
		background-image: gradient( linear, left top, right top, color-stop(0, #2ff), color-stop(0.15, #2f2), color-stop(0.3, #ff2), color-stop(0.45, #f22), color-stop(0.6, #f22),color-stop(0.75, #f2f), color-stop(0.9, #22f), color-stop(1, #2ff) );
		color: rgba(255, 255, 255, 0);
		-webkit-background-clip: text;
		background-clip: text;
	}
	66% {
		background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #22f), color-stop(0.15, #2ff), color-stop(0.3, #2f2), color-stop(0.45, #ff2), color-stop(0.6, #ff2),color-stop(0.75, #f22), color-stop(0.9, #f2f), color-stop(1, #22f) );
		background-image: gradient( linear, left top, right top, color-stop(0, #22f), color-stop(0.15, #2ff), color-stop(0.3, #2f2), color-stop(0.45, #ff2), color-stop(0.6, #ff2),color-stop(0.75, #f22), color-stop(0.9, #f2f), color-stop(1, #22f) );
		color: rgba(255, 255, 255, 0);
		-webkit-background-clip: text;
		background-clip: text;
	}
	83% {
		background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f2f), color-stop(0.15, #22f), color-stop(0.3, #2ff), color-stop(0.45, #2f2), color-stop(0.6, #2f2),color-stop(0.75, #ff2), color-stop(0.9, #f22), color-stop(1, #f2f) );
		background-image: gradient( linear, left top, right top, color-stop(0, #f2f), color-stop(0.15, #22f), color-stop(0.3, #2ff), color-stop(0.45, #2f2), color-stop(0.6, #2f2),color-stop(0.75, #ff2), color-stop(0.9, #f22), color-stop(1, #f2f) );
		color: rgba(255, 255, 255, 0);
		-webkit-background-clip: text;
		background-clip: text;
	}
	100% {
		background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
		background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
		color: rgba(255, 255, 255, 0);
		-webkit-background-clip: text;
		background-clip: text;
	}
}
@keyframes birthday_justborder_desktop {
	0% {
		background:
		    /* -webkit-gradient( linear, left top, right top, from(#333), to(#333) ) padding-box, */
		    linear-gradient(var(--darkest_shade) 0 0) padding-box,
		    -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) ) border-box;
		    gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) ) border-box;
		border-color: rgba(255, 255, 255, 0);
	}
	16% {
	    background:
	        linear-gradient(var(--darkest_shade) 0 0) padding-box,
		    -webkit-gradient( linear, left top, right top, color-stop(0, #ff2), color-stop(0.15, #f22), color-stop(0.3, #f2f), color-stop(0.45, #22f), color-stop(0.6, #2ff),color-stop(0.75, #2ff), color-stop(0.9, #2f2), color-stop(1, #ff2) ) border-box;
		    gradient( linear, left top, right top, color-stop(0, #ff2), color-stop(0.15, #f22), color-stop(0.3, #f2f), color-stop(0.45, #22f), color-stop(0.6, #2ff),color-stop(0.75, #2ff), color-stop(0.9, #2f2), color-stop(1, #ff2) ) border-box;
        border-color: rgba(255, 255, 255, 0);
    }
	33% {
	    background:
            linear-gradient(var(--darkest_shade) 0 0) padding-box,
		    -webkit-gradient( linear, left top, right top, color-stop(0, #2f2), color-stop(0.15, #ff2), color-stop(0.3, #f22), color-stop(0.45, #f2f), color-stop(0.6, #22f),color-stop(0.75, #22f), color-stop(0.9, #2ff), color-stop(1, #2f2) ) border-box;
		    gradient( linear, left top, right top, color-stop(0, #2f2), color-stop(0.15, #ff2), color-stop(0.3, #f22), color-stop(0.45, #f2f), color-stop(0.6, #22f),color-stop(0.75, #22f), color-stop(0.9, #2ff), color-stop(1, #2f2) ) border-box;
        border-color: rgba(255, 255, 255, 0);
	}
	50% {
	    background:
            linear-gradient(var(--darkest_shade) 0 0) padding-box,
		    -webkit-gradient( linear, left top, right top, color-stop(0, #2ff), color-stop(0.15, #2f2), color-stop(0.3, #ff2), color-stop(0.45, #f22), color-stop(0.6, #f22),color-stop(0.75, #f2f), color-stop(0.9, #22f), color-stop(1, #2ff) ) border-box;
		    gradient( linear, left top, right top, color-stop(0, #2ff), color-stop(0.15, #2f2), color-stop(0.3, #ff2), color-stop(0.45, #f22), color-stop(0.6, #f22),color-stop(0.75, #f2f), color-stop(0.9, #22f), color-stop(1, #2ff) ) border-box;
        border-color: rgba(255, 255, 255, 0);
	}
	66% {
	    background:
            linear-gradient(var(--darkest_shade) 0 0) padding-box,
		    -webkit-gradient( linear, left top, right top, color-stop(0, #22f), color-stop(0.15, #2ff), color-stop(0.3, #2f2), color-stop(0.45, #ff2), color-stop(0.6, #ff2),color-stop(0.75, #f22), color-stop(0.9, #f2f), color-stop(1, #22f) ) border-box;
		    gradient( linear, left top, right top, color-stop(0, #22f), color-stop(0.15, #2ff), color-stop(0.3, #2f2), color-stop(0.45, #ff2), color-stop(0.6, #ff2),color-stop(0.75, #f22), color-stop(0.9, #f2f), color-stop(1, #22f) ) border-box;
        border-color: rgba(255, 255, 255, 0);
	}
	83% {
	    background:
            linear-gradient(var(--darkest_shade) 0 0) padding-box,
		    -webkit-gradient( linear, left top, right top, color-stop(0, #f2f), color-stop(0.15, #22f), color-stop(0.3, #2ff), color-stop(0.45, #2f2), color-stop(0.6, #2f2),color-stop(0.75, #ff2), color-stop(0.9, #f22), color-stop(1, #f2f) ) border-box;
		    gradient( linear, left top, right top, color-stop(0, #f2f), color-stop(0.15, #22f), color-stop(0.3, #2ff), color-stop(0.45, #2f2), color-stop(0.6, #2f2),color-stop(0.75, #ff2), color-stop(0.9, #f22), color-stop(1, #f2f) ) border-box;
        border-color: rgba(255, 255, 255, 0);
	}
	100% {
	    background:
            linear-gradient(var(--darkest_shade) 0 0) padding-box,
		    -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) ) border-box;
		    gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) ) border-box;
        border-color: rgba(255, 255, 255, 0);
	}
}
@keyframes birthday_justborder_mobile {
	0% {
		background:
		    -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) ) border-box;
		    gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) ) border-box;
	    border-color: transparent;
	    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
	}
	16% {
	    background:
		    -webkit-gradient( linear, left top, right top, color-stop(0, #ff2), color-stop(0.15, #f22), color-stop(0.3, #f2f), color-stop(0.45, #22f), color-stop(0.6, #2ff),color-stop(0.75, #2ff), color-stop(0.9, #2f2), color-stop(1, #ff2) ) border-box;
		    gradient( linear, left top, right top, color-stop(0, #ff2), color-stop(0.15, #f22), color-stop(0.3, #f2f), color-stop(0.45, #22f), color-stop(0.6, #2ff),color-stop(0.75, #2ff), color-stop(0.9, #2f2), color-stop(1, #ff2) ) border-box;
        border-color: transparent;
        mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
    }
	33% {
	    background:
		    -webkit-gradient( linear, left top, right top, color-stop(0, #2f2), color-stop(0.15, #ff2), color-stop(0.3, #f22), color-stop(0.45, #f2f), color-stop(0.6, #22f),color-stop(0.75, #22f), color-stop(0.9, #2ff), color-stop(1, #2f2) ) border-box;
		    gradient( linear, left top, right top, color-stop(0, #2f2), color-stop(0.15, #ff2), color-stop(0.3, #f22), color-stop(0.45, #f2f), color-stop(0.6, #22f),color-stop(0.75, #22f), color-stop(0.9, #2ff), color-stop(1, #2f2) ) border-box;
	    border-color: transparent;
	    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
	}
	50% {
	    background:
		    -webkit-gradient( linear, left top, right top, color-stop(0, #2ff), color-stop(0.15, #2f2), color-stop(0.3, #ff2), color-stop(0.45, #f22), color-stop(0.6, #f22),color-stop(0.75, #f2f), color-stop(0.9, #22f), color-stop(1, #2ff) ) border-box;
		    gradient( linear, left top, right top, color-stop(0, #2ff), color-stop(0.15, #2f2), color-stop(0.3, #ff2), color-stop(0.45, #f22), color-stop(0.6, #f22),color-stop(0.75, #f2f), color-stop(0.9, #22f), color-stop(1, #2ff) ) border-box;
	    border-color: transparent;
	    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
	}
	66% {
	    background:
		    -webkit-gradient( linear, left top, right top, color-stop(0, #22f), color-stop(0.15, #2ff), color-stop(0.3, #2f2), color-stop(0.45, #ff2), color-stop(0.6, #ff2),color-stop(0.75, #f22), color-stop(0.9, #f2f), color-stop(1, #22f) ) border-box;
		    gradient( linear, left top, right top, color-stop(0, #22f), color-stop(0.15, #2ff), color-stop(0.3, #2f2), color-stop(0.45, #ff2), color-stop(0.6, #ff2),color-stop(0.75, #f22), color-stop(0.9, #f2f), color-stop(1, #22f) ) border-box;
	    border-color: transparent;
	    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
	}
	83% {
	    background:
		    -webkit-gradient( linear, left top, right top, color-stop(0, #f2f), color-stop(0.15, #22f), color-stop(0.3, #2ff), color-stop(0.45, #2f2), color-stop(0.6, #2f2),color-stop(0.75, #ff2), color-stop(0.9, #f22), color-stop(1, #f2f) ) border-box;
		    gradient( linear, left top, right top, color-stop(0, #f2f), color-stop(0.15, #22f), color-stop(0.3, #2ff), color-stop(0.45, #2f2), color-stop(0.6, #2f2),color-stop(0.75, #ff2), color-stop(0.9, #f22), color-stop(1, #f2f) ) border-box;
	    border-color: transparent;
	    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
	}
	100% {
	    background:
		    -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) ) border-box;
		    gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) ) border-box;
	    border-color: transparent;
	    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
	}
}
@keyframes birthday_textandstraightenedborder {
	0% {
		background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
		background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
		border-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) ) 1;
		border-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) ) 1;
		color: rgba(255, 255, 255, 0);
		border-color: #f1f1f1;   /* need to have this bc otherwise it will just follow text color, which is transparent in this case, causing the border to not show rainbow */
		-webkit-background-clip: text;
		background-clip: text;
	}
	16% {
		background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #ff2), color-stop(0.15, #f22), color-stop(0.3, #f2f), color-stop(0.45, #22f), color-stop(0.6, #2ff), color-stop(0.75, #2ff), color-stop(0.9, #2f2), color-stop(1, #ff2) );
		background-image: gradient( linear, left top, right top, color-stop(0, #ff2), color-stop(0.15, #f22), color-stop(0.3, #f2f), color-stop(0.45, #22f), color-stop(0.6, #2ff),color-stop(0.75, #2ff), color-stop(0.9, #2f2), color-stop(1, #ff2) );
		border-image: -webkit-gradient( linear, left top, right top, color-stop(0, #ff2), color-stop(0.15, #f22), color-stop(0.3, #f2f), color-stop(0.45, #22f), color-stop(0.6, #2ff), color-stop(0.75, #2ff), color-stop(0.9, #2f2), color-stop(1, #ff2) ) 1;
		border-image: gradient( linear, left top, right top, color-stop(0, #ff2), color-stop(0.15, #f22), color-stop(0.3, #f2f), color-stop(0.45, #22f), color-stop(0.6, #2ff),color-stop(0.75, #2ff), color-stop(0.9, #2f2), color-stop(1, #ff2) ) 1;
		color: rgba(255, 255, 255, 0);
		border-color: #f1f1f1;
		-webkit-background-clip: text;
		background-clip: text;
	}
	33% {
		background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #2f2), color-stop(0.15, #ff2), color-stop(0.3, #f22), color-stop(0.45, #f2f), color-stop(0.6, #22f),color-stop(0.75, #22f), color-stop(0.9, #2ff), color-stop(1, #2f2) );
		background-image: gradient( linear, left top, right top, color-stop(0, #2f2), color-stop(0.15, #ff2), color-stop(0.3, #f22), color-stop(0.45, #f2f), color-stop(0.6, #22f),color-stop(0.75, #22f), color-stop(0.9, #2ff), color-stop(1, #2f2) );
		border-image: -webkit-gradient( linear, left top, right top, color-stop(0, #2f2), color-stop(0.15, #ff2), color-stop(0.3, #f22), color-stop(0.45, #f2f), color-stop(0.6, #22f),color-stop(0.75, #22f), color-stop(0.9, #2ff), color-stop(1, #2f2) ) 1;
		border-image: gradient( linear, left top, right top, color-stop(0, #2f2), color-stop(0.15, #ff2), color-stop(0.3, #f22), color-stop(0.45, #f2f), color-stop(0.6, #22f),color-stop(0.75, #22f), color-stop(0.9, #2ff), color-stop(1, #2f2) ) 1;
		color: rgba(255, 255, 255, 0);
		border-color: #f1f1f1;
		-webkit-background-clip: text;
		background-clip: text;
	}
	50% {
		background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #2ff), color-stop(0.15, #2f2), color-stop(0.3, #ff2), color-stop(0.45, #f22), color-stop(0.6, #f22),color-stop(0.75, #f2f), color-stop(0.9, #22f), color-stop(1, #2ff) );
		background-image: gradient( linear, left top, right top, color-stop(0, #2ff), color-stop(0.15, #2f2), color-stop(0.3, #ff2), color-stop(0.45, #f22), color-stop(0.6, #f22),color-stop(0.75, #f2f), color-stop(0.9, #22f), color-stop(1, #2ff) );
		border-image: -webkit-gradient( linear, left top, right top, color-stop(0, #2ff), color-stop(0.15, #2f2), color-stop(0.3, #ff2), color-stop(0.45, #f22), color-stop(0.6, #f22),color-stop(0.75, #f2f), color-stop(0.9, #22f), color-stop(1, #2ff) ) 1;
		border-image: gradient( linear, left top, right top, color-stop(0, #2ff), color-stop(0.15, #2f2), color-stop(0.3, #ff2), color-stop(0.45, #f22), color-stop(0.6, #f22),color-stop(0.75, #f2f), color-stop(0.9, #22f), color-stop(1, #2ff) ) 1;
		color: rgba(255, 255, 255, 0);
		border-color: #f1f1f1;
		-webkit-background-clip: text;
		background-clip: text;
	}
	66% {
		background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #22f), color-stop(0.15, #2ff), color-stop(0.3, #2f2), color-stop(0.45, #ff2), color-stop(0.6, #ff2),color-stop(0.75, #f22), color-stop(0.9, #f2f), color-stop(1, #22f) );
		background-image: gradient( linear, left top, right top, color-stop(0, #22f), color-stop(0.15, #2ff), color-stop(0.3, #2f2), color-stop(0.45, #ff2), color-stop(0.6, #ff2),color-stop(0.75, #f22), color-stop(0.9, #f2f), color-stop(1, #22f) );
		border-image: -webkit-gradient( linear, left top, right top, color-stop(0, #22f), color-stop(0.15, #2ff), color-stop(0.3, #2f2), color-stop(0.45, #ff2), color-stop(0.6, #ff2),color-stop(0.75, #f22), color-stop(0.9, #f2f), color-stop(1, #22f) ) 1;
		border-image: gradient( linear, left top, right top, color-stop(0, #22f), color-stop(0.15, #2ff), color-stop(0.3, #2f2), color-stop(0.45, #ff2), color-stop(0.6, #ff2),color-stop(0.75, #f22), color-stop(0.9, #f2f), color-stop(1, #22f) ) 1;
		color: rgba(255, 255, 255, 0);
		border-color: #f1f1f1;
		-webkit-background-clip: text;
		background-clip: text;
	}
	83% {
		background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f2f), color-stop(0.15, #22f), color-stop(0.3, #2ff), color-stop(0.45, #2f2), color-stop(0.6, #2f2),color-stop(0.75, #ff2), color-stop(0.9, #f22), color-stop(1, #f2f) );
		background-image: gradient( linear, left top, right top, color-stop(0, #f2f), color-stop(0.15, #22f), color-stop(0.3, #2ff), color-stop(0.45, #2f2), color-stop(0.6, #2f2),color-stop(0.75, #ff2), color-stop(0.9, #f22), color-stop(1, #f2f) );
		border-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f2f), color-stop(0.15, #22f), color-stop(0.3, #2ff), color-stop(0.45, #2f2), color-stop(0.6, #2f2),color-stop(0.75, #ff2), color-stop(0.9, #f22), color-stop(1, #f2f) ) 1;
		border-image: gradient( linear, left top, right top, color-stop(0, #f2f), color-stop(0.15, #22f), color-stop(0.3, #2ff), color-stop(0.45, #2f2), color-stop(0.6, #2f2),color-stop(0.75, #ff2), color-stop(0.9, #f22), color-stop(1, #f2f) ) 1;
		color: rgba(255, 255, 255, 0);
		border-color: #f1f1f1;
		-webkit-background-clip: text;
		background-clip: text;
	}
	100% {
		background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
		background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
		border-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) ) 1;
		border-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) ) 1;
		color: rgba(255, 255, 255, 0);
		border-color: #f1f1f1;
		-webkit-background-clip: text;
		background-clip: text;
	}
}
@keyframes birthday_justborderboxbackground {
	0% {
		background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
		background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
	}
	16% {
		background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #ff2), color-stop(0.15, #f22), color-stop(0.3, #f2f), color-stop(0.45, #22f), color-stop(0.6, #2ff), color-stop(0.75, #2ff), color-stop(0.9, #2f2), color-stop(1, #ff2) );
		background-image: gradient( linear, left top, right top, color-stop(0, #ff2), color-stop(0.15, #f22), color-stop(0.3, #f2f), color-stop(0.45, #22f), color-stop(0.6, #2ff),color-stop(0.75, #2ff), color-stop(0.9, #2f2), color-stop(1, #ff2) );
	}
	33% {
		background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #2f2), color-stop(0.15, #ff2), color-stop(0.3, #f22), color-stop(0.45, #f2f), color-stop(0.6, #22f),color-stop(0.75, #22f), color-stop(0.9, #2ff), color-stop(1, #2f2) );
		background-image: gradient( linear, left top, right top, color-stop(0, #2f2), color-stop(0.15, #ff2), color-stop(0.3, #f22), color-stop(0.45, #f2f), color-stop(0.6, #22f),color-stop(0.75, #22f), color-stop(0.9, #2ff), color-stop(1, #2f2) );
	}
	50% {
		background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #2ff), color-stop(0.15, #2f2), color-stop(0.3, #ff2), color-stop(0.45, #f22), color-stop(0.6, #f22),color-stop(0.75, #f2f), color-stop(0.9, #22f), color-stop(1, #2ff) );
		background-image: gradient( linear, left top, right top, color-stop(0, #2ff), color-stop(0.15, #2f2), color-stop(0.3, #ff2), color-stop(0.45, #f22), color-stop(0.6, #f22),color-stop(0.75, #f2f), color-stop(0.9, #22f), color-stop(1, #2ff) );
	}
	66% {
		background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #22f), color-stop(0.15, #2ff), color-stop(0.3, #2f2), color-stop(0.45, #ff2), color-stop(0.6, #ff2),color-stop(0.75, #f22), color-stop(0.9, #f2f), color-stop(1, #22f) );
		background-image: gradient( linear, left top, right top, color-stop(0, #22f), color-stop(0.15, #2ff), color-stop(0.3, #2f2), color-stop(0.45, #ff2), color-stop(0.6, #ff2),color-stop(0.75, #f22), color-stop(0.9, #f2f), color-stop(1, #22f) );
	}
	83% {
		background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f2f), color-stop(0.15, #22f), color-stop(0.3, #2ff), color-stop(0.45, #2f2), color-stop(0.6, #2f2),color-stop(0.75, #ff2), color-stop(0.9, #f22), color-stop(1, #f2f) );
		background-image: gradient( linear, left top, right top, color-stop(0, #f2f), color-stop(0.15, #22f), color-stop(0.3, #2ff), color-stop(0.45, #2f2), color-stop(0.6, #2f2),color-stop(0.75, #ff2), color-stop(0.9, #f22), color-stop(1, #f2f) );
	}
	100% {
		background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
		background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
	}
}



/* background textures */
[inside_modal="false"] {
    /* archs pattern */
    /* c1 takes up less area (in in^2), c2 takes up more area (in in^2) */
    /* --size: 30px;
    --c1:orange;
    --c2:#333;
    --g:radial-gradient(30% 50% at 30% 100%,#0000 66%,var(--c1) 67% 98%,#0000);

    background:
        var(--g),var(--g) calc(5*var(--size)) calc(3*var(--size)),
        repeating-linear-gradient(90deg,var(--c1) 0 10%,var(--c2) 0 50%);
    background-size: calc(10*var(--size)) calc(6*var(--size));


    /* sideways curved arch pattern */
    /* --c1: #333;
    --c2: grey;
    background:
        radial-gradient(circle at 100% 50%, rgba(255, 255, 255, 0) 20%, var(--c1) 21%, var(--c1) 34%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0)),
        radial-gradient(circle at 0% 50%, rgba(255, 255, 255, 0) 20%, var(--c1) 21%, var(--c1) 34%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0)) 0 -50px;
    background-color: var(--c2);
    background-size:75px 100px; */


    /* swirls pattern */
    /* --size: 70px;
    --c: #333131;
    --_l: #0000 46%,var(--c) 47% 53%,#0000 54%;

    background:
        radial-gradient(100% 100% at 100% 100%,var(--_l)) var(--size) var(--size),
        radial-gradient(100% 100% at 0    0   ,var(--_l)) var(--size) var(--size),
        radial-gradient(100% 100%,#0000 22%,var(--c) 23% 29%, #0000 30% 34%,var(--c) 35% 41%,#0000 42%) #333;
    background-size: calc(var(--size)*2) calc(var(--size)*2); */

    /* a few well-spaced grains */
    /* --size: 1px;
    --g: repeating-conic-gradient(#333 0 25%,#3D3D3D 0 50%) 0/;
    background:
        var(--g) calc(1*var(--size)) calc(7*var(--size)),
        var(--g) calc(2*var(--size)) calc(5*var(--size)),
        var(--g) calc(3*var(--size)) calc(3*var(--size)),
        var(--g) calc(5*var(--size)) calc(2*var(--size)),
        var(--g) calc(7*var(--size)) calc(1*var(--size));
    background-blend-mode: darken; */

    /* background-image: url("../images/tv_static_w_colors.PNG");
    background-color: rgba(241, 241, 241, .95);
    background-blend-mode: lighten;  */
}
#title_and_submit_your_own_and_login, #wallpaper_area_2, #filter_inputs_and_currently_selected_filters, #basebar {
    /* background-image: url("../images/tv_static_w_colors.PNG");
    background-color: rgba(51, 51, 51, .99);
    background-blend-mode: overlay; */
}



/* button press */
#top_button, .form_submit_button {
    border-color: var(--button_3d_border_lighter_color) var(--button_3d_border_darker_color) var(--button_3d_border_darker_color) var(--button_3d_border_lighter_color);
    &[window_within_buttons_clickable_height="true"]:active {
        border-color: var(--button_3d_border_darker_color) var(--button_3d_border_lighter_color) var(--button_3d_border_lighter_color) var(--button_3d_border_darker_color);
    }
}
#bottom_button {
    border-color: var(--button_3d_border_darker_color) var(--button_3d_border_lighter_color) var(--button_3d_border_lighter_color) var(--button_3d_border_darker_color);
    &[window_within_buttons_clickable_height="true"]:active {
        border-color: var(--button_3d_border_lighter_color) var(--button_3d_border_darker_color) var(--button_3d_border_darker_color) var(--button_3d_border_lighter_color);
    }
}
#logout_forms_submit_button {
    border-color: #f1f1f1;
    border-style: none;
    border-radius: 1px;
    padding: 1px;
    margin-top: 2px;
}



[inside_modal="false"] {
    background-color: var(--c_3rd_darkest_shade);
    color: var(--darkest_shade);
}
[inside_modal="true"] {
    background-color: #f1f1f1;
    color: var(--darkest_shade);
}
#playlist_modal_subtitle {
    /* font-family: "Optima"; */
    color: #333;
}
.playlistitem.active {
    background-color: #f1f1f1;
    color: #333;
}
.playlistitem:not(.active) {
    background-color: #c6c6c6;
    color: #333;
    opacity: .35;
}
#playlistitems {
    background-color: #333;
}
.all_text_below_vid span {
    background-color: grey;
    color: #333;
}
.modal a {
    color: blue;
}
.rulebook_quote {
    color: #613b01;
}
[inside_modal="false"] img, #vose_modal_video:not([video_loaded="true"]), #playlist_modal_main_video:not([video_loaded="true"]), .playlistitem_modal_video:not([video_loaded="true"]) {
    background-image: url("../images/tv_static_w_colors.PNG");
}
[video_loaded="true"] {
    background-color: black;
}
.currently_selected_filter {
    background-color: grey;
}
.custom_video_controls, .play_button_svg, .pause_button_svg, .sound_on_button_svg, .sound_off_button_svg, .speed-display, .fullscreen_on_button_svg, .fullscreen_off_button_svg, .speed_dummies_and_speed_slider_container {
    color: black;
    accent-color: black;
    background-color: rgb(186, 186, 186);  /* powder blue rgba(138, 183, 255, .5);  grey rgba(128, 128, 128, .5);  */
}
.vertical_line {
    background-color: black !important;
}
.backward_1_frame_button, .forward_1_frame_button {
    border-color: black;
}
[fullscreen_that_works_on_mobile_too="true"], [fullscreen_that_works_on_mobile_too="true"] video {
    background-color: black;
}
.up_arrow, .down_arrow {
    filter: brightness(0%);
    opacity: .3;
}
* {
    -webkit-tap-highlight-color: transparent;
    scrollbar-color: rgba(0,0,0,.3) #f1f1f1;
}
*::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.3);
}