:root{ --primary_50: #ebeaff; --primary_100: #cccaff; --primary_200: #a8a8ff; --primary_300: #8285ff; --primary_400: #6466ff; --primary_500: #4845ff; --primary_600: #443bf3; --primary_700: #3b2ee6; --primary_800: #321ddb; --primary_900: #2200cb; --primary: var(--primary_400); --alert_a100: #FF8A80; --alert: #FF5252; --alert_a400: #FF1744; --success_a100: #CCFF90; --success: #8BC34A; --success_a400: #689F38; --bodybkg:#000; --asidbkg:#121212; --texthalf:#b1b1b1; --bodycolor:#d4d4d4; --transition: 0.3s ease all; } *{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; } .mws{ max-width: 980px; margin: 0 auto; padding: 24px; } .title_image_wrap img{ max-width: 100%; height: auto; } body{ margin:0; padding:0; color:var(--bodycolor); font-family: 'Montserrat', sans-serif; background-color: var(--bodybkg); overflow: overlay; padding-left: 250px; min-height: 100vh; display: grid; gap:32px; grid-template-rows: 1fr auto; } @keyframes rotating{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } #page_loader{ position: fixed; inset:0; background-color: #000; z-index: 999999999; display: flex; place-items:center; place-content:center; font-size: 48px; } .expand_icon{ position: relative; font-size: 20px; width: 1em; height: 1em; margin: 0.5em; } .expand_icon:before, .expand_icon:after{ position: absolute; content:""; background:currentcolor; display: flex; border-radius: 1em; transform-origin: center; transition: var(--transition); } .expand_icon:before{ left: 0; right: 0; top: 0.45em; height: 0.1em; } .expand_icon:after{ top:0; bottom:0; left:0.45em; width: 0.1em; } input:not(:checked) ~ .expand_icon:after, .expand_icon.active:after{ transform: rotate(90deg); } .loader{ mask-image: url(../imgs/icons/loader.svg); -webkit-mask-image: url(../imgs/icons/loader.svg); mask-size: 100%; -webkit-mask-size: 100%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; width: 1em; height: 1em; display: flex; background: currentcolor; animation: rotating 0.75s linear infinite; } #page_loader svg{ animation: rotating 0.75s linear infinite; } main{ } .admin-bar{ min-height: calc(100vh - 34px); } a{ text-decoration: none; color: inherit; } /* width */ ::-webkit-scrollbar{ width: 20px; } /* Track */ ::-webkit-scrollbar-track{ border-radius: 10px; } /* Handle */ ::-webkit-scrollbar-thumb{ background: #00000001; box-shadow: inset 0 0 15px 5px #ffffff20; border:6px solid #00000001; border-radius: 10px; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover{ box-shadow: inset 0 0 15px 5px #ffffff40; } [class*="theme-icon-"]{ content: ""; display: inline-flex; width: 1em; height: 1em; mask-size: 1em 1em; mask-repeat: no-repeat; mask-position: center; background-color: currentcolor; } [class*="btn-"]{ display: flex; width: max-content; padding: 10px 30px; border-radius: 30px; border: 2px solid #fff; text-decoration: none; color: var(--bodycolor); } .noheading{ font-size: inherit; margin:0; } body.noaside{ padding-left: 0; } body.noaside #aside{ display: none; } .buttons_list{ display: grid; gap:1rem; justify-content: center; justify-items:center; text-align: center; align-content: center; justify-self: } .btn{ cursor: pointer; display: inline-flex; padding: 12px 24px; min-width: 240px; justify-content: center; align-items: center; gap:8px; border-radius: 24px; border:2px solid white; } #aside{ width: 250px; display: grid; grid-template-rows: auto 1fr auto; background: var(--asidbkg); position: fixed; top: 0; left: 0; bottom:0; transition: var(--transition); } #mobile_menu{ position: fixed; top: 0; left: 0; right: 0; height: 64px; display: none; } #aside nav{ overflow-x: hidden; overflow-y: auto; padding:1rem; text-align: center; display: flex; align-content: center; align-items: center; } .aside_menu_img{ max-height: 56px; max-width: 100%; height: auto; object-fit: contain; width: auto; } #aside header{ text-align: center; padding-top: 12px; } #legals{ list-style: none; padding:0; margin:0; display: grid; gap:8px; } #legals li{ padding-inline-start: 8px; } .Hidden{ display: none; } #legals ::marker{ content: "*"; } #aside ul{ list-style: none; display: grid; gap:8px; width: 100%; margin: 0; padding: 0; font-weight: bold; text-transform: uppercase; height: 100%; align-content: center; align-items: center; } #aside li{ position: relative; user-select: none; font-size: 14px; } #aside li>*{ padding: 8px 0; border-radius: 8px; display: grid; text-align: center; justify-content: center; } #aside li a{ opacity: 0.66; } #aside li:hover a{ color: var(--primary_200); } #aside li.active{ /* background: var(--primary); */ } .socials_list{ display: flex; justify-content: center; padding: 1.5rem; font-size: 1rem; gap:1rem; } .socials_list a{ /* font-size: 1rem; */ color: var(--texthalf); } body>main{ width: 100%; max-width: 1180px; margin: 0 auto; padding-top: 16px; } #footer{ display: grid; gap: 1rem; padding: 1.5rem; background: linear-gradient(0deg, #0f0f0f 0%, #0f0f0f 85%, #191919 100%); } #footer .footer_info{ text-align: center; }