:root {
    /* Colors */
    --color-accent: #2B7FFF;
    --color-primary: #0B0B0B;
    --color-secondary: #171717;
    --color-third: #212121;
    --color-contrast: #FFFFFF;
    --color-font: #FFFFFF;
    --color-danger: #FF0000;
    --color-outline: #4646464D;

    /* Radius */
    --radius: var(--spacing-4);
    --radius-logo: var(--spacing-50);

    /* Shadows */
    --shadow-xxl: 0 0 var(--spacing-8) var(--color-accent);
    --shadow-lg: 0 0 var(--spacing-4) var(--color-accent);

    /* Fonts */
    --font-type: Inter;
    --font-header: var(--spacing-24);
    --font-large: var(--spacing-16);
    --font-normal: var(--spacing-14);
    --font-small: var(--spacing-12);
    --font-bold: 700;
    --font-weight-normal: 500;
    --transition-ease: var(--transition-timer) ease-in-out;
    --transition-timer: 0.1s;

    /* Opacity */
    --opacity-min: 0;
    --opacity-medium: 0.5;
    --opacity-high: 0.75;
    --opacity-max: 1;

    /* Spacing */
    --spacing-1: 0.063rem; /* 1px */
    --spacing-2: 0.125rem; /* 2px */
    --spacing-3: 0.188rem; /* 3px */
    --spacing-4: 0.25rem; /* 4px */
    --spacing-5: 0.3125rem; /* 5px */
    --spacing-7: 0.438rem; /* 7px */
    --spacing-8: 0.5rem; /* 8px */
    --spacing-10: 0.625rem; /* 10px */
    --spacing-12: 0.75rem; /* 12px */
    --spacing-14: 0.875rem; /* 14px */
    --spacing-15: 0.9375rem; /* 15px */
    --spacing-16: 1rem; /* 16px */
    --spacing-20: 1.25rem; /* 20px */
    --spacing-22: 1.375rem; /* 22px */
    --spacing-24: 1.5rem; /* 24px */
    --spacing-25: 1.563rem; /* 25px */
    --spacing-30: 1.875rem; /* 30px */
    --spacing-32: 2rem; /* 32px */
    --spacing-35: 2.188rem; /* 35px */
    --spacing-40: 2.5rem; /* 40px */
    --spacing-50: 3.125rem; /* 50px */
    --spacing-60: 3.75rem; /* 60px */
    --spacing-80: 5rem; /* 80px */
    --spacing-90: 5.625rem; /* 90px */
    --spacing-100: 6.25rem; /* 100px */
    --spacing-110: 6.875rem; /* 110px */
    --spacing-120: 7.5rem; /* 120px */
    --spacing-150: 9.375rem; /* 150px */
    --spacing-170: 10.625rem; /* 170px */
    --spacing-180: 11.25rem; /* 180px */
    --spacing-190: 11.875rem; /* 190px */
    --spacing-200: 12.5rem; /* 200px */
    --spacing-210: 13.125rem; /* 210px */
    --spacing-250: 15.625rem; /* 250px */
    --spacing-270: 16.875rem; /* 270px */
    --spacing-290: 18.125rem; /* 290px */
    --spacing-400: 25rem; /* 400px */
    --spacing-450: 28.125rem; /* 400px */
    --spacing-500: 31.25rem; /* 500px */
    --spacing-740: 46.25rem; /* 740px */
}

/* Global Style */
* {
    box-sizing: border-box;
    padding: 0;
    border-width: 0;
    margin: 0;
    font-family: var(--font-type), serif;
}

* :focus-visible {
    outline: none;
    box-shadow: none;
}

/* Body Style */

body {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-10);
    height: 100dvh;
    background-color: var(--color-primary);
    color: var(--color-font);
    font-size: var(--font-normal);
    user-select: none;
}

/* Link Style */

a {
    text-decoration: none;
    color: var(--color-font);
}

/* Buttons, Input, Text, Span */
input, span, button, #text {
    font-size: var(--font-normal);
    color: var(--color-font);
}

/* todo rename to disabled */
.gray {
    filter: opacity(0.5);
    cursor: default;
    pointer-events: none;
}

.disabled {
    filter: opacity(0.5);
    cursor: default;
    pointer-events: none;
}

/* Remove arrow up/down from input fields */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Scrollbar Style*/
::-webkit-scrollbar {
    width: var(--spacing-4);
    height: var(--spacing-4);
}

::-webkit-scrollbar-track {
    background-color: var(--color-secondary);
}

::-webkit-scrollbar-corner {
    display: none;
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-accent);
}

/* Content area (Sidebar + Config) */
.content {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    /*overflow-y: hidden; Breaks big tooltips if enabled*/
    padding: var(--spacing-10);
}

.configArea {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin-left: var(--spacing-20);
    gap: var(--spacing-20);
    /*overflow: auto; Breaks big tooltips if enabled */
}

/* Need to be here otherwise H2 on settings won't works */

.child > h2 {
    font-size: var(--font-normal);
    font-weight: var(--font-weight-normal);
    padding-bottom: var(--spacing-12);
    text-transform: uppercase;
    border-bottom: var(--spacing-1) solid var(--color-accent);
}

/* License/Settings page */
.no-sidebar {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-10);
    gap: var(--spacing-20);
}

.flex-space-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-10);
}

/* Small screens */
@media only screen and (max-width: 1000px) {
    .no-sidebar {
        overflow: auto;
        overflow-x: hidden; /* Remove scroll on Settings */
    }

    .content {
        flex-direction: column;
        overflow: auto;
        padding: 0;
        margin-top: var(--spacing-10);
    }

    .configArea {
        margin-left: 0;
        gap: 0;
        overflow: auto;
    }
}