:root {
    --background-block: #f2f2f2;
    --background-block-DT: color-mix(in srgb, var(--background-main-DT) 18%, rgb(60, 60, 60));
    
    --background-blockShade: #eaeaea;
    --background-blockShade-DT: color-mix(in srgb, var(--background-main-DT) 35%, rgb(60, 60, 60));

}



.padding-6, .padding-6_ {padding: 6px;}
.padding-10, .padding-10_ {padding: 10px;}
.padding-20, .padding-20_ {padding: 20px;}
.padding-50, .padding-50_ {padding: 50px;}

.width-400_ {margin: 0 auto; max-width: 400px;}
.width-600_ {margin: 0 auto; max-width: 600px;}
.width-900_ {margin: 0 auto; max-width: 900px;}
.width-max {width: 100%; display: block;}

.relative {position: relative;}
.absolute {position: absolute;}


.block {
    background-color: var(--background-block);
    box-sizing: border-box;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(111, 111, 111, 0.4);
}
a.block:hover {background: var(--background-blockShade);}
.block > * {border-bottom: 1px solid var(--background-body);}
.block > :last-child {border-bottom: none !important;}

.innerBlock {background-color: rgba(255, 211, 127, 0.5); border-radius: 20px;}
a.innerBlock:hover {background-color: rgba(255, 211, 127, 0.75);}



.img-12 {width: 12px; height: auto;}
.img-16 {width: 16px; height: auto;}
.img-26 {width: 26px; height: auto;}
.img-50_ {width: 50px; height: auto;}
.img-80_ {width: 80px; height: auto;}
.img-140_ {width: 140px; height: auto;}

.size-10 {font-size: 10px;}
.size-12 {font-size: 12px;}
.size-14, .size-14_ {font-size: 14px;}
.size-16 {font-size: 16px;}
.size-18 {font-size: 18px;}
.size-20, .size-20_ {font-size: 20px;}
.size-24_ {font-size: 24px !important;}
.size-32, .size-32_ {font-size: 32px !important;}
.size-50 {font-size: 50px;}
.size-60_ {font-size: 60px;}
.size-100_ {font-size: 100px;}

.bold {font-weight: bold;}
.italic {font-style: italic;}

.border-2 {border-style: solid; border-width: 2px;}
.border-6_ {border-style: solid; border-width: 6px;}

.borderColor-white {border-color: white;}

.radius {border-radius: 50%;}
.radius-6, .radius-6_ {border-radius: 6px;}
.radius-12, .radius-12_ {border-radius: 12px;}
.radius-16, .radius-16_ {border-radius: 16px;}
.radius-40, .radius-40_ {border-radius: 40px;}

.c-white {color: var(--color-white);}
.c-black {color: var(--color-black);}
.c-gray {color: var(--color-gray);}
.c-gray_grayL {color: var(--color-gray);}
.c-main_white {color: var(--color-main);}
.c-red {color: var(--color-red);}
.c-green {color: var(--color-green);}
.c-blue {color: var(--color-blue);}
.c-pink {color: var(--color-pink);}
.c-heart {color: var(--color-heart);}
.c-system {color: var(--color-system);}
.c-access {color: var(--color-access);}
.c-error {color: var(--color-error);}


.b-main {background-color: var(--background-main);}
.b-mainLight {background-color: var(--background-mainLight);}
.b-mainLight:hover, .b-mainLight.active {background-color: var(--background-mainLightShade);}
.b-red {background: var(--color-red);}
.b-green {background: var(--color-green);}
.b-blue {background-color: var(--background-blue);}
.b-pink {background-color: var(--background-pink);}
.b-access {background: var(--background-access);}
.b-error {background: var(--background-error);}

.text-shadow {text-shadow: 0px 0px 6px black, 0px 0px 20px black}
.box-shadow {box-shadow: 0 0 8px black}

.center {text-align: center;}
.centerFlex {justify-content: center; align-items: center;}

.flexRow, .flexRow_ {display: flex; flex-direction: row;}
.flexColumn {display: flex; flex-direction: column;}
.flexColumnR {display: flex; flex-direction: column-reverse;}
.gap-5, .gap-5_ {gap: 5px;}
.gap-10, .gap-10_ {gap: 10px;}
.alignItems-center {align-items: center;}
.alignItems-start {align-items: start;}
.flex-1 {flex: 1;}
.flex-1-0-auto {flex: 1 0 auto;}
.wrap {flex-wrap: wrap;}

.invert {filter: invert(50%);}
.pointer {cursor: pointer;}

.scroll {overflow: auto; scrollbar-width: thin;}
.scroll-x {overflow-x: auto; scrollbar-width: thin;}
.scroll-y {overflow-y: auto; scrollbar-width: thin;}

.maxSize-80 {max-width: 80px; max-height: 80px;}
.hidden {display: none !important;}





/*/////////////////////////////////*/
/*////////// ТЁМНАЯ ТЕМА //////////*/
/*/////////////////////////////////*/
body.dark-theme .innerBlock {background-color: rgba(132, 98, 47, 0.5);}
body.dark-theme a.innerBlock:hover {background-color: rgba(132, 98, 47, 0.75);}

body.dark-theme .block {background: var(--background-block-DT);}
body.dark-theme a.block:hover {background: var(--background-blockShade-DT);}
body.dark-theme .block > * {border-bottom: 1px solid var(--background-body-DT);}

body.dark-theme .c-white {color: var(--color-white-DT);}
body.dark-theme .c-black {color: var(--color-black-DT);}
body.dark-theme .c-gray {color: var(--color-gray-DT);}
body.dark-theme .c-gray_grayL {color: var(--color-grayL);}
body.dark-theme .c-main_white {color: var(--color-white);}
body.dark-theme .c-red {color: var(--color-red-DT);}
body.dark-theme .c-green {color: var(--color-green-DT);}
body.dark-theme .c-blue {color: var(--color-blue-DT);}
body.dark-theme .c-pink {color: var(--color-pink-DT);}
body.dark-theme .c-heart {color: var(--color-heart-DT);}
body.dark-theme .c-system {color: var(--color-system-DT);}
body.dark-theme .c-access {color: var(--color-access-DT);}
body.dark-theme .c-error {color: var(--color-error-DT);}

body.dark-theme .b-main {background-color: var(--background-main-DT);}
body.dark-theme .b-mainLight {background-color: var(--background-mainLight-DT);}
body.dark-theme .b-mainLight:hover, body.dark-theme .b-mainLight.active {background-color: var(--background-mainLightShade-DT);}
body.dark-theme .b-red {background: var(--color-red-DT);}
body.dark-theme .b-green {background: var(--color-green-DT);}
body.dark-theme .b-blue {background-color: var(--background-blue-DT);}
body.dark-theme .b-pink {background-color: var(--background-pink-DT);}
body.dark-theme .b-access {background: var(--background-access-DT);}
body.dark-theme .b-error {background: var(--background-error-DT);}


body.dark-theme .invert {filter: invert(35%);}



/*/////////////////////////////////*/
/*////////// АДАПТИВНОСТЬ //////////*/
/*/////////////////////////////////*/
@media screen and (max-width: 1380px) {
    .width-900_ {max-width: 700px;}

    .size-60_ {font-size: 50px;}
    .img-140_ {width: 120px;}
    .radius-40_ {border-radius: 36px;}
}

@media screen and (max-width: 1024px) {

}

@media screen and (max-width: 768px) {
    .width-900_ {margin: 0 30px;}
    .padding-6_ {padding: 5px;}

    .size-32_ {font-size: 28px !important;}
    .size-60_ {font-size: 44px;}
    .img-50_ {width: 46px;}
    .img-80_ {width: 70px;}
    .img-140_ {width: 100px;}
    .border-6_ {border-width: 4px;}
    .radius-16_ {border-radius: 14px;}
    .radius-40_ {border-radius: 32px;}

    .gap-10_ {gap: 8px;}
    .gap-5_ {gap: 4px;}
}

@media screen and (max-width: 640px) {
    .width-900_, .width-600_, .width-400_ {margin: 0 15px;}
    .padding-6_ {padding: 4px;}
    .padding-10_ {padding: 7px;}
    .padding-20_ {padding: 14px;}
    .padding-50_ {padding: 40px;}

    .size-20_ {font-size: 18px;}
    .size-24_ {font-size: 22px !important;}
    .size-32_ {font-size: 26px !important;}
    .size-60_ {font-size: 36px;}
    .img-50_ {width: 42px;}
    .img-80_ {width: 60px;}
    .img-140_ {width: 80px;}
    .radius-16_ {border-radius: 12px;}
    .radius-40_ {border-radius: 26px;}

    .flexRow_ {flex-direction: column;}
    .flexRow_.alignItems-start {align-items: stretch !important;}
    .gap-10_ {gap: 6px;}
    .gap-5_ {gap: 3px;}
}

@media screen and (max-width: 480px) {
    .width-900_, .width-600_, .width-400_ {margin: 0 5px;}
    .padding-6_ {padding: 3px;}
    .padding-10_ {padding: 4px;}
    .padding-20_ {padding: 8px;}
    .padding-50_ {padding: 30px;}

    .size-14_ {font-size: 12px;}
    .size-24_ {font-size: 20px !important;}
    .size-32_ {font-size: 22px !important;}
    .size-60_ {font-size: 28px;}
    .img-50_ {width: 36px;}
    .img-80_ {width: 46px;}
    .img-140_ {width: 60px;}
    .radius-16_ {border-radius: 10px;}
    .radius-40_ {border-radius: 22px;}
    .border-6_ {border-width: 3px;}

    .gap-10_ {gap: 4px;}
    .gap-5_ {gap: 2px;}
    
    .block {border-radius: 10px;}
}