:root {
    /* --backgroundDark: #eeeeee;
    --secondaryDark: #f1f1f1;
    --tertiaryDark: #e9e9e9; */

    --backgroundDark: #0e0e0e;
    --secondaryDark: #242424;
    --tertiaryDark: #2e2e2e;

    --highlightLight: #F2E205;

    --colorBlue: #3e98e7;
    --colorLightBlue: #63F2F2;
    --colorGreen: #A0F266;
    /* --colorOrange: #F2B05E; */
    --colorOrange: #f5e463;
    --colorRed: #F28585;
    --colorPink: #e87be4;

    --textPrimaryDark: #ffffff;
    --textSecondaryDark: #c4c4c4;
    --textTertiaryDark: #9f9f9f;

    /* --textPrimaryDark: #383838;
    --textSecondaryDark: #515151;
    --textTertiaryDark: #787878; */

    --borderDark: rgba(100,100,100,0.2);
    /* --borderDark: rgba(0,0,0,0.2); */

    --shadow: rgba(255, 255, 255, 0.1);
}

p {
    color: var(--textPrimaryDark);
}
.bgcolor-bg {
    /* background-color: var(--backgroundDark); */
    /* background-image: linear-gradient(165deg, #a4ddff 0, #5389f2 50%, #093d77 100%); */
    background-color: #050505;
    /* background-image: linear-gradient(0deg, rgb(33,33,33) 30%,transparent 120%),repeating-linear-gradient(180deg, rgba(255,255,255, 0.05) 0px, rgba(255,255,255, 0.05) 1px,transparent 1px, transparent 28px),repeating-linear-gradient(90deg, rgba(255,255,255, 0.05) 0px, rgba(255,255,255, 0.05) 1px,transparent 1px, transparent 28px),linear-gradient(90deg, rgb(33,33,33),rgb(33,33,33)); */
}
.bgcolor-bg-1 {
    background-color: #050505;
    background-image: linear-gradient(to top, #140018 0%, #050505 100%);
    /* background-color: #eeeeee; */

}
.bgcolor-secondary {
    /* background-color: var(--secondaryDark); */
    /* background-color: rgba(255, 255, 255, 0.4); */
    background-color: rgba(0, 0, 0, 0.8);
}
.bgcolor-tertiary {
    background-color: rgba(100, 100, 100, 0.2);
    border: solid 1px rgba(255, 255, 255, 0.05);
    /* -webkit-backdrop-filter: blur(60px);
    backdrop-filter: blur(60px); */
}
.bgcolor-tertiary-2 {
    background-color: rgba(255, 255, 255, 0.12);
    border: solid 1px rgba(255, 255, 255, 0.07);
    /* -webkit-backdrop-filter: blur(60px);
    backdrop-filter: blur(60px); */
}
.bgcolor-header {
    background-color: rgba(8, 8, 8, 0.4);
        border: solid 1px rgba(0, 0, 0, 0.1);
    /* background-color: rgba(23, 14, 26, 0.75); */
    /* background-image: linear-gradient(-5deg, rgb(44,44,44),rgb(80, 80, 80)); */

    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.bgcolor-button {
    /* background-color: var(--secondaryDark); */
    background-color: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
}
.bgcolor-button:hover {
    background-color: rgba(255, 255, 255, 0.14);
}


.bgcolor-blue {
    background-color: var(--colorBlue);
}
.bgcolor-light-blue {
    background-color: var(--colorLightBlue);
}
.bgcolor-green {
    background-color: var(--colorGreen);
}
.bgcolor-orange {
    background-color: var(--colorOrange);
}
.bgcolor-red {
    background-color: var(--colorRed);
}

.bcolor-secondary {
    /* border: 1px solid var(--borderDark); */
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* border-style: outset; */
    /* border: none; */
}
.bcolor-tertiary {
    border: solid 1px rgba(255, 255, 255, 0.1);
    /* border: none; */
}
.bcolor-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.text-color-bg {
    color: var(--backgroundDark);
}
.text-color-primary {
    color: var(--textPrimaryDark);
}
.text-color-secondary {
    color: var(--textSecondaryDark);
}
.text-color-tertiary {
    color: var(--textTertiaryDark);
}
.text-color-blue {
    color: var(--colorBlue);
}
.text-color-light-blue {
    color: var(--colorLightBlue);
}
.text-color-green {
    color: var(--colorGreen);
}
.text-color-orange {
    color: var(--colorOrange);
}
.text-color-red {
    color: var(--colorRed);
}
.text-color-pink {
    color: var(--colorPink);
}

.border-medium-highlight {
    border: 2px solid var(--highlightLight);
}

.shadow-big {
    box-shadow: 0px 10px 28px var(--shadow);
}
.shadow-medium {
    /* box-shadow: 0px 5px 8px var(--shadow); */
}
.shadow-small {
    box-shadow: 0px 2px 10px var(--shadow);
}

.icon-filter-white {
    filter: invert(100%);
    opacity: 90%;
}
.icon-filter-orange {
    filter: invert(60%) sepia(100%) saturate(1000%) hue-rotate(340deg) brightness(102%) contrast(101%) opacity(90%);
}
.icon-filter-yellow {
    filter: invert(80%) sepia(100%) saturate(200%) hue-rotate(366deg) brightness(102%) contrast(101%) opacity(90%);
}
.icon-filter-blue {
    filter: invert(70%) sepia(100%) saturate(250%) hue-rotate(170deg) brightness(102%) contrast(101%) opacity(90%);
}
.icon-filter-green {
    filter: invert(75%) sepia(100%) saturate(250%) hue-rotate(30deg) brightness(102%) contrast(101%) opacity(90%);
}
.icon-filter-red {
    filter: invert(70%) sepia(100%) saturate(500%) hue-rotate(280deg) brightness(102%) contrast(101%) opacity(90%);
}
.icon-filter-pink {
    filter: invert(60%) sepia(100%) saturate(250%) hue-rotate(230deg) brightness(102%) contrast(101%) opacity(90%);
}
.card-extra img {
    filter: invert(100%) opacity(60%) !important;
}