#lookwindow{ border: 1px solid #fff; position: fixed; right: 0px; bottom: 0; z-index: 99999; font-weight: 500; font-size: 1rem; color: #fff; text-shadow: 2px 2px 5px #555; padding: 10px; background-color: rgba(100,100,100,0.7); box-shadow: inset 0px 0px 10px #aaa, inset -13px -5px 5px rgba(200,200,200,0.2), 2px 2px 40px 10px rgba(0,0,0,.5); border-radius: 5px; display: block; } :root { --main-width: 87rem; --main-width-inside: 57rem; --main-background-color: #222; --main-roof-color: #1c1f1f; --main-white-light: #eee; --main-white-dark: #aaa; --main-white-verydark: #777; --main-white-veryverydark: #444; --main-yellow: #e4a563; --main-yellow-dark: #e4a563b8; --main-yellow-opacity: #e4a56350; --main-yellow-light: #f9ed9d; --main-text-black: #000; --main-background-width: 5.0rem; --main-background-height: calc(var(--main-background-width) * 1.07); --main-backgroundcolor-selection: #E4A5631A; --main-font80: 'ChtoGdeKogdaRegular'; --main-font20: 'PF Din Text Comp Pro'; --main-font20l: 'PF Din Text Comp Pro Light'; --top-roof: 43.6rem; --main-bottom-height: 3rem; --main-font-size: 1.4rem; --main-letter-spacing: 0.02rem; --main-list-rotation-color-dark: #1c1f1f; --main-list-rotation-color-light: #262626; } @font-face { font-family: 'ChtoGdeKogda'; src: url('/fonts/ChtoGdeKogda-Logotype.eot'); src: url('/fonts/ChtoGdeKogda-Logotype.eot?#iefix') format('embedded-opentype'), url('/fonts/ChtoGdeKogda-Logotype.woff2') format('woff2'), url('/fonts/ChtoGdeKogda-Logotype.woff') format('woff'), url('/fonts/ChtoGdeKogda-Logotype.ttf') format('truetype'), url('/fonts/ChtoGdeKogda-Logotype.svg#ChtoGdeKogda-Logotype') format('svg'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'ChtoGdeKogdaRegular'; src: url('/fonts/ChtoGdeKogda-Regular.eot'); src: url('/fonts/ChtoGdeKogda-Regular.eot?#iefix') format('embedded-opentype'), url('/fonts/ChtoGdeKogda-Regular.woff2') format('woff2'), url('/fonts/ChtoGdeKogda-Regular.woff') format('woff'), url('/fonts/ChtoGdeKogda-Regular.ttf') format('truetype'), url('/fonts/ChtoGdeKogda-Regular.svg#ChtoGdeKogda-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'PF Din Text Comp Pro'; src: url('/fonts/PFDinTextCompPro-Medium.eot'); src: url('/fonts/PFDinTextCompPro-Medium.eot?#iefix') format('embedded-opentype'), url('/fonts/PFDinTextCompPro-Medium.woff2') format('woff2'), url('/fonts/PFDinTextCompPro-Medium.woff') format('woff'), url('/fonts/PFDinTextCompPro-Medium.ttf') format('truetype'), url('/fonts/PFDinTextCompPro-Medium.svg#PFDinTextCompPro-Medium') format('svg'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'PF Din Text Comp Pro Light'; src: url('/fonts/PFDinTextCompPro-Light.woff2') format('woff2'), url('/fonts/PFDinTextCompPro-Light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; } body{ background-color: var(--main-background-color); font-size: 10pt; font-family: var(--main-font20); margin: 0; } a:link, a:visited, a:hover, a:active{ color: var(--main-yellow); text-decoration: none; } @media (max-width: 1449px) { :root { --main-width: 53.75rem; --main-width-inside: 37rem; --top-roof: 35.2rem; } } .roof{ width: var(--main-width); height: calc(var(--main-width)/4.83); box-sizing: border-box; position: relative; overflow: hidden; margin: auto; } .roof_top0, .roof_top1, .roof_top2, .roof_top3, .roof_top4, .roof_top5, .roof_top6 , .roof1_top0, .roof1_top1, .roof1_top2, .roof1_top3, .roof1_top4, .roof1_top5, .roof1_top6{ border-color: var(--main-yellow); border-width: 2px; border-style: solid; argin: auto; border-bottom-width: 0px; box-sizing: border-box; background-color: var(--main-roof-color); position: absolute; left: 50%; transform: translateX(-50%); } .roof_top0{ width: 12%; height: 6%; top: -5%; z-index: 102; border-bottom-width: 2px; border-top-width: 0px; border-left-width: 0px; border-right-width: 0px; } .roof_top1{ width: 16%; height: 37%; top: -2%; border-radius: 50% 50% 40% 40% / 100% 100% 100% 100%; } .roof_top2{ width: 23%; height: 8%; border-bottom-width: 2px; top: 8%; z-index: 100; } .roof_top3{ width: 48%; height: 86%; border-radius: 40% 40% 0% 0% / 100% 100% 0% 0%; top: 10%; } .roof_top4{ width: 47%; height: 11%; top: 62%; } .roof_settings{ --roof5_width: 50; --roof6_height: 16.5; --roof6_width: 100; --roof6_part: calc((var(--roof6_width) - var(--roof5_width))/2); box-sizing: border-box; } .roof_top5{ width: calc(var(--roof5_width) * 1%); height: 8%; top: 72%; } .roof_top6{ width: 100%; height: calc(var(--roof6_height) * 1%); top: 80%; border-bottom-width: 2px; border-left-width: 0px; border-right-width: 0px; } .roof_top6_setting::before, .roof_top6_setting::after{ content: ""; position: absolute; bottom: -2px; width: 23%; idth: calc(sqrt((var(--roof6_part) * var(--roof6_part) + var(--roof6_height) * var(--roof6_height))) * 1%); height: 131%; z-index: 100; background-color: var(--main-background-color); border-bottom: 2px solid var(--main-yellow); } .roof_top6::before{ transform: rotate(-8.1deg) translateX(-0%) translateY(0%); transform-origin: bottom left; left: 0; } .roof_top6::after{ transform: rotate(8.1deg) translateX(-0%) translateY(0%); transform-origin: bottom right; right: 0; } .roof :first-child{ } .roof :last-child{ } .roof1_settings{ --roof_all-max-width: var(--top-roof); --roof_all-max-height: calc(var(--top-roof)/2.41); --roof_all-width: var(--top-roof); --roof_all-height: calc(var(--top-roof)/2.41); --roof6-height: calc(var(--roof_all-height)/5.5); --roof6-ba-rotate: 8.5deg; --roof6-ba-width: 24%; --roof6-ba-height: 131%; } .roof1{ max-width: var(--roof_all-max-width); max-height: var(--roof_all-max-height); width: var(--roof_all-width); height: var(--roof_all-height); box-sizing: border-box; position: relative; overflow: hidden; margin: auto; } .roof1_top0{ width: 24%; height: 6%; top: -5%; z-index: 102; border-bottom-width: 2px; border-top-width: 0px; border-left-width: 0px; border-right-width: 0px; } .roof1_top1{ width: 32%; height: 37%; top: -2%; border-radius: 50% 50% 40% 40% / 100% 100% 100% 100%; } .roof1_top2{ width: 46%; height: 8%; border-bottom-width: 2px; top: 8%; z-index: 100; } .roof1_top3{ width: 96%; height: 86%; border-radius: 40% 40% 0% 0% / 100% 100% 0% 0%; top: 10%; } .roof1_top4{ width: 94%; height: 11%; top: 62%; } .roof1_settings{ --roof6_part: calc((var(--roof6_width) - var(--roof5_width))/2); } .roof1_top5{ width: 100%; height: 24%; top: 72%; } .roof1_top6{ width: var(--main-width); height: var(--roof6-height); transform: translateX(-50%) translateY(-100%); border-bottom-width: 2px; border-left-width: 0px; border-right-width: 0px; position: relative; } .roof1_top6::before{ transform: rotate(calc(var(--roof6-ba-rotate) * -1)) translateX(-0%) translateY(0%); transform-origin: bottom left; left: 0; } .roof1_top6::after{ transform: rotate(var(--roof6-ba-rotate)) translateX(-0%) translateY(0%); transform-origin: bottom right; right: 0; } .roof1_top6::before, .roof1_top6::after{ content: ""; position: absolute; bottom: -1px; idth: calc(sqrt((var(--roof6_part) * var(--roof6_part) + var(--roof6_height) * var(--roof6_height))) * 1%); width: var(--roof6-ba-width); height: var(--roof6-ba-height); z-index: 100; background-color: var(--main-background-color); border-bottom: 2px solid var(--main-yellow); box-sizing: border-box; } .roof1_top6::before, .roof1_top6::after{ } .roof1_div{ position: relative; width: 100%; height: var(--roof_all-height); overflow: hidden; box-sizing: border-box; margin-top: 1rem; } .score_common_div{ --width: 32rem; width: var(--width); height: calc(var(--width) / 5.8); position: absolute; display: flex; justify-content: center; align-items: center; top: 5.4rem; left: 50%; transform: translateX(-50%); } .score_lable{ background-image: linear-gradient(179deg, var(--main-yellow), var(--main-yellow-light)); width: 25%; height: 48%; font-size: 1.3rem; text-align: center; border-radius: 13% / 50%; position: relative; } .score_lable div { position: absolute; left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%); color: var(--main-text-black); font-weight: 600; text-align: center; } .score_table{ width: 31%; height: 100%; position: relative; border: 1px solid var(--main-yellow); margin: 0 4%; color: var(--main-white-light); box-sizing: border-box; font-family: var(--main-font20l); } .score_table{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .games_count{ position: absolute; left: 50%; top: 0%; transform: translateY(-50%) translateX(-50%); font-size: 1.1rem; padding: 0.4rem; box-sizing: border-box; background-color: var(--main-roof-color); color: var(--main-yellow); font-family: var(--main-font20); white-space: nowrap; } .score_digits{ position: absolute; left: 50%; top: 50%; transform: translateY(-71%) translateX(-50%); font-size: 2.1rem; width: 100%; text-align: center; } .score_div_comment{ color: var(--main-white-verydark); } .time_div{ display: flex; position: absolute; left: 50%; bottom: 0%; transform: translateY(-73%) translateX(-50%); width: 100%; justify-content: center; align-items: center; } .time_flex_item{ margin: 0px 6%; } .time_flex_item_on{ color: var(--main-yellow); } .time_flex_item_off{ color: var(--main-white-dark); } .switch_button{ --circle-diametr: 1.3rem; position: absolute; left: 50%; bottom: 0%; transform: translateY(50%) translateX(-50%); eight: 23%; idth: 12%; width: var(--circle-diametr); height: var(--circle-diametr); background-color: var(--main-yellow); border-radius: 50%; border: 0.3rem solid var(--main-roof-color); box-sizing: border-box; cursor: pointer; } .circle_div_top_setting{ --width: 7rem; } .circle_div_reglament_setting{ --width: 7rem; } .circle_div_bottom_fixed_setting{ --width: calc(var(--main-bottom-height) + 1rem); } .circle_div{ position: relative; width: var(--width); height: var(--width); border: 1px solid var(--main-yellow); border-radius: 50%; top: 50%; transform: translateY(-50%); background-color: var(--main-background-color); z-index: 20; margin: auto; } .circle_div::before{ content: ""; position: absolute; top: 50%; left: 50%; width: 96%; height: 96%; border: 0.5px solid var(--main-yellow); border-radius: 50%; transform: translateY(-50%) translateX(-50%); } .circle_div::after{ content: ""; position: absolute; top: 50%; left: 50%; width: 92%; height: 92%; border: 0.5px solid var(--main-yellow); border-radius: 50%; transform: translateY(-50%) translateX(-50%); } .circle_div_left{ left: 80%; position: absolute; } .circle_div_right{ right: 80%; position: absolute; } .circle_picture_left{ position: relative; width: 75%; top: 50%; left: 50%; transform: translateY(-42%) translateX(-50%); } .circle_picture_right{ position: relative; width: 62%; top: 50%; left: 50%; transform: translateY(-57%) translateX(-44%); } .center_rectangle{ osition: relative; idth: var(--main-width); eight: 0rem; op: -12rem; eft: 0; ransform: translateY(-100%); ox-sizing: border-box; argin: auto; -index: 300; ser-select: none; position: absolute; width: var(--main-width); height: 0rem; top: 6rem; left: 50%; transform: translateX(-50%); box-sizing: border-box; margin: auto; z-index: 300; user-select: none; } .rectangle_in{ position: absolute; width: 12rem; height: 3rem; top: 0; border-top: 1px solid var(--main-yellow); border-bottom: 1px solid var(--main-yellow); } .rectangle_in_left{ left: 0; } .rectangle_in_right{ right: 0; } .rectangle_in_text{ position: relative; color: var(--main-white-light); font-size: 1.3rem; line-height: 1; top: 50%; transform: translateY(-50%); } .rectangle_in_text_left{ padding-right: 28%; text-align: right; } .rectangle_in_text_right{ padding-left: 28%; text-align: left; cursor: pointer; } .main_menu_div{ position: relative; width: var(--main-width); height: calc(var(--main-width)/14.83); background-image: url(/images/chgklogo.svg); background-repeat: no-repeat; background-position-x: center; margin: auto; margin-top: 0.5rem; box-sizing: border-box; z-index: 100; user-select: none; } .main_menu_left, .main_menu_right{ position: relative; width: 49.9%; top: 59%; transform: translateY(-50%); display: inline-flex; justify-content: space-around; color: var(--main-yellow); box-sizing: border-box; } .main_menu_left{ padding-left: 4rem; padding-right: 13rem; } .main_menu_right{ padding-left: 14rem; padding-right: 4rem; } .main_menu_item{ font-size: 1.2rem; font-family: var(--main-font20l); margin: 0 1.2rem; position: relative; } .main_menu_item:hover div{ display: block; } .submenu_triangle::before{ content: ""; --width: 0.35rem; border: var(--width) solid transparent; border-top: var(--width) solid var(--main-yellow); position: absolute; top: 52%; right: -1rem; } .submenu_div { position: absolute; top: 100%; left: -1rem; padding-top: 1.05rem; width: 13rem; } .submenu { position: relative; border: 0.5px solid var(--main-yellow); border-radius: 5%; top: 0; left: 0; padding: 1rem; white-space: nowrap; background-color: var(--main-background-color); box-sizing: border-box; } .submenu_sendquestion { position: absolute; border: 0.5px solid var(--main-yellow); border-radius: 5%; top: 0; left: 0; transform: translateY(2.9rem) translateX(0rem); white-space: nowrap; background-color: var(--main-background-color); padding: 1rem; width: 12rem; box-sizing: border-box; } .submenu li, .submenu_sendquestion1 li{ list-style-type: none; padding: 0.3rem 0.15rem 0.3rem; cursor: pointer; } .submenu_sendquestion1 li a{ color: var(--main-white-light); } .submenu li:hover, .submenu_sendquestion1 li:hover{ background-color: var(--main-backgroundcolor-selection); } .submenu_hidden{ display: none; } .rectangle_in_text:hover div{ display: block; } .submenu_sendquestion1 { position: absolute; border-radius: 5%; top: 100%; left: 0; white-space: nowrap; padding: 1rem; width: 12rem; height: auto; box-sizing: border-box; } .submenu_sendquestion1::before { content: ""; position: absolute; border: 0.5px solid var(--main-yellow); border-radius: 5%; top: 0; left: 0; transform: translateY(0.3rem) translateX(0rem); background-color: var(--main-background-color); width: 12rem; height: 95%; box-sizing: border-box; z-index: -1; } .fixed_footer{ position: fixed; width: 100%; border-top: 0.05rem solid var(--main-yellow); background-color: var(--main-background-color); z-index: 5000; bottom: 0; box-shadow: 0rem 0rem 2rem 1rem #000d; display: none; } .fixed_footer_off{ height: var(--main-bottom-height); } .fixed_footer_on{ height: 19rem; } .fixed_footer_div{ position: absolute; transform: translateX(-50%) translateY(-50%); top: calc(var(--main-bottom-height) - var(--main-bottom-height) / 2); left: 50%; width: 50%; height: 2px; } .footer_fixed_text{ --width-block: 7.6rem; --offset: 1.2rem; position: absolute; border-top: 0.05rem solid var(--main-yellow-dark); border-bottom: 0.05rem solid var(--main-yellow-dark); color: var(--main-white-light); top: 50%; left: 50%; font-size: 1.1rem; padding: 0.2rem 0.4rem; width: var(--width-block); } .footer_fixed_text_left{ transform: translateX(calc(-100% - var(--offset))) translateY(-50%); text-align: center; } .footer_fixed_text_right{ transform: translateX(var(--offset)) translateY(-50%); text-align: right; } .circle_div_bottom_fixed_setting{ position: absolute; left: 50%; transform: translateY(-68%) translateX(-50%); } .footer_fixed_menu{ position: absolute; color: var(--main-white-light); font-size: 1.3rem; line-height: 2.5; position: absolute; left: 50%; transform: translateY(calc(var(--main-bottom-height) + var(--main-bottom-height) / 2)) translateX(-50%); } .menu_button_main, .menu_button_main::before, .menu_button_main::after{ --width: 2.2rem; --height: calc(var(--width) / 10); position: absolute; background-color: var(--main-yellow); border-radius: 15rem; height: var(--height); z-index: 1500; } .menu_button_main{ width: var(--width); top: 1.5rem; left: 1.5rem; display: none; } .menu_button_main::before{ content: ""; width: calc(var(--width) * 1.2); top: -0.5rem; left: 0rem; transform-origin: top left; } .menu_button_main::after{ content: ""; top: 0.5rem; left: 0rem; transform-origin: bottom left; width: calc(var(--width) * 0.8); } .menu_button_main_off{ background-color: var(--main-yellow); position: absolute; } .menu_button_main_off::before{ transform: rotate(0deg); } .menu_button_main_off:after{ transform: rotate(0deg); } .menu_button_main_on{ background-color: #0000; left: 1.5rem; position: fixed; } .menu_button_main_on::before{ width: calc(var(--width) * 0.7); transform: rotate(45deg); } .menu_button_main_on::after{ width: calc(var(--width) * 0.7); transform: rotate(-45deg); } @media (max-width: 1449px) { body{ padding-bottom: var(--main-bottom-height); } .roof{ --width: 82vw; --min-width: 29rem; width: var(--width); min-width: var(--min-width); max-width: var(--main-width); height: calc(var(--width) / 4.83); max-height: calc(var(--main-width) / 4.83); min-height: calc(var(--min-width) / 4.83); } .roof_top6{ display:none; } .roof1_settings{ --roof_all-width: 78vw; --roof_all-min-width: 19rem; --roof_all-max-width: var(--top-roof); --roof_all-height: calc(var(--roof_all-width) / 2.41); --roof_all-max-height: calc(var(--top-roof)/2.41); --roof_all-min-height: calc(var(--roof_all-min-width) / 2.41); --roof6-width: 100vw; --oof6-min-width: calc(var(--roof_all-min-width) + 2rem) ; --roof6-min-width: 360px ; --roof6-height: calc(var(--roof_all-height)/5.5); --roof6-min-height: calc(var(--roof_all-min-width) / 13); --roof6-max-height: calc(var(--roof_all-max-width) / 13); --roof6-ba-rotate: 8.5deg; --roof6-ba-rotate: 0deg; --roof6-ba-width: calc((var(--roof6-width) - var(--roof_all-width))/2 ); --roof6-ba-height: 131%; } .roof1{ width: var(--roof_all-width); min-width: var(--roof_all-min-width); max-width: var(--roof_all-max-width); height: var(--roof_all-height); min-height: calc(var(--roof_all-min-width) / 2.41); max-height: calc(var(--roof_all-max-width) / 2.41); } .roof1_top6{ width: var(--roof6-width); max-width: var(--main-width); min-width: var(--roof6-min-width); max-height: var(--roof6-max-height); min-height: var(--roof6-min-height); } .roof1_div{ height: var(--roof_all-height); min-height: var(--roof_all-min-height); max-height: var(--roof_all-max-height); } .score_common_div{ --width: 19.7rem; max-width: 30rem; min-width: var(--width); position: relative; width: var(--width); height: calc(var(--width) / 5.2); position: absolute; border: .4rem solid var(--main-white-verydark); border-radius: 3rem; background-color: var(--main-yellow); top: 4.4rem; } .center_rectangle{ display: none; } .score_lable{ background-image: none; background-color: var(--main-background-color); font-size: 1.0rem; border-radius: 20% / 50%; } .score_lable div { color: var(--main-white-light); font-weight: 400; text-align: center; } .score_table{ width: 33%; height: 100%; position: relative; border: 1px solid var(--main-yellow); margin: 0 4%; color: var(--main-text-black); } .games_count{ top: 16%; font-size: 0.9rem; font-weight: 600; padding: 0.4rem; background-color: transparent; color: var(--main-text-black); } .score_digits{ transform: translateY(-54%) translateX(-50%); font-size: 1.4rem; } .switch_button{ display: none; } .time_div{ transform: translateY(-27%) translateX(-50%); justify-content: space-around; } .time_flex_item{ margin: 0px 3%; } .time_flex_item_on{ color: var(--main-text-black); font-weight: 600; font-family: var(--main-font20); } .time_flex_item_off{ color: var(--main-text-black); font-weight: 400; } .main_menu_div{ background-position: center; background-size: 60rem; height: 65px; width: 100%; max-width: var(--main-width); } .main_menu_item{ display: none; } .fixed_footer{ display: block; } .menu_button_main{ display: block; } } @media (max-width: 680px) { .score_common_div{ --width: 21.7rem; position: relative; top: 1.4rem; } } .footer{ width: 100%; min-height: 10rem; border-top: 0.05rem solid var(--main-yellow); } .footer_div{ min-width: var(--main-width); width: var(--main-width); margin: auto; } .footer_copyright_div{ position: relative; min-width: var(--main-width); min-height: 4rem; border-top: 0.2rem solid var(--main-yellow); border-bottom: 0.05rem solid var(--main-yellow); margin: 0.5rem auto 1rem; box-sizing: border-box; } .footer_copyright_div::before{ content: ""; position: absolute; top: -0.6rem; border-top: 0.05rem solid var(--main-yellow); width: 100%; height: 1rem; } .footer_copyright_content_div{ width: var(--main-width); min-height: 4rem; margin: auto; padding: 1.5rem 18rem; box-sizing: border-box; } .footer_content_div{ width: 100%; min-height: 4rem; box-sizing: border-box; display: flex; color: var(--main-yellow); } .footer_content_div > div{ position: relative; padding: 1rem 1rem; box-sizing: border-box; } .footer_content1{ flex-grow: 2; flex-basis: 20%; text-align: left; padding-top: 3.0rem !important; } .big_menu_item{ margin: 1.5rem 1rem !important; } .footer_content2{ flex-grow: 3; flex-basis: 30%; text-align: left; font-family: var(--main-font20l); column-count: 3; column-gap: 25%; font-size: 1.0rem; white-space: nowrap; } .footer_content2 li{ list-style-type: none; margin: 0 0 1.3rem; } .footer_content5{ flex-grow: 3; flex-basis: 30%; text-align: right; font-family: var(--main-font20l); font-size: 1.2rem; } .footer_content5 div:last-child{ margin-top: 2rem; } .footer_content6{ flex-grow: 2; flex-basis: 20%; text-align: center; } .footer_content6 > div, .big_menu_item{ text-transform: uppercase; font-size: 1.13rem; margin: 0 auto 1.1rem; width: min-content; } .footer_content6 > div, .big_menu_item, .submenu_link { text-align: center; position: relative; display: block; box-sizing: border-box; } .footer_content6 > div::before, .footer_content6 > div::after, .big_menu_item::before, .big_menu_item::after, .submenu_link::before, .submenu_link::after ,.menu_rank::before,.menu_rank::after { --width-dot: 0.12rem; content: ""; display: inline-block; border: 0.1rem solid var(--main-yellow); width: var(--width-dot); height: var(--width-dot); color: var(--main-yellow); cursor: pointer; transform: translateY(-50%) rotate(45deg); position: absolute; top: 50%; } .footer_content6 > div::before, .big_menu_item::before, .submenu_link::before ,.menu_rank::before{ left: -1rem; } .footer_content6 > div::after, .big_menu_item::after, .submenu_link::after ,.menu_rank::after{ right: -0.8rem; } .copyright_text1{ display: inline-block; color: var(--main-white-verydark); width: 67%; vertical-align: top; box-sizing: border-box; line-height: 1.0; letter-spacing: 1.3; font-size: 0.8rem; font-family: var(--main-font20l); } .copyright_text2{ display: inline-block; color: var(--main-yellow); vertical-align: top; text-align: right; width: 31%; text-decoration: underline; font-size: 1.0rem; box-sizing: border-box; font-family: var(--main-font20); white-space: nowrap; } .social_networks_div{ position: relative; transform: translateX(1rem) translateY(2.8rem); width: fit-content; z-index: 100; } .social_networks_div div{ position: relative; display: inline-block; vertical-align: middle; } .social_networks_div img{ --width: 1.5rem; width: var(--width); height: var(--width); } .social_networks_div div:not(:first-child){ margin-left: 4rem; } .social_networks_div div:not(:first-child)::before{ --width-dot: 0.12rem; content: ""; display: inline-block; border: 0.1rem solid var(--main-yellow); width: var(--width-dot); height: var(--width-dot); color: var(--main-yellow); top: 50%; transform: translateY(-50%) rotate(45deg); position: absolute; left: -2rem; } @media (max-width: 1449px) { .social_networks_div div:not(:first-child){ margin-left: 1.7rem; } .social_networks_div div:not(:first-child)::before{ left: -1.1rem; } .footer_copyright_content_div{ padding: 1.5rem 1.5rem; } } @media (max-width: 848px) { .footer_div{ width: 100%; min-width: 300px; margin: auto; } .footer_content_div{ flex-wrap: wrap; } .ocial_networks_div div:not(:first-child){ margin-left: 2.4rem; } .ocial_networks_div div:not(:first-child)::before{ left: -1.3rem; } .footer_content_div > div{ } .footer_content1{ order: 1; width: 23%; } .footer_content2{ order: 3; min-width: 60%; column-gap: 0; } .footer_content5{ order: 4; width: 40%; } .footer_content6{ order: 2; min-width: 76%; padding-top: 2.4rem !important; } .footer_content6 > div{ margin: 0 0 1.1rem; text-align: center; margin: 0 auto 1.1rem; width: fit-content; white-space: nowrap; } .footer_content6 div:last-child{ margin-bottom: 0 !important; } .footer_copyright_div { width: 100%; min-width: 100%; } .footer_copyright_content_div{ width: 100%; padding: 1.5rem 1.5rem; } .copyright_text1{ width: 100%; text-align: center; } .copyright_text2{ width: 100%; text-align: center; margin-top: 1rem; } } @media (max-width: 480px) { .social_networks_div div:not(:first-child){ margin-left: 3.5rem; } .social_networks_div div:not(:first-child)::before{ left: -1.9rem; } .footer_content_div{ flex-direction: column; flex-wrap: wrap; } .footer_content6{ order: 1; padding-top: 3rem !important; padding-bottom: 0 !important; width: 100%; } .footer_content6 div:last-child{ margin-bottom: 0 !important; } .footer_content2{ order: 3; column-gap: 10%; width: 100%; } .footer_content5{ order: 4; text-align: left; width: 100%; } .footer_content1{ order: 2; padding-top: 0 !important; width: 100%; } .big_menu_item{ } .footer_content6 > div{ margin: 0 0 1.1rem; text-align: left; margin: 1.5rem 1rem; width: fit-content; white-space: nowrap; } } .main_frame, .main_frame1, .main_frame2{ min-width: var(--main-width); position: relative; } .main_frame{ margin: 1.2rem 0 5rem; } .main_frame_color{ color: var(--main-white-light); } .back1{ position: absolute; width: 100%; height: var(--height); top: 0; left: 0; background-image: linear-gradient(180deg, var(--main-background-color) 5%, #222e 30%), url(/images/backgroundlogo1.svg); background-size: var(--main-background-width); background-position: left bottom; } .back2{ position: absolute; width: 100%; height: calc(var(--height) - var(--main-background-height)); top: 0; left: 0; background-image: url(/images/backgroundlogo1.svg); background-size: var(--main-background-width); background-position: calc(var(--main-background-width) + var(--main-background-width) / 2) bottom; } .back3{ position: absolute; width: 100%; height: calc(var(--height) - var(--main-background-height) * 9); top: var(--main-background-height); left: 0; background-image: url(/images/backgroundlogo1.svg); background-size: var(--main-background-width); background-position: calc(var(--main-background-width) + var(--main-background-width) / 2) calc(var(--main-background-height) / 0.8); } .back3::before{ --height: 100%; content: ""; position: absolute; top: calc(0rem - var(--main-background-height)); left: 0; width: 100%; height: calc(var(--height) - var(--main-background-height) * -1.8); background-image: linear-gradient(180deg, #2229 0%, #2229 100%), url(/images/backgroundlogo1.svg); background-size: var(--main-background-width); background-position: calc(var(--main-background-width) + var(--main-background-width)) calc(var(--main-background-height) / 0.8); } .back4{ position: absolute; width: 100%; height: var(--height); top: 0; left: 0; background-image: linear-gradient(180deg, var(--main-background-color) 0, #222c 35rem), url(/images/background.png); background-size: 100%, var(--main-background-width); background-position: left top; } .back_26{ --height: 26%; } .back_100{ --height: 100%; } .main_frame_pattern{ background-image: linear-gradient(180deg, var(--main-background-color) 65%, #222e 95%), url(/images/backgroundlogo1.svg), url(/images/backgroundlogo1.svg); background-size: var(--main-background-width), var(--main-background-width); background-position: left bottom, calc(var(--main-background-width) + var(--main-background-width) / 2) calc(100% - var(--main-background-height)); } .main_table{ position: relative; width: var(--main-width); margin: 1.2rem auto 0; display: flex; justify-content: center; } .main_table_frame{ border: 0.05rem solid var(--main-yellow); border-radius: 0.7rem; } .main_table_menu_left_div, .main_table_menu_right_div{ position: relative; top: -2.75rem; border: 0.05rem solid var(--main-yellow); border-top:none; width: 13rem; margin-top: 1.2rem; margin-bottom: 0; overflow: hidden; background-color: var(--main-background-color); } .main_table_menu_left_div{ margin-left: 1rem; margin-right: 0.5rem; } .main_table_menu_right_div{ margin-left: 0.5rem; margin-right: 1rem; } .main_table_center{ position: relative; width: var(--main-width-inside); background-color: transparent; } .main_table_menu{ border-top: 0.05rem solid var(--main-yellow); margin-top: 2.5rem; width: 100%; height: 100%; padding-top: 1.5rem; font-size: 1.2rem; color: var(--main-yellow); font-family: var(--main-font20l); user-select: none; overflow: hidden; background-color: var(--main-background-color); box-sizing: border-box; } .main_table_menu_left_part, .main_table_menu_right_part{ border-radius: 50% 50% 0 0 / 7rem 7rem 0% 0%; padding: 4rem 0rem; } .main_frame1{ min-height: 20rem; min-width: var(--main-width); padding: 0rem 0 3rem; } .previous_game{ position: relative; border: 0.05rem solid var(--main-yellow); width: var(--main-width-inside); min-height: 35%; margin: auto; background-color: var(--main-background-color); } .main_frame2_temp{ background-image: linear-gradient(180deg, var(--main-background-color) 20%, #222e 80%), url(/images/backgroundlogo1.svg), url(/images/backgroundlogo1.svg); background-size: 100% var(--main-background-width), var(--main-background-width); background-position: 0 0, left var(--main-background-height), calc(var(--main-background-width) + var(--main-background-width) / 2) calc(var(--main-background-height) * 0.0); } .main_frame2{ background-image: linear-gradient(180deg, var(--main-background-color) 20%, #222e 80%), url(/images/backgroundlogo1.svg), url(/images/backgroundlogo1.svg); background-size: 100%, var(--main-background-width), var(--main-background-width); background-position: 0 0, left var(--main-background-height), calc(var(--main-background-width) + var(--main-background-width) / 2) calc(var(--main-background-height) * 0.0); } .main_frame2{ min-height: 20rem; padding: 0rem 0 5rem; text-align: center; } .main_frame2_header{ color: var(--main-white-light); font-size: 3.2rem; font-family: 'ChtoGdeKogdaRegular'; text-transform: uppercase; text-align: center; border-bottom: 0.05rem solid var(--main-yellow); padding: 2rem 0; } .main_frame2_footer{ color: var(--main-background-color); font-size: 1.2rem; font-family: var(--main-font20l); text-align: center; border-bottom: 0.05rem solid var(--main-yellow); border-top: 0.05rem solid var(--main-yellow); padding: 3rem 0 1rem; background-image: linear-gradient(90deg, var(--main-yellow), var(--main-yellow-light)); margin-top: -4rem; } .main_frame2_content{ margin: auto; position: relative; z-index: 10; display: block; white-space: nowrap; } .control_button_setting_main{ --button-width: 3rem; } .control_button{ border: 0.05rem solid var(--main-yellow); width: var(--button-width); height: var(--button-width); border-radius: 50%; background-color: var(--main-yellow); cursor: pointer; position: relative; } .control_button_left{ transform: rotate(45deg); } .control_button_right{ transform: rotate(225deg); } .video_shot{ --width: 34rem; border: 0.05rem solid var(--main-yellow); width: var(--width); height: calc(var(--width) / 1.77); margin: 2rem 1rem; background-color: #333; } .control_button, .video_shot{ display: inline-block; vertical-align: middle; } .control_button_pattern{ --width: 15%; --line-height-pattern: calc(var(--button-width) / 27.27); position: absolute; border: var(--line-height-pattern) solid black; left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%); width: var(--width); height: var(--width); } .control_button_pattern::before{ content: ""; --width: 230%; --line-height-pattern-before: calc(var(--button-width) / 16.66); position: absolute; display: block; border-bottom: var(--line-height-pattern-before) solid black; border-left: var(--line-height-pattern-before) solid black; left: calc(-35% - var(--line-height-pattern-before)); bottom: calc(-35% - var(--line-height-pattern-before)); width: var(--width); height: var(--width); } .control_button_pattern::after{ content: ""; --width: 30%; --line-height-pattern-after: calc(var(--button-width) / 27.27); position: absolute; display: block; border: var(--line-height-pattern-after) solid black; left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%); width: var(--width); height: var(--width); } .side_menu_button_div{ order: 1px solid white; width: 1.5rem; overflow: hidden; top: 50%; display: none; } .side_menu_button_div_close{ position: fixed; left: 0rem; transform: rotate(180deg); } .side_menu_button_div_open{ position: absolute; right: 0; } @media (max-width: 1449px) { .main_frame, .main_frame2{ min-width: 100px; } .main_frame{ margin: 1.8rem 0 5rem; } .main_table_frame{ border: none; } .main_table { max-width: var(--main-width); width: 100vw; margin: auto; } .main_table_menu_right_div{ display: none; } .main_table_center { width: 100%; } .main_table_menu{ padding-bottom: 2rem; } .main_table_menu_left_div, .main_table_menu_right_div{ --top: 10%; display: block; position: fixed; top: var(--top); z-index: 1100; margin: 0; border: none; overflow: auto; max-width: 13rem; width: 50%; height: calc(100% - var(--top) - var(--main-bottom-height) - 0.3rem); background-color: transparent; } .main_table_menu_part_close{ --position: -50%; } .main_table_menu_part_open{ --position: -0%; } .main_table_menu_left_div{ left: var(--position); } .main_table_menu_right_div{ right: var(--position); } .main_table_menu{ -ms-overflow-style: none; scrollbar-width: none; overflow: auto; border-bottom: 0.05rem solid var(--main-yellow); margin-top: 0; } .main_table_menu::-webkit-scrollbar { width: 0; height: 0; } .main_table_menu_left_part{ border-radius: 0% 50% 0 0 / 0rem 7rem 0% 0%; border-right: 0.05rem solid var(--main-yellow); } .main_table_menu_right_part{ border-radius: 50% 0% 0 0 / 7rem 0rem 0% 0%; border-left: 0.05rem solid var(--main-yellow); } .side_menu_button_div{ display: block; } } @media (max-width: 848px) { .video_shot{ --width: 60vmin; } } @media (max-width: 480px) { .video_shot{ --width: 60vmin; } .control_button_setting_main{ --button-width: 2.5rem; } } .main_table_center_padding{ padding-top: 8rem; margin-bottom: 2rem; } .main_table_work_place{ position: relative; width: 100%; min-height: 40rem; border: 0.05rem solid var(--main-yellow); margin: auto; background-color: var(--main-background-color); box-sizing: border-box; } .main_table_work_place_pattern{ --width: 11.5rem; position: absolute; width: var(--width); height: var(--width); border: 0.05rem solid var(--main-yellow); border-radius: 50%; left: 50%; top: 0; transform: translateX(-50%) translateY(-63%); background-color: var(--main-background-color); } .main_table_work_place_text{ position: relative; width: 100%; height: fit-content; background-color: var(--main-background-color); color: var(--main-white-dark); font-size: var(--main-font-size); font-weight: 300; font-family: var(--main-font20l); padding: 3rem 3rem 1rem 3rem; box-sizing: border-box; letter-spacing: var(--main-letter-spacing); } .dark_red{ color : var(--main-yellow) !important; font-weight: 500; } .main_table_work_place_text ol { list-style: none;  /* убираем стандартную нумерацию */ counter-reset: li;  /* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */ margin-left: -.5rem; position: relative; } .main_table_work_place_text li:before { counter-increment: li; /* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */ content: counters(li,".") ". "; /* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */ font-weight: 600; font-size: 110%; position:absolute; left: -3.0rem; text-align: right; width: 2.2rem; } .main_table_work_place_text li{ text-align: left; padding-top: 1rem; position: relative; line-height: 1.4; padding-left: 0.4rem; } .main_table_work_place_text li b{ color : var(--main-white-light); letter-spacing: 0.1rem } .main_table_work_place_text .main{ padding-top:30px;} .main_table_work_place_text .firstline{ font-weight: 600; font-size: 110%; } .reglament_hr{ width: 10rem; text-align: left; height: 0.01rem; margin: 2rem 0 1rem; } .pattern_volchok{ position: absolute; left: 50%; top: 0; transform: translateX(-50%) translateY(-74%); } .reglament_header{ font-size: 3.8rem; text-align: center; font-weight: 300; font-family: 'ChtoGdeKogdaRegular'; text-transform: uppercase; line-height: 1.1; color: var(--main-white-light); margin-bottom: 4rem; } @media (max-width: 848px) { .main_table_work_place{ width: 93%; margin-top: 8rem; } .main_table_work_place_text{ padding: 3rem 1rem 1rem 1rem } .main_table_work_place_text ol{ margin-left: -0.7rem; } } .article_text > p{ margin-block-start: 0em; } .article_text b { color: var(--main-white-light); letter-spacing: 0.1rem; } .enc_picture{ position: relative; border: 0.05rem solid var(--main-yellow); width: 100px; height: 100px; background-position: center; background-repeat: no-repeat; background-color: var(--main-background-color); border-radius: 1rem; max-width: 17rem; width: 100%; max-height: 22rem; height: 85vmin; margin-bottom: 2rem; margin-top: 0.3rem; } .left{ float: left; margin-left: 0; margin-right: 2rem; } .right{ float: right; margin-left: 2rem; margin-right: 0; } .center{ margin: auto; } .width20{ width: 20rem; } .width100{ width: 100%; } .width33{ width: rem; } .enc_picture1{ position: relative; border: 0.1rem solid var(--main-yellow); background-position: center; background-repeat: no-repeat; background-color: var(--main-background-color); border-radius: 1rem; max-width: 43rem; max-height: 33rem; height: fit-content; overflow: hidden; box-sizing: border-box; margin-top: 0.3rem; margin-bottom: 2rem; } .enc_picture1 > img{ width: 100%; } .enc_picture1 > div{ position: absolute; bottom: 0.8rem; left: 0rem; background-color: var(--main-yellow); color: var(--main-background-color); font-family: var(--main-font20); font-size: 1.1rem; padding: 0.3vmin 0.6vmin 0.3vmin 2vmin; text-transform: uppercase; } .cancel_float{ clear: both; } @media (max-width: 548px) { .enc_picture{ position: relative; float: none; } .left, .right{ float: none; margin: 0 auto; } } @media (max-width: 480px) { .enc_picture{ position: relative; float: none; } .enc_picture1 > div{ font-size: 4vmin; } .width20{ width: 100%; } } .pattern2{ border-bottom: var(--line-height) solid var(--color); border-left: var(--line-height) solid var(--color); width: var(--width); height: var(--width); box-sizing: border-box; } .pattern2::before{ --width: 47%; --space: 10%; content: ""; position: absolute; border: var(--line-height) solid var(--color); left: var(--space); bottom: var(--space); width: var(--width); height: var(--width); box-sizing: border-box; } .pattern2::after{ --width: 20%; --space: 23%; content: ""; position: absolute; border: var(--line-height) solid var(--color); left: var(--space); bottom: var(--space); width: var(--width); height: var(--width); box-sizing: border-box; } .pattern-line{ position:relative; width: 100%; border-top: 0.16rem solid var(--main-yellow); order-bottom: 0.08rem solid var(--main-yellow); margin: 2rem auto; height: 0rem; box-sizing: border-box; } .pattern-line::before, .pattern-line::after{ --width-dot: 0.2rem; content: ""; display: inline-block; border: 0.1rem solid var(--main-yellow); width: var(--width-dot); height: var(--width-dot); color: var(--main-yellow); cursor: pointer; transform: translateY(-60%) rotate(45deg); position: absolute; top: 50%; background-color: var(--main-background-color); } .pattern-line::before{ left: -0rem; } .pattern-line::after{ right: -0rem; } .stemp_setting_temp{ --height: 216px; --width_temp: 49px; --radius: 6px; } .stamp { --radius: calc(var(--width) / (var(--hcount)* 3)); --size: calc(var(--radius) * 3); --halfsize-minus: calc(0px - calc(var(--size) / 2)); --height: calc(var(--size)* var(--vcount)); position: relative; width: var(--width); height: var(--height); background-image: radial-gradient(transparent, transparent var(--radius), var(--main-yellow) var(--radius), var(--main-yellow)), radial-gradient(transparent, transparent var(--radius), var(--main-yellow) var(--radius), var(--main-yellow)), radial-gradient(transparent, transparent var(--radius), var(--main-yellow) var(--radius), var(--main-yellow)), radial-gradient(transparent, transparent var(--radius), var(--main-yellow) var(--radius), var(--main-yellow)); background-size: var(--size) var(--size), var(--size) var(--size), var(--size) var(--size), var(--size) var(--size); background-position: left var(--halfsize-minus) top var(--halfsize-minus), left var(--halfsize-minus) bottom var(--halfsize-minus), left var(--halfsize-minus) top var(--halfsize-minus), right var(--halfsize-minus) top var(--halfsize-minus); background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; background-color: transparent; margin: 0 auto; padding: calc(var(--radius)* 2.8); box-sizing: border-box; } .stamp::before{ --border-space: calc(100% - var(--radius) * 5.5); content: ""; position: absolute; top: 50%; left: 50%; width: var(--border-space); height: var(--border-space); border: calc(var(--width) / 150) solid var(--main-yellow); transform: translateY(-50%) translateX(-50%); overflow: hidden; } .stamp::after{ content: ""; position: absolute; top: 0; left: 0; width: var(--width); height: 100%; background-image: radial-gradient(var(--main-yellow), var(--main-yellow) var(--radius), transparent var(--radius), transparent), radial-gradient(var(--main-yellow), var(--main-yellow) var(--radius), transparent var(--radius), transparent), radial-gradient(var(--main-yellow), var(--main-yellow) var(--radius), transparent var(--radius), transparent), radial-gradient(var(--main-yellow), var(--main-yellow) var(--radius), transparent var(--radius), transparent); background-size: var(--size) var(--size), var(--size) var(--size), var(--size) var(--size), var(--size) var(--size); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; background-position: left var(--halfsize-minus) top var(--halfsize-minus), left var(--halfsize-minus) bottom var(--halfsize-minus), right var(--halfsize-minus) top var(--halfsize-minus), right var(--halfsize-minus) bottom var(--halfsize-minus); color: #fff; } .game_protocol_div{ position: fixed; width:  100%; max-width: 47rem; max-height: calc(100% - var(--main-bottom-height)); height: 100%; left: 50%; top: 50%; transform: translateX(-50%) translateY(calc(-50% - var(--main-bottom-height) - -1.5rem)); overflow: hidden; order: 0.1rem solid var(--main-yellow-dark); background-color: var(--main-background-color); z-index: 4999; order-radius: 0.5rem; } #protocol{ position: relative; overflow: auto; height: calc(100% - var(--main-bottom-height)); } .protocol_zaglushka{ position: absolute; overflow: hidden; height: calc(100% - var(--main-bottom-height)); z-index: 2000; background-color: #222e; top: 2rem; left: 0; width: 100%; } .protocol_zaglushka > div{ position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); color: var(--main-white-light); font-size: 2rem; font-family: var(--main-font20l); } @media (hover: hover) and (pointer: fine) { .game_protocol_div{ position: fixed; width:  680px; max-width:  680px; height: 800px; max-height: 800px; left: 200px; top: 100px; transform: none; border: 0.1rem solid var(--main-yellow-dark); background-color: var(--main-background-color); z-index: 1000; border-radius: 0.5rem; } #protocol{ height: calc(100% - 2.2rem); } .protocol_zaglushka{ display: none; } } .header_protocol{ position: relative; background-color: var(--main-yellow); color: var(--main-text-black); box-sizing: border-box; width: 100%; height: fit-content; padding: 0.3rem 0.7rem; font-size: 1.3rem; cursor: pointer; } .protocol_off{ display: none; } .protocol_on{ display: block; } .raund_setting{ --height: 5rem; --border-radius: 0.5rem; } .ptc_raund_div{ position: relative; width: 100%; box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; color: var(--main-white-dark); font-size: 1.3rem; font-family: var(--main-font20l); } .ptc_raund_div > div{ position: relative; border: 0.1rem solid var(--main-yellow-dark); box-sizing: border-box; margin: 0.2rem; border-radius: var(--border-radius); background-color: #333; overflow: hidden; } .ptc_raund_number, .ptc_score, .ptc_tvzr_photo, .ptc_zn_photo{ width: var(--height); display: flex; align-items: center; justify-content: center; } .ptc_raund_number > div, .ptc_score > div{ position: relative; font-family: var(--main-font20); font-size: 2.5rem; } .ptc_questions_div{ width: calc(100% - var(--height)*2); background-color: var(--main-yellow-dark) !important; } .ptc_question_div{ --margin: 0.1rem; position: relative; display: flex; flex-wrap: nowrap; box-sizing: border-box; background-color: #333; } .no_first_child{ margin-top: var(--margin); } .ptc_question_info{ width: calc(100% - var(--height)* 2); box-sizing: border-box; } .ptc_question_info > div{ position: relative; box-sizing: border-box; height: 1.8rem; } .ptc_tvzr_photo, .ptc_zn_photo{ width: var(--height); box-sizing: border-box; } .ptc_tvzr_photo, .ptc_zn_photo{ background-size: cover, 93%; background-position: center; background-repeat: no-repeat; } .ptc_name{ } .ptc_zr_name, .ptc_zn_name, .ptc_question_name{ padding: 0.2rem 0.5rem; white-space: nowrap; overflow: hidden; } .ptc_zr_name{ text-align: left; } .ptc_zn_name{ text-align: right; } .ptc_question_name{ --border: 0.02rem solid var(--main-yellow-dark); text-align: center; border-top: var(--border); border-bottom: var(--border); margin: 0 0.3rem; } .close_protocol_button{ --width: 1.2rem; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); width: var(--width); height: var(--width); box-sizing: border-box; } .close_protocol_button > div{ position: absolute; top: 50%; left: 0; transform: translateY(-50%) rotate(45deg); width: 100%; height: 0.14rem; background-color: var(--main-background-color); box-sizing: border-box; } .close_protocol_button > div::after{ content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%) rotate(-90deg); width: 100%; height: 0.14rem; background-color: var(--main-background-color); box-sizing: border-box; } .div_min_height{ min-height: 40rem; } .play_with_znatok{ margin: 1rem; color: var(--main-white-dark); } .play_with_znatok > li{ list-style-type: none; cursor: pointer; } .play_with_znatok > li:hover{ color: var(--main-white-light); } .play_without_znatok{ color: var(--main-white-verydark); margin: 1rem; } .play_without_znatok > li{ list-style-type: none; } .stat_setting{ gap: 0.7rem; } .stat_score_tables_div{ position: relative; width: 100%; padding: 0 1rem; box-sizing: border-box; } .stat_games_sum_div{ position: relative; display: flex; flex-wrap: nowrap; justify-content: space-evenly; margin-bottom: 1rem; } .stat_score_table{ position: relative; max-width: 10rem; min-width: 3.72rem; width: 20%; background-color: var(--main-background-color); } .stat_score_title{ position: relative; background-color: var(--main-white-dark); text-align: center; color: var(--main-background-color); font-size: 1rem; padding: 0.03rem; letter-spacing: 0.05rem; } .stat_score_value{ position: relative; background-color: var(--main-white-veryverydark); border-bottom: 0.2rem solid var(--main-yellow-dark); color: var(--main-yellow-dark); text-align: center; font-size: 1.5rem; padding: 0.03rem; letter-spacing: 0.05rem; height: 1.9rem; } .stat_all_score_div{ position: relative; display: flex; justify-content: center; flex-wrap: nowrap; } .dsbl{ opacity: 0.2; } .stat_score_title, .stat_score_value{ transition-property: all; transition-timing-function: ease-out; transition-duration: 0.3s; } @media (max-width: 1449px) { .stat_setting{ gap: 0.4rem; } } @media (max-width: 848px) { .stat_all_score_div { flex-direction: column; } .stat_all_lose_score{ flex-direction: row-reverse } } @media (max-width: 480px) { .stat_all_lose_score, .stat_all_win_score{ width: 47%; } .stat_all_lose_score { flex-direction: row; } .stat_all_score_div{ flex-wrap: wrap; flex-direction: row; } .stat_games_sum_div{ flex-wrap: wrap; } .stat_all_lose_score > div:nth-child(1) { order: 6; } .stat_all_lose_score > div:nth-child(2) { order: 5; } .stat_all_lose_score > div:nth-child(3) { order: 4; } .stat_all_lose_score > div:nth-child(4) { order: 3; } .stat_all_lose_score > div:nth-child(5) { order: 2; } .stat_all_lose_score > div:nth-child(6) { order: 1; } } .culisa{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #111d; z-index: 1000; } .culisa_off{ display: none; } .culisa_on{ display: block; } .top_rectangle{ position: relative; top: 0rem; width: var(--main-width); height: 0px; margin: auto; color: white; z-index: 900; } .top_rectangle_in{ position: absolute; top: 0; font-size: 1.2rem; } .rectangles_button{ --width-dot: 0.15rem; --space-between: -1.2rem; position: absolute; text-align: center; display: block; box-sizing: border-box; width: fit-content; cursor: pointer; } .rectangle_button_login_setting{ right: calc(0% - var(--space-between)); } .rectangles_button::before , .rectangles_button::after{ content: ""; border: 0.1rem solid var(--main-yellow); width: var(--width-dot); height: var(--width-dot); cursor: pointer; transform: translateY(-50%) rotate(45deg); position: absolute; top: 50%; } .rectangles_button::before{ left: var(--space-between); } .rectangles_button::after{ right: var(--space-between); } .uppercase_button{ text-transform: uppercase; } .yellow_button{ color: var(--main-yellow); } .stamp_div{ position: absolute; top: 50%; left: 50%; width: fit-content; height: fit-content; transform: translateY(-50%) translateX(-50%); font-size: 1.4rem; font-family: var(--main-font20l); } .stamp_setting_login { --width: 400px; --hcount: 15; --vcount: 22; overflow: hidden; } .control_button_login{ position: absolute; left: calc(0px - var(--button-width) * 1.5); top: 0; } .control_button_setting_login{ --button-width: 2.5rem; } .login_div{ position: relative; width: 100%; height: 100%; box-sizing: border-box; padding: 46% 1% 0; color: var(--main-white-light); background-image: url(/images/owl_logo_white.svg), url(/images/login_pattern.svg); background-repeat: no-repeat; background-size: 54%, 99%; background-position: 50% 12%, 50% 1%; background-color: var(--main-background-color); text-align: center; overflow: hidden; z-index: 1001; line-height: 2; } .registration_change, .registration_field{ position: relative; width: 80%; height: 3rem; border: 1px solid var(--main-white-verydark); border-radius: 2rem; margin: auto; margin-top: 0.5rem; font-size: 1.5rem; font-family: var(--main-font20l); color: var(--main-white); background-color: transparent; box-sizing: border-box; outline: none; } input.registration_field{ text-align: left; padding: 0 1rem; } input:placeholder-shown { text-align: left; } input:focus { text-align: left; } input::-webkit-input-placeholder       {opacity: 1; transition: opacity 0.3s ease;} input::-moz-placeholder                {opacity: 1; transition: opacity 0.3s ease;} input:-moz-placeholder                 {opacity: 1; transition: opacity 0.3s ease;} input:-ms-input-placeholder            {opacity: 1; transition: opacity 0.3s ease;} input:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;} input:focus::-moz-placeholder          {opacity: 0; transition: opacity 0.3s ease;} input:focus:-moz-placeholder           {opacity: 0; transition: opacity 0.3s ease;} input:focus:-ms-input-placeholder      {opacity: 0; transition: opacity 0.3s ease;} .registration_change > li{ text-transform: uppercase; font-family: var(--main-font20); font-size: 1.3rem; position: relative; display: inline-block; width: 40%; margin: 0 0.5rem; top: 50%; transform: translateY(-50%); line-height: 1; cursor: pointer; } .registration_button_press::before{ content: ""; position: absolute; width: 123%; height: 160%; left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%); border-radius: 2rem; background-color: #999; z-index: -1; } .enter_data_div{ position: relative; margin-top: 1rem; box-sizing: border-box; } .enter_button{ margin-top: 1.5rem; cursor: pointer; } .forget_password{ position: relative; font-size: 0.9rem; width: fit-content; margin: 0.3rem; left: 50%; transform: translateX(-180%); } .user_name{ font-size: 2rem; color: var(--main-yellow); } @media (max-width: 1449px) { .top_rectangle{ width: 100%; min-width: 320px; } .top_rectangle_in{ display: none; } #login_button{ display: block; position: absolute; margin-right: 2rem } } @media (max-width: 916px) { .top_rectangle{ width: 100%; min-width: 320px; } .top_rectangle_in{ display: none; } #login_button{ display: block; position: absolute; margin-right: 2rem } .rectangles_button{ right: 0; } } @media (max-width: 548px) { .control_button_login{ position: absolute; top: calc(0px - var(--button-width) * 1.5); left: 0; } } .partners_list{ position: relative; display: flex; flex-direction: column; margin: 2rem auto 0; width: 50%; justify-content: space-around; } .partners_list > div{ position: relative; margin: 0 auto 3rem; } .partner1, .partner3, .partner5{ width: 60%; } .partner2, .partner4, .partner6{ width: 100%; } .partners_list img{ width: 100%; } .intellectual_defence_button{ position: relative; width: 85%; margin: 0.5rem auto 1rem; box-sizing: border-box; padding: 1.0rem 0; border: 0.05rem solid var(--main-yellow); border-image: linear-gradient(90deg, var(--main-yellow), var(--main-yellow-light)); border-image-slice: 1; text-align: center; background-color: var(--main-background-color); font-family: var(--main-font20); height: fit-content; text-align: center; } .rectangles_button_intellectual_defence_setting{ position: relative; top: 0; font-size: 1.1rem; text-transform: uppercase; color: var(--main-yellow); font-family: var(--main-font20); margin: auto; } .letopis_divide{ position: relative; text-align: center; color: var(--main-white-light); font-size: 1.1rem; } .letopis_divide > li{ list-style-type	: none; line-height: 1.5; } .letopis_divide > li > a{ color: inherit; } .letopis_divide > li:first-child{ color: var(--main-white-dark); text-transform: uppercase; font-size: 0.9rem; margin: 0rem 0 0.5rem; padding: 0.3rem 0 0.3rem; } .letopis_divide > li:last-child{ margin: 0rem 0 1.5rem; } .letopis_divide_select{ background-color: var(--main-yellow); color: var(--main-background-color) !important; font-family: var(--main-font20); font-weight: 600; } .letopis_item_select{ color: var(--main-yellow); } .letopis_period, .letopis_period > li, .letopis_period > li::before{ transition-property: all; transition-timing-function: ease-out; transition-duration: 0.3s; } .letopis_period{ border: 0px solid red; overflow: hidden; margin-bottom: 1rem; } .letopis_period_off{ height: 130px; } .letopis_period_on{ height: fit-content; } .letopis_title_picture_div{ --width: 52%; border: 0.05rem solid var(--main-yellow-dark); width: var(--width); height: 6rem; margin: 1rem auto 0.5rem; background-position: center; background-size: 85%; background-repeat: no-repeat; } .letopis_period_name{ position: relative; text-align: center; font-size: 1.1rem; margin: 0 auto 0.7rem; font-family: var(--main-font20); } .letopis_period > li{ position: relative; list-style-type	: none; text-align: center; font-size: 1.3rem; line-height: 1.4; color: var(--main-white-light); margin: auto; } .letopis_period > li:hover, .letopis_period > li:hover::before, .letopis_period > li:hover::after{ color: var(--main-yellow); border-color: var(--main-yellow); } .letopis_period > li::before, .letopis_period > li::after{ --width-dot: 0.20rem; --space-between: -1.0rem; border-color: var(--main-white-light); } .season_info{ color: var(--main-white-dark); font-size: var(--main-font-size); letter-spacing: var(--main-letter-spacing); font-family: var(--main-font20l); position: relative; margin: 2rem 2rem 2rem 2rem; } .divide_header{ font-size: 3.8rem; text-align: center; font-weight: 300; font-family: 'ChtoGdeKogdaRegular'; text-transform: uppercase; line-height: 2.1; } .big_photo_div_setting{ width: 20rem; height: 21rem; position: absolute !important; top: 0; left: 50%; transform: translateX(-50%) translateY(-100%); background-size: 93%; background-position: center; background-repeat: no-repeat; } .fio_big_line_setting{ height: 4rem; font-size: 3rem; font-family: 'ChtoGdeKogdaRegular'; position: absolute; top: 0; left: 50%; transform: translateX(-50%) translateY(-50%); color: var(--main-background-color); } .fio_big_line_setting > p.label::after{ content: " *"; } .main_table_center_padding_znatoki{ padding-top: 24rem !important; margin-bottom: 2rem; } .main_table_work_place_znatok{ position: relative; width: 94%; min-height: 40rem; order: 0.05rem solid var(--main-yellow); margin: auto; background-color: var(--main-background-color); box-sizing: border-box; padding: 5rem 2rem; border: 0.05rem solid var(--main-yellow-dark); border-image: linear-gradient(180deg, var(--main-yellow), transparent 60%); border-image-slice: 1; color: var(--main-yellow); } .biography_div, .awards_list_div{ position: relative; width: 100%; color: var(--main-white-dark); font-size: var(--main-font-size); font-family: var(--main-font20l); padding-top: 1.5rem; margin-bottom: 1rem; line-height: 1.2; letter-spacing: var(--main-letter-spacing); } .biography_div::before, .awards_list_div::before{ width: 100%; position: absolute; top: 0; left: 0; color: var(--main-white-light); font-family: var(--main-font20); font-size: var(--main-font-size); } .biography_div::before{ content: "Краткая биография"; } .awards_list_div::before{ content: "Награды"; } .biography_div b{ color: var(--main-white-light); letter-spacing: 0.1rem; } .stamp_setting_award{ -height: 170px; -width_temp: 29px; -radius: 3px; } .stamp_setting_award { --width: 7rem; --hcount: 13; --vcount: 18; } .award_div{ position: relative; display: inline-block; width: fit-content; margin: 1rem 0.4rem; } .award_text{ position: relative; text-align: center; font-size: 0.9rem; font-family: var(--main-font20l); width: 95%; background-color: var(--main-yellow); color: var(--main-background-color); margin: 0.5rem auto; } .award_hr_owl, .award_br_owl, .award_magister, .award_epaulet_сapitan{ position: relative; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; } .award_hr_owl{ background-image: url(/images/awards/award_crystal_owl.svg); background-size: 82%; } .award_br_owl{ background-image: url(/images/awards/award_diamond_owl.svg); background-size: 63%; } .award_magister{ background-image: url(/images/awards/award_magister_star.svg); background-size: 89%; } .award_epaulet_сapitan{ background-image: url(/images/awards/award_epaulet.svg); background-size: 82%; } .mini_statistic { color: var(--main-yellow); font-family: var(--main-font20); font-size: var(--main-font-size); } hr{ position: relative; left: 0; border: none; background-color: var(--main-yellow-dark); width: 40%; height: 0.01rem; text-align: left; } .snoska{ position: relative; text-align: left; border-top: 0.01rem solid var(--main-yellow-dark); width: 70%; padding-top: 15px; padding-left: 10px; line-height: 1.3; color:  var(--main-yellow-dark); font-size: 1.1rem; } .snoska::before{ content: "*"; position: absolute; top: 15; left: 0px; color:  var(--main-yellow-dark); } .video_fragment{ width: 100%; height: 0; border: 0.1rem solid var(--main-yellow-opacity); border-radius: 0.6rem; overflow: hidden; box-sizing: border-box; } .game_screen_image_div{ position: relative; display: flex; width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: space-evenly; flex-wrap: wrap; row-gap: 1rem; } .game_screen_image{ border: 0.1rem solid var(--main-yellow); border-radius: 0.6rem; overflow: hidden; box-sizing: border-box; } .table_type_off{ display: none !important; } table_type_on{ display: block; } #second_type{ display: flex; flex-wrap: wrap; justify-content: space-evenly; gap: 1.4rem 0; } .person_photo_div{ position: relative; width: 33%; max-width: 298px; min-width: 198px; margin: 0 .4rem; } .person_photo{ position: relative; width: 100%; height: 313px; background-position: center; background-size: cover; background-repeat: no-repeat; border: 0.1rem solid var(--main-yellow-dark); border-radius: 0.5rem; } .person_name{ osition: relative; olor: var(--main-yellow); ont-size: 1.2rem; ont-family: var(--main-font20l); ext-align: center; argin-top: 0.5rem; position: absolute; bottom: 0.8rem; left: 0rem; background-color: var(--main-yellow); color: var(--main-background-color); font-family: var(--main-font20); font-size: 1.1rem; padding: 0.3vmin 0.6vmin 0.3vmin 2vmin; text-transform: uppercase; } @media (max-width: 548px) { .fio_big_line_setting{ font-size: 8.4vw; } } .main_info_div{ position: relative; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: flex-start; margin: 2rem 0 4rem; } .main_info_text_div{ width: 26rem; min-width: 26rem; min-height: 10rem; margin-left: 1rem; transform: translateY(4rem) ; } .season_cycle_header{ color: var(--main-white-light); text-align: left; font-weight: 300; font-family: 'ChtoGdeKogdaRegular'; font-size: 4rem; text-transform: uppercase; line-height: 1.1; } .series_name{ position: absolute; transform: translateX(2.3rem) translateY(2rem); } .series_name_letopis{ position: absolute; transform: translateX(2.3rem) translateY(0rem); } .season_name{ position: relative; transform: translateX(2.3rem); width: fit-content; } .big_tablo_div_setting{ width: 26rem; min-width: 26rem; min-height: 15rem; margin-top: 0.5rem; } .double_border_div{ position: relative; border: 0.05rem solid var(--main-yellow-dark); border-image: linear-gradient(90deg, var(--main-yellow), var(--main-yellow-light)); border-image-slice: 1; text-align: center; color: var(--main-yellow); background-color: var(--main-background-color); } .double_border_div::before{ --double-border-size: 6%; --double-border-width1: calc(100% - var(--double-border-size)); --double-border-height1: calc(100% - var(--double-border-size)/0.6); --double-border-width: calc(100% - 1.5rem); --double-border-height: calc(100% - 1.5rem); content: ""; position: absolute; left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%); width: var(--double-border-width); height: var(--double-border-height); border: 0.05rem solid var(--main-yellow-dark); border-image: linear-gradient(90deg, var(--main-yellow), var(--main-yellow-light)); border-image-slice: 1; } .game_number_div{ position: relative; margin: auto; min-width: 13rem; width: fit-content; border-bottom: 0.05rem solid var(--main-yellow-dark); border-image: linear-gradient(90deg, var(--main-yellow), var(--main-yellow-light)); border-image-slice: 1; font-size: 1.4rem; text-align: center; padding: 1rem 0 0.7rem; } .big_score_div{ position: relative; display: flex; justify-content: center; margin-top: 1rem; } .big_score_div > .score{ text-align: center; width: 8rem; font-size: 1.3rem; font-family: var(--main-font20l); } .big_score_div > .score img{ width: 70%; margin: 0.4rem 0.0rem 0; } .team_div{ position: relative; width: 100%; margin-bottom: 3rem; border-top: 0.1rem solid var(--main-yellow); overflow: hidden; } .team_name{ position: relative; min-width: 14rem; width: fit-content; background-color:  var(--main-yellow); font-size: 1.4rem; padding: 0.3rem 2rem; font-family: var(--main-font20); } .team_photos_div, .telezriteli_win_div{ position: relative; width: 100%; min-height: 15rem; display: flex; flex-wrap: wrap; align-content: space-around; justify-content: space-around; margin-top: 1rem; } .photo_size{ --width: 17rem; width: var(--width); height: calc(var(--width) / 1.54); } .znatok_photo{ border: 0.05rem solid var(--main-yellow); border-radius: 0.5rem; background-color:  var(--main-background-color); background-size: contain, 57%; background-repeat: no-repeat; background-position: center, center 40% } .fio_line_setting{ height: 1.7rem; bottom: 2%; font-size: 1.1rem; } .fio_line{ position: absolute; width: 100%; background-image: url(/images/fio_line.svg); background-position: center center; background-repeat: no-repeat; background-size: contain; text-align: center; } .fio_line p{ position: absolute; margin: 0; left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%); white-space: nowrap; } .fio_line_black{ color: var(--main-background-color); } .information_button{ --width: 0.8rem; width: var(--width); height: var(--width); position: absolute; border: 0.05rem solid var(--main-white-light); transform: rotate(45deg); right: 7%; top: 7%; cursor: pointer; } .information_button::before{ content: "i"; color: var(--main-white-light); position: absolute; font-size: 0.7rem; transform: translateY(-50%) translateX(-50%) rotate(-45deg); left: 50%; top: 50%; } .close_button{ color: var(--main-white-light); position: absolute; right: 10%; top: 10%; cursor: pointer; } .close_button::before, .close_button::after{ content: ""; --width: 0.99rem; position: absolute; width: var(--width); height: 0; border-top: 0.05rem solid var(--main-white-light); left: 50%; top: 50%; } .close_button::before{ transform: translateY(-50%) translateX(-50%) rotate(45deg); } .close_button::after{ transform: translateY(-50%) translateX(-50%) rotate(-45deg); } .game_info_div{ color: var(--main-yellow); font-size: 1.9rem; display: flex; justify-content: flex-start; align-content: flex-start; flex-wrap: wrap; white-space: nowrap; box-sizing: border-box; font-family: var(--main-font20l); margin: 1.5rem 0; width: 75%; } .game_info_div > div:nth-child(odd){ width: 30%; text-align: right; box-sizing: border-box; padding-right: 0.5rem; } .game_info_div > div:nth-child(even){ width: 70%; box-sizing: border-box; } .game_info_div_after_game{ font-size: 1.3rem; color: var(--main-white-light); box-sizing: border-box; font-family: var(--main-font20l); margin: 0.5rem 0; width: 75%; } .game_info_div_after_game > div{ width: 100%; margin-bottom: 1rem; } .game_info_div_after_game > div.dark{ color: var(--main-yellow); } .main_info_text{ font-family: var(--main-font20l); font-size: 1.4rem; margin-top: 1rem; color: var(--main-yellow); } .main_info_text_div div:last-child{ margin-bottom: 2rem; color: var(--main-white-light); } .main_info_text_div div:first-child{ color: var(--main-white-light); } /* весь контейнер поддерживает перспективу */ .flip-container { -webkit-perspective: 1000; perspective: 1000px; transform: rotateY(00deg); margin: 1.5rem 0; } /* переверните сторону при проведении мышью */ .flip-containe .flippe, .flip-container.hover .flipper { transform: rotateY(-180deg); } .flip-container { position: relative; } /* здесь находится скорость перевертывания */ .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } /* скройте обратную сторону во время переворота */ .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; box-sizing: border-box; transform: rotateX(0deg); } /* лицевая сторона размещена над обратной */ .front { z-index: 2; } /* обратная, изначально скрытая сторона */ .back { transform: rotateY(180deg); overflow: hidden; z-index: 10; } .back_text p{ color: var(--main-white-dark); text-align: left; font-size: 1.0rem; margin: 0.3rem 0 0 0; font-family: var(--main-font20l); } .back_text > div> div> p:first-child, .back_text > div> div> p:last-child , .back_text > div> p:first-child, .back_text > div> p:last-child { color: var(--main-yellow); font-family: var(--main-font20); font-size: 1.2rem; } .back_text > div> p:first-child{ margin: 0; } .znatok_photo > .znatok_photo_scroll { width: 100%; height: 100%; position: relative; overflow: hidden; padding: 0.1rem 0.6rem; box-sizing: border-box; } .znatok_photo > .content,  .znatok_photo_scroll > .content  { width: 99%; height: fit-content; box-sizing: border-box; } .znatok_awards_atom::before, .znatok_awards_star::before { --award_space: 0.5rem; content: ""; position: absolute; left: var(--award_space); top: var(--award_space); background-size: 13%; width: 100%; height: 100%; background-repeat: no-repeat; filter: drop-shadow(0px 0px 8px #fffc); } .znatok_awards_atom::before { background-image: url(/images/atom.svg); } .znatok_awards_star::before { background-image: url(/images/star.svg); } .telezritel_win_div{ --width: 9rem; position: relative; width: var(--width); height: fit-content; box-sizing: border-box; padding: 0.3rem; } .telezritel_win_photos_div{ --width: 9rem; --padding: 0.3rem; position: relative; height: calc(var(--width) * 1.5); border: 0.1rem solid var(--main-yellow-dark); box-sizing: border-box; width: 100%; padding: var(--padding); color: var(--main-yellow-dark); font-family: var(--main-font20l); text-align: center; font-size: 1.1rem; background-color: var(--main-background-color); overflow: hidden; } .telezritel_win_award::before{ content: ""; position: absolute; left: var(--padding); top: 61%; background-image: url(/images/corner.svg); background-size: 23%; width: 100%; height: 100%; background-repeat: no-repeat; filter: drop-shadow(0px 0px 8px #fff3); } .telezritel_win_photos_div > p{ margin: 0; } .telezritel_win_photo{ position: relative; width: 100%; height: 60%; box-sizing: border-box; background-color: var(--main-background-color); margin-bottom: 1.6rem; border-radius: 0.5rem; background-image: url(/images/owl_logo.svg); background-position: center; background-repeat: no-repeat; background-size: 100%; box-shadow: inset 0.0rem 0.0rem 0.3rem 0 var(--main-yellow-opacity); overflow: hidden; } .blitz{ --content: "«Блиц»"; } .superblitz{ --content: "«Суперблиц»"; } .13sector{ --content: "<nobr>«13 сектор»</nobr>"; } .blitz::after, .superblitz::after, .sector13::after{ content: var(--content); position: absolute; bottom: 0; right: 0; background-color: var(--main-yellow); color: var(--main-text-black); padding: 0rem 0.5rem; border-radius: 0.5rem 0rem 0rem 0rem; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.05rem; } .no_photo{ background-size: 90% !important; background-position: 50% 20%; } .no_photo::after{ content: "нет фото"; position: absolute; top: 50%; left: 50%; transform: translateY(62%) translateX(-50%); } .telezritel_win_div > p{ position: relative; margin: 1rem 0 0 1.7rem; color: var(--main-white-light); font-family: var(--main-font20l); font-size: 1.1rem; } .telezritel_win_div > p::before{ content: ""; --width: 0.8rem; width: var(--width); height: var(--width); position: absolute; border: 0.05rem solid var(--main-white-light); transform: rotate(45deg); left: -1.4rem; top: 0.1rem; cursor: pointer; } .telezritel_win_div > p::after{ content: "?"; color: var(--main-white-light); position: absolute; font-size: 0.7rem; transform: translateY(-50%) translateX(-50%); left: -0.97rem; top: 0.55rem; } .teleritels_sector{ position: absolute; bottom: 0; right: 0; background-color: var(--main-yellow); color: var(--main-text-black); padding: 0rem 0.5rem; border-radius: 0.5rem 0rem 0rem 0rem; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.05rem; } .blur-score-small{ --blur-score: 7px; } .blur-score-big{ --blur-score: 21px; } .blur_score{ filter: blur(var(--blur-score)); } .div_off{ height: 0px; margin-bottom: 0px; border-top: 0rem solid var(--main-yellow-dark); } .div_on{ margin-bottom: 3rem; border-top: 0.1rem solid var(--main-yellow-dark); } .div_on, .div_off ,.blur-score-big, .blur-score-small { transition-property: all; transition-timing-function: ease-out; transition-duration: 0.5s; } .fio_line_setting_tablo{ height: 2.2rem; bottom: 0%; font-size: 1.3rem; bottom: 0; left: 50%; transform: translateY(34%) translateX(-50%); color: var(--main-background-color); cursor: pointer; } .telezriteli_lose_header{ margin: 1rem 1rem; color: var(--main-yellow); font-family: var(--main-font20l); font-size: 1.2rem; } .columns{ box-sizing: border-box; padding: 0 1rem; color: var(--main-white-light); font-family: var(--main-font20l); font-size: 1.1rem; column-count: 2; column-width: auto; column-rule-color: pink; column-gap: 5%; margin: 1rem 1rem; } .columns ol{ margin: 0; } .columns li{ list-style-position: outside; } @media (max-width: 1449px) { .big_tablo_div_setting { --width: 90vw; --max-width: 26rem; max-width: var(--max-width); width: var(--width); height: calc(var(--width) / 1.73); max-height: calc(var(--max-width) / 1.73); min-width: 10vw; margin-top: 0.5rem; order: 2; } .main_info_text_vid{ --width: 90vw; --max-width: 26rem; max-width: var(--max-width); width: var(--width); min-width: 10vw; order: 1; } .columns{ column-count: 2; } .series_name{ transform: translateX(1.5rem) translateY(2rem); } .series_name_letopis{ transform: translateX(1.5rem) translateY(0rem); } } @media (max-width: 848px) { .big_tablo_div_setting { --width: 90vw; --max-width: 26rem; max-width: var(--max-width); width: var(--width); height: calc(var(--width) / 1.73); max-height: calc(var(--max-width) / 1.73); min-width: 10vw; margin-top: 0.5rem; order: 1; } .main_table_center { width: 100%; padding-top: 1rem; } .main_info_div{ margin-top: 7rem; } .main_info_text_div{ --width: 90vw; --max-width: 26rem; max-width: var(--max-width); width: var(--width); min-width: 10vw; order: 2; transform: translateY(1rem) ; } .series_name, .series_name_letopis{ left: 50%; white-space: nowrap; } .series_name{ transform: translateX(-50%) translateY(2rem); } .series_name_letopis{ transform: translateX(-50%) translateY(0rem); } .columns{ column-count: 2; } } @media (max-width: 480px) { .columns{ column-count: 1; } } .menu_name{ font-size: 1.2rem; color: var(--main-yellow); font-family: var(--main-font20l); width: 100%; text-align: center; font-weight: 300; } .series_list{ font-size: 1.2rem; font-family: var(--main-font20l); color: var(--main-white-verydark); list-style-type: none; list-style-position: inside; width: 8.1rem; margin: 0.5em auto; } .series_list::before{ content: ""; background-image: url(/images/pattern1.svg); background-repeat: no-repeat; height: 35px; position: relative; width: auto; display: block; } .series_list::after{ content: ""; background-image: url(/images/pattern1.svg); background-repeat: no-repeat; height: 35px; position: relative; width: auto; display: block; transform: rotate(180deg); } .series_list div{ } .series_list div.current{ list-style-type: circle; color: var(--main-yellow); font-family: var(--main-font20); cursor: pointer; } .series_list div.current::before{ --width-dot: 0.12rem; content: ""; display: inline-block; border: 0.1rem solid var(--main-yellow); width: var(--width-dot); height: var(--width-dot); color: var(--main-yellow); font-family: var(--main-font20); cursor: pointer; transform: rotate(45deg); vertical-align: middle; margin-right: 0.6rem; } .series_list div.active{ color: var(--main-white-light); cursor: pointer; } .game_pattern_small_div{ --width: 8rem; border: 0.05rem solid var(--main-yellow); margin: auto; width: var(--width); height: var(--width); color: var(--main-yellow); font-family: var(--main-font20l); overflow: hidden; margin-top: 1.0rem; margin-bottom: 1.0rem; cursor: pointer; } .game_pattern_small_div:hover{ background-color: var(--main-backgroundcolor-selection); } .game_name{ width: 100%; text-align: center; font-size: 1.0rem; margin: 0.4rem 0; } .small_score_div{ display: flex; justify-content: center; } .small_score_div > .score{ text-align: center; width: 40%; font-size: .8rem; } .small_score_div > .score img{ width: 70%; margin: 0.2rem 0.4rem 0; } .game_date{ width: 100%; text-align: center; font-size: 1.1rem; margin: 0.7rem 0; } .znzr_menu > div:first-child{ margin-top: 1rem; } .znzr_menu > div:not(:first-child){ margin-top: 1.5rem; } .menu_list_divide{ position: relative; text-align: center; font-size: 1.1rem; box-sizing: border-box; color: var(--main-white-light); overflow: hidden; } .menu_rank{ position: relative; box-sizing: border-box; width: fit-content; margin: 0 auto 0.5rem; text-transform: uppercase; font-family: var(--main-font20); color: var(--main-yellow); cursor: pointer; } .menu_list_divide li{ list-style-type	: none; line-height: 1.5; } .menu_list_divide li.missing{ color: var(--main-white-dark); } .menu_list_divide li > a{ olor: inherit; color: var(--main-white-light); } .menu_list_divide li span{ color: var(--main-white-dark); } .menu_rank_period{ overflow: hidden; } .fixed_footer_on, .fixed_footer_off, .current, .active ,.letopis_divide > li:first-child ,.main_table_menu_left_div, .main_table_menu_right_div { transition-property: all; transition-timing-function: ease-out; } .fixed_footer_on, .fixed_footer_off, .letopis_divide > li:first-child, .menu_list_divide ,.main_table_menu_left_div, .main_table_menu_right_div { transition-duration: 0.3s; } .current, .active{ transition-duration: 0.5s; } .forum_header{ font-size: 3.8rem; text-align: left; font-weight: 300; font-family: 'ChtoGdeKogdaRegular'; text-transform: uppercase; line-height: 1.1; color: var(--main-white-light); margin-bottom: 1rem; } .forum_comment{ font-size: 1.3rem; color: var(--main-white-dark); font-family: var(--main-font20l); } .themes_messages_div{ } .themes_messages_div > div:first-child{ margin-top: 0; } .themes_messages_div > div:nth-child(odd){ background-color: var(--main-list-rotation-color-light); } .themes_messages_div > div:nth-child(even){ background-color: var(--main-list-rotation-color-dark); } .theme_div, .theme_div_header{ position: relative; display: flex; align-content: center; flex-wrap: wrap; font-size: 1.3rem; font-family: var(--main-font20l); height: 4rem; border-color: var(--main-yellow-dark); border-style: solid; border-width: 0.05rem 0; margin: 0.5rem 0; padding: 0rem 1rem 0 2rem; gap: 2rem; letter-spacing: var(--main-letter-spacing); color: var(--main-yellow-dark); } .theme_div_header{ margin-top: 2rem; border-width: 0; font-family: var(--main-font20); } .theme_name{ width: 1%; font-family: var(--main-font20); flex-grow: 1; } .theme_messages{ width: 7%; text-align: right; min-width: 5.3rem; color: var(--main-white-dark); } .theme_messages_yellow{ color: var(--main-yellow-dark); } .theme_messages_new{ width: 7%; text-align: right; min-width: 3.6rem; } .theme_message_last{ color: var(--main-white-dark); width: 13%; } .theme_message_last_header{ width: 13%; min-width: 6rem; } .theme_name , .theme_messages , .theme_messages_new , .theme_messages_all , .theme_message_last{ align-self: center; } .pages_count_div{ position: relative; display: flex; } .page_number, .page_number_select{ font-size: 1.2rem; text-align: center; margin: 1rem 0.3rem; padding: 0.2rem; } .page_number{ color: var(--main-yellow-dark); width: 1rem; } .page_number_select{ color: var(--main-text-black); background-color: var(--main-yellow-dark); width: 2.4rem; } .message_div{ position: relative; display: flex; width: 100%; min-height: 15rem; border-color: var(--main-yellow-dark); border-style: solid; border-width: 0.05rem; letter-spacing: var(--main-letter-spacing); font-family: var(--main-font20l); margin: 2rem 0rem; background-color: var(--main-list-rotation-color-light) !important; box-sizing: border-box; } .message_data_div{ position: relative; display: flex; flex-direction: column; height: 100%; width: 8%; flex-grow: 1; align-items: center; } .user_data_div{ position: relative; box-sizing: border-box; width: 12rem; border-color: var(--main-yellow-dark); border-style: solid; border-width: 0 0.05rem 0 0; padding: 1rem; font-size: 1.1rem; } .message_text_div{ position: relative; box-sizing: border-box; border-color: var(--main-yellow-dark); border-style: solid; border-width: 0.05rem 0; flex-grow: 5; width: 100%; min-height: 10rem; color: var(--main-white-dark); font-size: 1.3rem; padding: 1rem; background-color: var(--main-background-color); } .message_info_div{ display: flex; justify-content: space-between; } .message_dop_div{ } .message_info_div, .message_dop_div{ position: relative; box-sizing: border-box; width: 100%; height: 2.4rem; padding: 0.5rem 1rem; color: var(--main-white-dark); font-size: 1.1rem; } .message_nick{ font-family: var(--main-font20); color: var(--main-yellow-dark); margin-bottom: 1rem; } .new_message{ color: var(--main-yellow-dark); scroll-margin-top: 2rem; } .message_nick_age{ color: var(--main-yellow-dark); margin-bottom: 0.5rem; } .message_nick_registration_date{ position: relative; color: var(--main-white-verydark); padding: 1.3rem 0 0 0; } .message_nick_registration_date{ position: relative; color: var(--main-white-verydark); } .message_nick_registration_date::before{ content: "Регистрация: "; position: absolute; left: 0; top: 0; } .message_nick_registration_place{ position: relative; color: var(--main-yellow-dark); } .message_nick_registration_place::before{ content: "Место: "; color: var(--main-white-verydark); } .hidden_div, .theme_div_header_off, .messages_div_header_off, .message_area_off{ display: none; } .theme_div_header_on, .messages_div_header_on{ display: flex; } .message_area_on{ display: block; } .messages_div_header{ position: relative; width: 100%; flex-direction: column; margin: 2rem 0 .5rem; } .message_header_line{ width: 100%; margin: 0.8rem 0 0.5rem; } .message_header_line > div{ display: inline-block; vertical-align: middle; } .message_theme_name{ font-family: var(--main-font20l); color: var(--main-white-light); font-size: 1.2rem; margin: 0 0.5rem; } .pages{ font-size: 1.2rem; color: var(--main-yellow); user-select: none; } .pages li{ display: inline-block; list-style-type: none; padding: 0.2rem 0.3rem; margin: 0.0rem; cursor: default; } .pages >a >li:hover{ background-color: var(--main-yellow-dark); color: var(--main-background-color); cursor: pointer; } .page_select{ background-color: var(--main-yellow); color: var(--main-background-color); width: 2.5rem; text-align: center; } .control_button_setting_forum{ --button-width: 1.6rem; } .editor_div1{ --border-width: 1px; --border-length1: 30%; --border-length2: 80%; --border-color: var(--main-yellow-dark); --second-border-margin: 1.2rem; position: relative; margin-top: 2rem; padding: calc(var(--second-border-margin)); width: 100%; height: 300px; background-color: var(--main-list-rotation-color-light); background-image: linear-gradient(to right, var(--border-color) 0%, var(--border-color) var(--border-length1), transparent var(--border-length1), transparent var(--border-length2), var(--border-color) var(--border-length2), var(--border-color) 100%), linear-gradient(to bottom, var(--border-color), var(--border-color)), linear-gradient(to left, var(--border-color) 0%, var(--border-color) var(--border-length1), transparent var(--border-length1), transparent var(--border-length2), var(--border-color) var(--border-length2), var(--border-color) 100%), linear-gradient(to top, var(--border-color), var(--border-color)); background-size: calc(100% - 2px) var(--border-width), var(--border-width) calc(100% - 2px); background-position: top center, center right, bottom center, center left; background-repeat: no-repeat; box-sizing: border-box; } .editor_place{ --border-width: 0; --second-border-margin: 0rem; position: relative; width: calc(100% - var(--second-border-margin)*2); height: calc(85% - var(--second-border-margin)*2); top: 0%; left: 50%; transform: translateX(-50%) translateY(-0%); border-width: 0px; background-color: var(--main-list-rotation-color-light); color: var(--main-white-dark); font-size: 1.2rem; z-index: 1000; resize: none; padding: 1rem; } .editor_place:focus{ outline: none; } @media (max-width: 848px) { .forum_header , .forum_comment , .themes_div_header , .messages_div_header , .themes_messages_div { padding-left: 1.2rem; padding-right: 1.2rem; box-sizing: border-box; } .theme_div, .theme_div_header{ gap: 1rem; } } @media (max-width: 548px) { .message_div{ flex-direction: column; } .user_data_div, .message_data_div{ width: 100%; border-color: transparent; } .message_data_div{ background-color: var(--main-background-color); } .message_nick_registration_date{ padding: 0; } .message_nick_registration_date::before{ content: "Регистрация: "; position: relative; } .message_text_div{ border-top-width: 0; min-height: 0; } .message_info_div{ background-color: var(--main-background-color); border-top: 0.05rem solid var(--main-white-verydark); width: 92%; padding: 1rem 0 0; } .theme_messages_new, .theme_messages, .theme_message_last, .theme_message_last_header{ font-size: 1rem; width: fit-content; color: var(--main-white-verydark); flex-grow: 1; text-align: center; width: 30%; } .theme_messages_new > a, .theme_messages, .theme_message_last > a{ color: var(--main-white-verydark); } .theme_messages { } .theme_messages_new { } .theme_message_last{ } .theme_div, .theme_div_header{ height: fit-content; gap: 0.5rem; flex-wrap: wrap; } .theme_div{ padding: 0.5rem 1rem 0.2rem 1rem; } .theme_div_header{ padding: 0.3rem 2.2rem 0.1rem 2.2rem; } .theme_name{ width: 100%; } } .ps-container .ps-scrollbar-x{ position:absolute; bottom:3px; height:8px; background-color:#aaa; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius: 4px; opacity:0; filter:alpha(opacity=0); -webkit-transition:opacity.2s linear; -moz-transition:opacity .2s linear; transition:opacity .2s linear } .ps-container:hover .ps-scrollbar-x{ opacity:.6; filter:alpha(opacity=60) } .ps-container .ps-scrollbar-x:hover{ opacity:.9; filter:alpha(opacity=90); cursor:default } .ps-container .ps-scrollbar-x.in-scrolling{ opacity:.9; filter:alpha(opacity=90) } .ps-container .ps-scrollbar-y{ position:absolute; right:3px; width:8px; background-color:#aaa; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; opacity:0; filter:alpha(opacity=0); -webkit-transition:opacity.2s linear; -moz-transition:opacity .2s linear; transition:opacity .2s linear } .ps-container:hover .ps-scrollbar-y{ opacity:.6; filter:alpha(opacity=60); } .ps-container .ps-scrollbar-y:hover{ opacity:.9; filter:alpha(opacity=90); cursor:default } .ps-container .ps-scrollbar-y.in-scrolling{ opacity:.9; filter:alpha(opacity=90) }