/* GLOBAL CSS*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    text-shadow: 2px 2px 2px #0000007d;
}

:root{

    /*Colors*/
    --navbar-color: #c92949;
    --body-color: #e2ddb1;
    --sidebar-color: #d14964;
    --user-color: #d5ca6b;
    --title-color: #cfb71b;
    --subtitle-color: #ba9d24;
    --float-color: #af9422;
    --bottom-color: #af9422;
    --mode-color: #00000063;
    --icon-color: #debb29;
    --select-color: #b1962366;
    --select-text-color: #fff9d5;
    --content-color: #651323e8;
    --content-header-color: #c6aa0ad1;
    --scrollcontent-color: #cfb71b;
    --scrollremaining-color: #898245;
    --primary-color: #ffffff;

    /*Transitions*/
    --tran-03: all 0.3s ease;
    --tran-04: all 0.4s ease;
    --tran-05: all 0.5s ease;

    /*Dimmenstion*/
    --size-max: 100%;

    /*Allignement*/
    --align-center: center;

    /*Display*/
    --display-flex: flex;

    /*Position*/
    --pos-fixed: fixed;

    /*Cursor*/
    --cursor-pointer: pointer;

    /*Theme */

    --theme-login: url(../img/background-light-menutop.jfif);

    --theme-navbar: linear-gradient(270deg, #50217187 0%, #9e272121 15%), url(../img/background-topbar-ecarlate.jfif);
    --theme-navbar-filter: drop-shadow(2px 4px 5px #d2be13);
    --theme-navbar-shadow: 0px 0px 0px 5px #d2be13, inset 0px 10px 27px -8px #141414, inset 0px -10px 27px -8px #a31925, -23px 39px 15px -15px rgb(255 175 94 / 0%);
    --theme-select-shadow: inset 0 0 20px #d3bb28;

    --theme-background: url(../img/background-ecarlate.jfif);
    --theme-title-bar: drop-shadow(4px 5px 3px #483c07f0);
    --theme-title-background: linear-gradient(270deg, #cfb71b 0%, #cfb70ae3 75%) , url(../img/banner-gold.jfif);
    --theme-title-shadow: inset 50px 0px 39px -25px rgb(255 209 0 / 37%);
    --theme-subtitle-background: linear-gradient(270deg, #b99c24 0%, #c9b42382 75%) , linear-gradient(90deg, #b28e26ad 0%, rgb(187 158 37 / 0%) 75%) , url(../img/sub-banner-gold.jfif);


    --theme-sidebar: linear-gradient(320deg, #5021718c 0%, #9e272121 75%) , linear-gradient(360deg, #50217100 0%, #0000004d 15%) ,url(../img/background-sidebar-ecarlate.jfif);
    --theme-sidebar-filter: drop-shadow(2px 4px 5px #d2be13);
    --theme-sidebar-shadow: 0px 0px 0px 5px #d2be13, inset 0px 10px 27px -8px #141414, inset 0px -10px 27px -8px #bfa524, -23px 39px 15px -15px rgb(255 175 94 / 0%);

    --theme-loader-background: radial-gradient(circle at center center, #b12739, #b12739), repeating-radial-gradient(circle at center center, #b12739, #b12739, 25px, transparent 50px, transparent 25px);
    --theme-loader-color: #b12739;
    --theme-loader-pokeball: #fe0001;

    --theme-content-shadow: 0px 0px 0px 5px #d2be13, inset 0px 10px 27px -8px #141414, inset 0px -10px 27px -8px #a31925, -23px 39px 15px -15px rgb(255 175 94 / 0%);
    --theme-content-header-shadow: 0px 0px 0px 5px #d2be13, inset 0px 10px 27px -8px #141414, inset 0px -10px 27px -8px #a31925, -23px 39px 15px -15px rgb(255 175 94 / 0%);
}

:root .dark{
    --navbar-color: #3a2435;
    --body-color: #29222a;
    --sidebar-color: #352035;
    --user-color: #1d171d;
    --title-color: #19191c;
    --subtitle-color: #5a5a5a;
    --float-color: #160f16;
    --bottom-color: #1b131a;
    --mode-color: #00000063;
    --icon-color: #b093e0;
    --select-color: #3a3a3a59;
    --select-text-color: #eadaff;
    --content-color: #4f114dde;
    --content-header-color: #262627e0;
    --scrollcontent-color: #383838;
    --scrollremaining-color: #5c5c5c;
    --primary-color: #cdc5cb;

    --theme-login: url(../img/background-dark-menutop.jfif);

    --theme-navbar: linear-gradient(270deg, rgba(158, 39, 33, 0.61) 0%, rgba(0, 0, 0, 0.23) 15%), url(../img/background-topbar-violet.jfif);
    --theme-navbar-filter: drop-shadow(black 2px 4px 5px);
    --theme-navbar-shadow: rgb(56, 56, 56) 0px 0px 0px 5px, rgb(0, 0, 0) 0px 10px 27px -8px inset, rgba(0, 0, 0, 0.66) 0px -10px 27px -8px inset, rgba(255, 175, 94, 0) -23px 39px 15px -15px;
    --theme-select-shadow: inset 0 0 20px #918888cc;

    --theme-background: url(../img/background-violet.jfif);

    --theme-title-bar: drop-shadow(4px 5px 3px black);
    --theme-title-background: linear-gradient(270deg, rgb(25, 25, 28) 0%, rgba(56, 56, 56, 0.85) 75%), url(../img/banner-onyx.jfif);
    --theme-title-shadow: rgb(26, 26, 26) 50px 0px 39px -25px inset;
    --theme-subtitle-background: linear-gradient(270deg, rgb(92, 92, 92) 0%, rgba(88, 30, 30, 0) 75%), linear-gradient(90deg, rgb(92, 92, 92) 0%, rgba(149, 128, 41, 0) 75%), url(../img/sub-banner-onyx.jfif);
    /*--theme-subtitle-shadow: rgb(26, 26, 26) 50px 0px 39px -25px inset;*/

    --theme-sidebar: linear-gradient(320deg, rgba(80, 33, 113, 0.79) 0%, rgba(0, 0, 0, 0.3) 75%), linear-gradient(360deg, rgba(80, 33, 113, 0) 0%, rgba(158, 39, 33, 0.13) 15%), url(../img/background-sidebar-violet.jfif);
    --theme-sidebar-filter: drop-shadow(black 2px 4px 5px);
    --theme-sidebar-shadow: rgb(56, 56, 56) 0px 0px 0px 5px, rgb(20, 20, 20) 0px 10px 27px -8px inset, rgb(17, 17, 17) 0px -10px 27px -8px inset, rgba(255, 175, 94, 0) -23px 39px 15px -15px;

    --theme-loader-background: radial-gradient(circle at center center, #8a168e, #8a168e), repeating-radial-gradient(circle at center center, #8a168e, #8a168e, 25px, transparent 50px, transparent 25px);
    --theme-loader-color: #8a168e;
    --theme-loader-pokeball: #6c639c;

    --theme-content-shadow: 0px 0px 0px 5px #383838, inset 0px 10px 27px -8px #141414, inset 0px -10px 27px -8px #2e2e2e, -23px 39px 15px -15px rgb(255 175 94 / 0%);
    --theme-content-header-shadow: 0px 0px 0px 5px #5a5a5a, inset 0px 10px 27px -8px #141414, inset 0px -10px 27px -8px #852f8c, -23px 39px 15px -15px rgb(255 175 94 / 0%);

}

html ::-webkit-scrollbar {
    width: 5px;
}

html ::-webkit-scrollbar-thumb {
    background-color: var(--scrollcontent-color);
    border-radius: 0px;
    border: 0px none #000000;
    transition: var(--tran-03);
}

html ::-webkit-scrollbar-track {
    background: var(--scrollremaining-color);
    transition: var(--tran-03);
}