:root.light {
    --background-color: rgb(255, 255, 255);
    --background-color-R: 255;
    --background-color-G: 255;
    --background-color-B: 255;
    --background-color-transparent: rgb(255, 255, 255, 0.25);
    --main-color: rgb(145, 145, 145);
    --main-color-transparent: rgba(215, 215, 230, 0.5);
    --text-color: rgb(30, 30, 30);
    --link-color: rgb(80, 80, 80);
    --second-default: rgba(0, 0, 0, 0.75);
    --second-hover: rgba(0, 0, 0, 0.5);
    --second-hover-low: rgba(0, 0, 0, 0.25);
}

:root.day {
    --background-color: rgb(30, 30, 45);
    --background-color-R: 30;
    --background-color-G: 30;
    --background-color-B: 45;
    --background-color-transparent: rgb(30, 30, 45, 0.5);
    --main-color: rgb(50, 50, 65);
    --main-color-transparent: rgba(50, 50, 65, 0.5);
    --text-color: rgb(225, 225, 225);
    --link-color: rgb(175, 175, 175);
    --second-default: rgba(255, 255, 255, 0.75);
    --second-hover: rgba(255, 255, 255, 0.5);
    --second-hover-low: rgba(255, 255, 255, 0.1);
}

:root.default-theme,
:root,
:root.dark,
:root.transparent {
    --background-color-R: 30;
    --background-color-G: 30;
    --background-color-B: 30;
    --background-color: rgb(30, 30, 30);
    --background-color-transparent: rgb(30, 30, 30, 0.5);
    --main-color: rgb(50, 50, 50);
    --main-color-transparent: rgba(50, 50, 50, 0.5);
    --text-color: rgb(225, 225, 225);
    --link-color: rgb(175, 175, 175);
    --second-default: rgba(255, 255, 255, 0.75);
    --second-hover: rgba(255, 255, 255, 0.5);
    --second-hover-low: rgba(255, 255, 255, 0.1);
}

:root {
    --box-shadow-all-inset-main-color-big: 0px 0px 100px 50px var(--main-color), inset 0px 0px 100px 5px var(--main-color);
    --box-shadow-all-inset-main-color: 0px 0px 10px 5px var(--main-color), inset 0px 0px 20px 1px var(--main-color);
    --box-shadow-all-inset-main-color-small: 0px 0px 5px 2px var(--main-color), inset 0px 0px 10px 1px var(--main-color);

    --box-shadow-all-inset-main-transparent-color-big: 0px 0px 100px 50px var(--main-color-transparent), inset 0px 0px 100px 5px var(--main-color-transparent);
    --box-shadow-all-inset-main-transparent-color: 0px 0px 10px 5px var(--main-color-transparent), inset 0px 0px 20px 1px var(--main-color-transparent);
    --box-shadow-all-inset-main-transparent-color-small: 0px 0px 5px 2px var(--main-color-transparent), inset 0px 0px 10px 1px var(--main-color-transparent);
    --blur: blur(10px);
    --blur-light: blur(2px);
    --gradient-color-all: linear-gradient(90deg,
            rgba(0, 0, 255, 1) 15%,
            rgba(0, 255, 0, 1) 30%,
            rgba(255, 0, 0, 1) 45%,

            rgba(255, 255, 0, 1) 60%,
            rgba(255, 0, 255, 1) 75%,
            rgba(0, 255, 255, 1) 90%,

            rgba(255, 255, 255, 1) 100%);
    --gradient-color: linear-gradient(90deg,
            rgba(130, 55, 180, 1) 30%,
            rgba(250, 30, 30, 1) 60%,
            rgb(255, 165, 35) 70%);
}

:root.dark .svg,
:root.default-theme .svg,
:root.day .svg,
:root.transparent .svg {
    filter: invert(1);
}

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

body.gride{
    background-size: 100px 100px;
    background-image: linear-gradient(0deg,  var(--second-hover-low) 3px, transparent 1px), linear-gradient(90deg,  var(--second-hover-low) 3px, transparent 1px)
}

::selection {
    background-color: var(--main-color);
    color: var(--second-hover);
}