@font-face {
    font-family: 'abel';
    src: url('/core/fonts/abel.ttf');
}

@font-face {
    font-family: 'ecran';
    src: url('/core/fonts/ecran.ttf');
}

@font-face {
    font-family: 'monofur';
    src: url('/core/fonts/monofur.ttf');
}

@font-face {
    font-family: 'montserrat';
    src: url('/core/fonts/montserrat.ttf');
}

@font-face {
    font-family: 'opensans';
    src: url('/core/fonts/opensans.ttf');
}

@font-face {
    font-family: 'overpass';
    src: url('/core/fonts/overpass.ttf');
}

@font-face {
    font-family: 'sharetech-mono';
    src: url('/core/fonts/sharetech-mono.ttf');
}

@font-face {
    font-family: 'sourcecodepro';
    src: url('/core/fonts/sourcecodepro.ttf');
}

@font-face {
    font-family: 'synemono';
    src: url('/core/fonts/synemono.ttf');
}

@font-face {
    font-family: 'ubuntu';
    src: url('/core/fonts/ubuntu.ttf');
}

@font-face {
    font-family: 'ubuntumono';
    src: url('/core/fonts/ubuntumono.ttf');
}


:root {
    
    /* definitions */
    --color-black: rgb(0, 0, 0);
    --color-black-hover: rgb(20, 20, 20);
    --color-black-highlight: rgba(0, 0, 0, 0.15);
    --color-grey: rgb(120, 120, 120);
    --color-grey-hover: rgb(140, 140, 140);
    --color-grey-highlight: rgba(120, 120, 120, 0.15);
    --color-white: rgb(255, 255, 255);
    --color-white-hover: rgb(235, 235, 235);
    --color-white-highlight: rgba(255, 255, 255, 0.15);

    --color-red: rgb(180, 0, 0);
    --color-red-hover: rgb(200, 0, 0);
    --color-red-highlight: rgba(180, 0, 0, 0.15);
    --color-green: rgb(0, 180, 0);
    --color-green-hover: rgb(0, 200, 0);
    --color-green-highlight: rgba(0, 180, 0, 0.15);
    --color-blue: rgb(0, 0, 180);
    --color-blue-hover: rgb(0, 0, 200);
    --color-blue-highlight: rgba(0, 0, 180, 0.15);
    --color-yellow: rgb(180, 180, 0);
    --color-yellow-hover: rgb(200, 200, 0);
    --color-yellow-highlight: rgba(180, 180, 0, 0.15);
    --color-orange: rgb(200, 100, 0);
    --color-orange-hover: rgb(220, 100, 0);
    --color-orange-highlight: rgba(200, 100, 0, 0.15);
    
    --color-dark: rgb(20, 20, 20);
    --color-dark-hover: rgb(30, 30, 30);
    --color-dark-highlight: rgba(20, 20, 20, 0.15);
    --color-light: rgb(240, 240, 240);
    --color-light-hover: rgb(220, 220, 220);
    --color-light-highlight: rgba(240, 240, 240, 0.15);
    
    --color-rocinante: rgb(200, 60, 0);
    --color-rocinante-hover: rgb(220, 60, 0);
    --color-rocinante-highlight: rgba(200, 100, 0, 0.15);
    
    /* core elements - all pages */
    --background-color: var(--color-black);
    
    /*--font-style: synemono;*/
    /*--font-style-mono: synemono;*/
    --font-style: ubuntu;
    --font-style-mono: monospace;
    --font-color-dark: var(--color-dark);
    --font-color-light: rgb(150, 150, 150);
    --font-color: var(--font-color-light);
    --font-size: 0.8vw;
    
    --scrollbar-width: 5px;
    --scrollbar-height: 0px;
    --scrollbar-color: var(--color-grey);
    --scrollbar-background: var(--background-color);
    
    --input-radius: 5px;
    
    --border-style: solid;
    --border-width: 1px;
    --border-color: var(--color-grey);
    
    --table-border-style: solid;
    --table-border-width: 1px;
    --table-border-color: var(--color-grey);
    --table-row-highlight: var(--color-rocinante-highlight);
    --table-row-light: var(--color-dark-hover);

    --nav-width: 50px;
    --nav-radius: 25px;
    --nav-icon-width: 50px;
    --nav-font-size: 0.8vw;
    --nav-font-family: synemono;
    --nav-background: var(--color-rocinante);
    --nav-background-hover: var(--color-rocinante-hover);
    --nav-color: var(--color-light-hover);
    
    --mask-width: 100%;
    --mask-height: 100%;
    --mask-top: 0;
    --mask-left: 0;
    --mask-z: 100;
    --mask-color: rgba(0, 0, 0, 0.9);
    
    --spinner-width: 5px;
    --spinner-style: solid;
    --spinner-color-background: var(--color-dark);
    --spinner-color-foreground: var(--color-green);
    
    --progress-radius: 5px;
    --progress-color-background: transparent;
    --progress-color-foreground: var(--color-green);
    
    --message-width: 500px;
    --message-height: 75px;
    --message-z: 100;
    --message-padding: 10px;
    --message-background: var(--color-black);
    --message-border-radius: 5px;
    --message-border-style: var(--border-style);
    --message-border-color: var(--color-rocinante);
    --message-border-width: var(--border-width);
    
    --window-head-height: 30px;
    --window-foot-height: 10px;
    --window-z: 100;
    --window-padding: 10px;
    --window-background: var(--color-black);
    --window-border-radius: 5px;
    --window-border-style: var(--border-style);
    --window-border-color: var(--color-rocinante);
    --window-border-width: var(--border-width);
    
    /* core elements - minidlna */
    --minidlna-margin: 10px;
    
    --minidlna-head-height: 50px;
    
    --minidlna-head-width-left: calc( 60% - ( 2* var(--minidlna-margin) ) - ( 2 * var(--border-width) ) );
    --minidlna-head-width-right: calc( 40% - var(--minidlna-margin) - ( 2 * var(--border-width) ) );
    
    --minidlna-body-width: calc( 100% - ( 2 * var(--minidlna-margin) ) );
    --minidlna-body-height: calc( 100% - var(--minidlna-head-height) - ( 3 * var(--minidlna-margin) ) - ( 2 * var(--border-width) ) );
    
    --minidlna-row-height: 50px;
    
    --minidlna-border-style: var(--border-style);
    --minidlna-border-color: var(--color-rocinante);
    --minidlna-border-width: var(--border-width);
    
    --minidlna-input-color: var(--font-color-light);
    --minidlna-input-background: var(--color-dark);
    --minidlna-input-radius: 0px;
    --minidlna-input-font: var(--font-style);
    --minidlna-input-size: 0.8vw;
    
    --movie-upload-margin: 10px;
    --movie-upload-height: calc( ( 100% - ( 5 * var(--movie-upload-margin) ) ) / 6 );
}