: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: 6px;}
.padding-10_ {padding: 10px;}
.padding-20_ {padding: 20px;}
.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: 6px;
    box-shadow: 0 0 5px rgba(0,0,0,.14);
    /* width: 100%; */
}
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(0, 0, 0, 0.07); border-radius: 6px;}
a.innerBlock:hover {background-color: rgba(0, 0, 0, 0.14);}



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

.size-12 {font-size: 12px;}
.size-14, .size-14_ {font-size: 14px;}
.size-16 {font-size: 16px;}
.size-18 {font-size: 18px;}
.size-20_ {font-size: 20px;}
.size-24_ {font-size: 24px !important;}
.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 {border-radius: 6px;}
.radius-16_ {border-radius: 16px;}
.radius-40_ {border-radius: 40px;}

.c-white {color: white;}
.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);}

.b-main {background-color: var(--background-main);}
.b-red {background: var(--background-red);}
.b-green {background: var(--background-green);}

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

.center {text-align: center;}

.flexRow, .flexRow_ {display: flex; flex-direction: row;}
.flexColumn {display: flex; flex-direction: column;}
.gap-5_ {gap: 5px;}
.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;}







/*/////////////////////////////////*/
/*////////// ТЁМНАЯ ТЕМА //////////*/
/*/////////////////////////////////*/
body.dark-theme .innerBlock {background-color: rgba(0, 0, 0, 0.15); border-radius: 6px;}
body.dark-theme a.innerBlock:hover {background-color: rgba(0, 0, 0, 0.25);}

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-main_white {color: var(--color-white);}
body.dark-theme .c-gray_grayL {color: var(--color-grayLight);}
body.dark-theme .b-main {background-color: var(--background-main-DT);}
body.dark-theme .c-red {color: var(--color-red-DT);}
body.dark-theme .c-green {color: var(--color-green-DT);}
body.dark-theme .b-red {background: var(--background-red-DT);}
body.dark-theme .b-green {background: var(--background-green-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 34px;}
    .padding-6_ {padding: 5px;}

    .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_ {margin: 0 10px;}
    .width-400_ {max-width: 360px;}
    .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-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;}
    .gap-10_ {gap: 6px;}
    .gap-5_ {gap: 3px;}
}

@media screen and (max-width: 480px) {
    .width-900_ {margin: 0;}
    .width-400_ {max-width: 340px;}
    .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-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: 0;}
}