:root
{
    /* Gradient between base-00 and base-05 */
    --color-base-00: rgb(0, 0, 0);
    --color-base-01: rgb(12, 12, 23);
    --color-base-02: rgb(24, 24, 44);
    --color-base-03: rgb(36, 36, 65);
    --color-base-04: rgb(48, 48, 76);
    --color-base-05: rgb(59, 60, 87);
    --color-base-06: rgb(59, 60, 87);
    --color-base-07: rgb(102, 93, 119);
    --color-base-08: rgb(146, 126, 153);
    --color-base-09: rgb(190, 177, 172);
    --color-base-10: rgb(234, 228, 191);

    --color-primary-00: rgb(229, 21, 119);
    --color-primary-01: rgb(170, 20, 90);
    --color-primary-02: rgb(70, 8, 37);

    --color-secondary-00: rgb(2, 200, 237);
    --color-secondary-01: rgb(3, 134, 158);
    --color-secondary-02: rgb(3, 68, 80);

    --color-highlight-0 : rgb(207, 190, 0);

    --color-accent-0 : rgb(0, 255, 0);
}

@font-face 
{
    font-family: 'Font_TDC';
    src: url('../resources/Rushfordclean-rgz89.otf') format('opentype');
    font-display: swap; /* Ensures text is displayed immediately */
    ascent-override: 60%; /* Adjusts the ascent to reduce extra space */
    descent-override: 0%; /* Adjusts the descent to reduce extra space */
    line-gap-override: 0%; /* Removes additional line gap */
}

body
{
    background-color: var(--color-base-02);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--color-base-10);

    /* Hide scrollbars across browsers */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

    
/* Hide scrollbars for WebKit-based browsers */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar 
{
    display: none;
}

.main
{
    padding-top: 8vh;
}

a
{
    color: var(--color-base-08);    
}

a:hover
{
    color: var(--color-secondary-00);
    text-decoration: none;
}

.page-title
{
    font-family: 'Font_TDC';
    text-align: center;
    margin: 1.2em;
    font-size: 2em;
}

.card
{
    background-color: var(--color-base-03);
    margin: 1rem;
    border: none;
    box-shadow: 0px 0px 16px 4px var(--color-base-00);
    color: var(--color-base-09);
    padding: 1rem;
}

.card-body
{
    padding: 0rem;
}

.form-label
{
    padding: 1rem 2rem;
    color: var(--color-base-09);
}

.form-control
{
    background-color: transparent;
    color: var(--color-base-10) !important;
    border: none;
    padding: 2rem;
    box-shadow:  0px 0px 4px 0px var(--color-base-10);
}

.form-control:hover
{
    border: none;
    background-color: transparent;
    box-shadow:  0px 0px 8px 2px var(--color-base-10);
    color: var(--color-base-10) !important;
}

.form-control:focus
{
    border: none;
    background-color: transparent;
    outline: none !important;
    box-shadow:  0px 0px 8px 2px var(--color-primary-00);
}

.form-control::placeholder
{
    color: var(--color-base-08) !important;
}

.form-check-input
{
    margin: 0.5rem 0rem;
    width: 2rem;
    height: 2rem;
    background-color: transparent;
    border: none;
    box-shadow:  0px 0px 4px 0px var(--color-base-10);
}

.form-check-input-small
{
    width: 1rem;
    height: 1rem;
    margin: 0rem;
    padding: 0rem;
}

.form-check-input:hover
{
    border: none;
    background-color: transparent;
    box-shadow:  0px 0px 8px 2px var(--color-base-10);    
}

.form-check-input:checked
{
    border: none;
    background-color: var(--color-primary-00);
    box-shadow:  0px 0px 8px 2px var(--color-primary-00);    
}

.btn-standard
{
    background-color: var(--color-primary-00);
    color: var(--color-base-10);
    border: none;
    padding: 1rem 2rem;
    border-radius: 4rem;
    box-shadow: 0px 0px 4px 0px var(--color-base-10);
    font-size: 1em;
    margin: 1rem;
}

.btn-standard:hover
{
    background-color: var(--color-base-10);
    box-shadow: 0px 0px 8px 2px var(--color-base-00);
    color: var(--color-base-00);
    cursor: pointer;
}

.btn-standard:focus
{
    box-shadow: 0px 0px 8px 2px var(--color-base-10);
    background-color: var(--color-base-10);
    color: var(--color-base-00);
    outline: none;
}

.btn-tool
{
    background-color: transparent;
}

.btn-warning
{
    background-color: var(--color-base-00);
}

.btn-warning:hover
{
    background-color: var(--color-base-02);
    color: var(--color-secondary-00);
}

.tag
{
    background-color: var(--color-base-02);
    margin: 0.5rem;
    padding: 0.25rem 0.25rem;
    border-radius: 0.5rem;
}

table
{
    margin: 1rem 0rem;
    width: 100%;
}

:disabled
{
    background-color: var(--color-base-02) !important;
    color: var(--color-base-05) !important;
}