:root {
    --font1: 'Monaco';
    --font2: Rockwell, "Courier New", Courier, Georgia, Times, "Times New Roman", serif;

    --topbar_height: 90px;
    --topbar_height_and_pad: 100px;
    --topbars_size_fraction_for_under_350px_wide_screens: .47;
    --topbars_size_fraction_for_350px_through_576px_wide_screens: .594;
    --topbars_size_fraction_for_576px_through_767px_wide_screens: .7;

    --scroll_buttons_size_fraction_for_under_350px_wide_screens: .8;
    --scroll_buttons_size_fraction_for_350px_through_576px_wide_screens: .85;
    --scroll_buttons_size_fraction_for_576px_through_767px_wide_screens: .9;

    --results_text_fraction_for_under_350px_wide_screens: .6;
    --results_text_fraction_for_350px_through_576px_wide_screens: .6541;
    --results_text_fraction_for_576px_through_767px_wide_screens: .7;

    --currently_selected_filter_text_fraction_for_under_350px_wide_screens: .8;
    --currently_selected_filter_text_fraction_for_350px_through_576px_wide_screens: .8541;
    --currently_selected_filter_text_fraction_for_576px_through_767px_wide_screens: .9;

    --filter_div_text_fraction_for_under_350px_wide_screens: .8;
    --filter_div_text_fraction_for_350px_through_576px_wide_screens: .8541;
    --filter_div_text_fraction_for_576px_through_767px_wide_screens: .9;

    --entry_text_fraction_for_under_350px_wide_screens: .7;
    --entry_text_fraction_for_350px_through_576px_wide_screens: .8;
    --entry_text_fraction_for_576px_through_767px_wide_screens: .9;

    --playlistitem_video_width_fraction_for_under_350px_wide_screens: .3;
    --playlistitem_video_width_fraction_for_350px_through_576px_wide_screens: .25;
    --playlistitem_video_width_fraction_for_576px_through_767px_wide_screens: .19;
    --playlistitem_video_width_fraction_for_over_767px_wide_screens: .15;

    --custom_video_controls_bar_margins_between_items: 6px;

    --input_range_slider_bars_thickness: 10px;
    --input_range_slider_thumbs_thickness: 25px;
}

* {
    text-decoration: none;
    font-family: var(--font1);
    margin: 0;   /* body has default margin that I want to remove */
    padding: 0;
    padding-block: 0;
    padding-inline: 0;
    margin-block: 0;
    margin-inline: 0;
}

#basebar, #title_and_submit_your_own_and_login {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    width: 100vw;
    padding-left: calc(.01*100vw);
    padding-right: calc(.01*100vw);
    &#basebar {
        padding-top: 5px;
        padding-bottom: 5px;
    }
}

#input_names, #input_filter_type_2s, #input_filter_type_3s, textarea {
    text-indent: 5px;
}

input, textarea {
    &:focus, &:focus-visible {
        outline: none;
    }
}

label, input[type="text"] {
    white-space: pre;     /* whitespace preserved, wrap only on <br> tags> */
}

label {
    text-align: center;
}

[show="false"] {     /* used by filter_inputs and by modals */
      display: none !important;
      transform: scale(0) !important;
}

[slider_show="false"] {
    visibility: hidden;
    pointer-events: none;
}

.col .playlistitems, #currently_selected_filters {      /* used by both currently selected filters and by entries */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: safe center;
    overflow: auto;
    scrollbar-width: none;
    &::-webkit-scrollbar {
        display: none;
    }
    &.playlistitems {
        justify-content: start;
    }
}

.vose, .playlist {     /* can't use display: flex bc then titles extend horizontally to edges of container and consequently hover recognized to the right of the text */
    padding: calc(.01*100vw);
    box-sizing: border-box;
    margin: auto;   /* aligns horizontally within parent */
    border-radius: 10px;
    &[inside_modal="false"] {
        width: 98vw;
        margin-bottom: 1.3vw;
    }
}

.vose_pk_and_name, .playlist_pk_and_name {
    position: relative;
    z-index: 80;
}

#top_button, #bottom_button, .form_submit_button {
    display: flex;   /* prevents default padding */
    border-style: solid;
    border-width: 3px;
    &.form_submit_button {
        padding: 2px;
    }
}
/*   end of common base */