@font-face {
    font-family: "Uni Sans Heavy";
    src: url("../fonts/UniSansHeavyRegular.woff") format("woff"), url("~fonts/UniSansHeavyRegular.woff2") format("woff2");
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/roboto-regular.woff") format("woff"), url("~fonts/roboto-regular.woff2") format("woff2");
}


:root {
    /**
    * Colors
    */
    --background-color: #0b141a;
    --background-color-light: #121e26;
    --background-color-tab: #1b2f3c;
    --primary-color: #6fffe5;
    --defeat-color: #ff5271;
    --defeat-color-dark: #de4560;
    --victory-color: #00d6b0;
    --victory-color-dark: #20b69b;
    --white: #fff;
    --unselected-color: #2F4858;
    /**
    * Padding
    */
    --app-base-padding: 0 8vw;
    --app-stats-padding: 0 3vw;
    /**
    * Font-family
    */
    --main-font-family: "Uni Sans Heavy";
    --secondary-font-family: "Roboto";
}

::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    border-radius: 10px;
    border: 1px solid #313f49;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #313f49;
    border-radius: 10px;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #223849;
    }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: "Roboto", sans-serif;
}

body {
    background-color: var(--background-color);
    color: white;
}

#blazor-error-ui {
    display: none;
}

a,
a:hover,
a:focus,
a::selection {
    outline: none;
}

.color-primary {
    color: var(--primary-color);
}

h1, h2, h3 {
    text-transform: uppercase;
    user-select: none;
    font-family: var(--main-font-family);
}

.main-font {
    font-family: var(--main-font-family);
}

.secondary-font {
    font-family: var(--secondary-font-family);
}

.border-radius-left {
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.border-radius-right {
    border-bottom-left-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
}

.highlight {
    color: var(--primary-color);
}