:root {
    --width-max: 1185px;
    --width-read: 728px;
    --transition-delay: 0.35s;
    --scale-hover: 0.966;
    --scale-click: 0.935;

    --cover-small: 80px;
    --cover-thumb: 160px;
    --cover-max: 250px;

    --color-orange: #C03E0D;
    --color-brand: #0D56E3;
    --color-green: #6DA415;
    --color-peach: #FC466B;
    --color-pink: #FF4FB8;
    --color-aqua: #137C94;
    --color-red: #971F34;
    --color-bgOld: #0B0C14;
}

.none {
    display: none !important;
}

.block {
    display: block;
}

.inline-flex {
    display: inline-flex;
}

.grid {
    display: grid;
}

.svg-white {
    fill: white;
}

.svg-black {
    fill: black;
}

.svg-pink {
    fill: var(--color-pink);
}

.svg-brand {
    fill: var(--color-brand);
}

.svg-red {
    fill: var(--color-red);
}

.svg-txt {
    fill: var(--color-txtSecondary);
}

.svg-third {
    fill: var(--color-txtThird);
}

.bg-con {
    display: inline-flex;
    align-items: center;
    position: relative;
    border-radius: 8px;
    padding: 5px;
    transition: all var(--transition-delay) ease;
}

.bg-con:hover {
    background-color: var(--color-bgTheme-small);
}

.bg-con:active {
    transform: scale(var(--scale-hover));
}

.bg-none {
    background-color: transparent;
}

.bg-primary {
    background-color: var(--color-bgPrimary);
}

.bg-secondary {
    background-color: var(--color-bgSecondary);
}

.bg-tiny {
    background-color: var(--color-bgTheme-tiny);
}

.bg-small {
    background-color: var(--color-bgTheme-small);
}

.bg-default {
    background-color: var(--color-bgTheme-default);
}

.bg-big {
    background-color: var(--color-bgTheme-big);
}

.bg-950 {
    background-color: var(--color-bg950);
}

.bg-900 {
    background-color: var(--color-bg900);
}

.bg-800 {
    background-color: var(--color-bg800);
}

.bg-700 {
    background-color: var(--color-bg700);
}

.bg-red {
    background-color: var(--color-red);
}

.bg-aqua {
    background-color: var(--color-aqua);
}

.bg-pink {
    background-color: var(--color-pink);
}

.bg-green {
    background-color: var(--color-green);
}

.bg-brand {
    background-color: var(--color-brand);
}

.bg-orange {
    background-color: var(--color-orange);
}

.color-primary {
    color: var(--color-txtPrimary);
}

.color-secondary {
    color: var(--color-txtSecondary);
}

.color-third {
    color: var(--color-txtThird);
}

.color-red {
    color: var(--color-red);
}

.color-green {
    color: var(--color-green);
}

.color-orange {
    color: var(--color-orange);
}

.color-pink {
    color: var(--color-pink);
}

.color-brand {
    color: var(--color-brand);
}

.color-theme {
    color: var(--color-bg950);
}

.br-4 {
    border-radius: 4px;
}

.br-6 {
    border-radius: 6px;
}

.br-8 {
    border-radius: 8px;
}

.br-12 {
    border-radius: 12px;
}

.br-16 {
    border-radius: 16px;
}

.br-22 {
    border-radius: 22px;
}

.br-32 {
    border-radius: 32px;
}

.br-avatar {
    border-radius: 50%;
}

.br-primary {
    border: 1px solid var(--color-bgPrimary);
}

.br-secondary {
    border: 1px solid var(--color-bgSecondary);
}

.br-tiny {
    border: 1px solid var(--color-bgTheme-tiny);
}

.br-small {
    border: 1px solid var(--color-bgTheme-small);
}

.br-default {
    border: 1px solid var(--color-bgTheme-default);
}

.br-big {
    border: 1px solid var(--color-bgTheme-big);
}

.br-950 {
    border: 1px solid var(--color-bg950);
}

.br-900 {
    border: 1px solid var(--color-bg900);
}

.br-800 {
    border: 1px solid var(--color-bg800);
}

.br-700 {
    border: 1px solid var(--color-bg700);
}

.br-red {
    border: 1px solid var(--color-red);
}

.br-pink {
    border: 1px solid var(--color-pink);
}

.br-brand {
    border: 1px solid var(--color-brand);
}

.link {
    cursor: pointer;
    text-decoration: none;
}

.scale {
    transition: transform var(--transition-delay) ease;
}

.scale:hover {
    transform: scale(var(--scale-hover));
}

.scale:active {
    transform: scale(var(--scale-click));
}

.tr-y {
    transition: transform var(--transition-delay) ease;
}

.tr-y:hover {
    transform: translateY(-3px);
}

.lUnder {
    text-decoration: none;
    transition: text-decoration var(--transition-delay) ease;
}

.lColor {
    color: var(--color-pink);
    transition: text-decoration var(--transition-delay) ease;
}

.lColor:hover, .lUnder:hover {
    text-decoration: underline;
}

.lOpacity {
    transition: opacity var(--transition-delay) ease;
}

.lOpacity:hover {
    opacity: 1;
}

.txt {
    hyphens: auto;
}

.txt-elip {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.txt-nowrap {
    white-space: nowrap;
}

.txt-center {
    text-align: center;
}

.txt-left {
    text-align: left;
}

.txt-right {
    text-align: right;
}

.txt-no {
    text-transform: none;
}

.txt-pre {
    white-space: pre-wrap;
}

.txt-f100 {
    font-weight: 100;
}

.txt-f200 {
    font-weight: 200;
}

.txt-f300 {
    font-weight: 300;
}

.txt-f400 {
    font-weight: 400;
}

.txt-f500 {
    font-weight: 500;
}

.txt-f600 {
    font-weight: 600;
}

.txt-f700 {
    font-weight: 700;
}

.txt-f800 {
    font-weight: 800;
}

.txt-f900 {
    font-weight: 900;
}

.txt-fb {
    font-weight: bold;
}

.txt-12 {
    font-size: 12px;
}

.txt-13 {
    font-size: 13px;
}

.txt-14 {
    font-size: 14px;
}

.txt-15 {
    font-size: 15px;
}

.txt-16 {
    font-size: 16px;
}

.txt-17 {
    font-size: 17px;
}

.txt-18 {
    font-size: 18px;
}

.txt-19 {
    font-size: 19px;
}

.txt-20 {
    font-size: 20px;
}

.txt-21 {
    font-size: 21px;
}

.txt-22 {
    font-size: 22px;
}

.txt-23 {
    font-size: 23px;
}

.txt-24 {
    font-size: 24px;
}

.txt-25 {
    font-size: 25px;
}

.txt-26 {
    font-size: 26px;
}

.txt-27 {
    font-size: 27px;
}

.txt-28 {
    font-size: 28px;
}

.txt-29 {
    font-size: 29px;
}

.txt-30 {
    font-size: 30px;
}

.txt-31 {
    font-size: 31px;
}

.txt-32 {
    font-size: 32px;
}

.unbounded {
    font-family: 'Unbounded', sans-serif !important;
}

.lh-12 {
    line-height: 12px;
}

.lh-16 {
    line-height: 16px;
}

.lh-18 {
    line-height: 18px;
}

.lh-21 {
    line-height: 21px;
}

.cover {
    object-fit: cover;
    overflow: hidden;
    opacity: 1;
}

.flex-items {
    align-items: center;
}

.flex-startit {
    align-items: flex-start;
}

.flex-just {
    justify-content: center;
}

.flex-evenly {
    justify-content: space-evenly;
}

.flex-between {
    justify-content: space-between;
}

.flex-end {
    justify-content: end;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.flex-shrink {
    flex-shrink: 0;
}

.flex-1 {
    flex: 1;
}

.flex-1-1-0 {
    flex: 1 1 0;
}

.gap-0 {
    gap: 0px;
}

.gap-4 {
    gap: 4px;
}

.gap-8 {
    gap: 8px;
}

.gap-12 {
    gap: 12px;
}

.gap-16 {
    gap: 16px;
}

.gap-24 {
    gap: 24px;
}

.gap-32 {
    gap: 32px;
}

.gap-42 {
    gap: 42px;
}

.row-gap-0 {
    row-gap: 0px;
}

.row-gap-4 {
    row-gap: 4px;
}

.row-gap-8 {
    row-gap: 8px;
}

.row-gap-12 {
    row-gap: 12px;
}

.row-gap-16 {
    row-gap: 16px;
}

.row-gap-24 {
    row-gap: 24px;
}

.row-gap-32 {
    row-gap: 32px;
}

.row-gap-42 {
    row-gap: 42px;
}

.size-12 {
    width: 12px;
    height: 12px;
    max-width: 12px;
    min-width: 12px;
    max-height: 12px;
    min-height: 12px;
}

.size-14 {
    width: 14px;
    height: 14px;
    max-width: 14px;
    min-width: 14px;
    max-height: 14px;
    min-height: 14px;
}

.size-16 {
    width: 16px;
    height: 16px;
    max-width: 16px;
    min-width: 16px;
    max-height: 16px;
    min-height: 16px;
}

.size-18 {
    width: 18px;
    height: 18px;
    max-width: 18px;
    min-width: 18px;
    max-height: 18px;
    min-height: 18px;
}

.size-20 {
    width: 20px;
    height: 20px;
    max-width: 20px;
    min-width: 20px;
    max-height: 20px;
    min-height: 20px;
}

.size-24 {
    width: 24px;
    height: 24px;
    max-width: 24px;
    min-width: 24px;
    max-height: 24px;
    min-height: 24px;
}

.size-28 {
    width: 28px;
    height: 28px;
    max-width: 28px;
    min-width: 28px;
    max-height: 28px;
    min-height: 28px;
}

.size-32 {
    width: 32px;
    height: 32px;
    max-width: 32px;
    min-width: 32px;
    max-height: 32px;
    min-height: 32px;
}

.size-42 {
    width: 42px;
    height: 42px;
    max-width: 42px;
    min-width: 42px;
    max-height: 42px;
    min-height: 42px;
}

.size-48 {
    width: 48px;
    height: 48px;
    max-width: 48px;
    min-width: 48px;
    max-height: 48px;
    min-height: 48px;
}

.size-52 {
    width: 52px;
    height: 52px;
    max-width: 52px;
    min-width: 52px;
    max-height: 52px;
    min-height: 52px;
}

.size-64 {
    width: 64px;
    height: 64px;
    max-width: 64px;
    min-width: 64px;
    max-height: 64px;
    min-height: 64px;
}

.size-128 {
    width: 128px;
    height: 128px;
    max-width: 128px;
    min-width: 128px;
    max-height: 128px;
    min-height: 128px;
}

.size-172 {
    width: 172px;
    height: 172px;
    max-width: 172px;
    min-width: 172px;
    max-height: 172px;
    min-height: 172px;
}

.size-192 {
    width: 192px;
    height: 192px;
    max-width: 192px;
    min-width: 192px;
    max-height: 192px;
    min-height: 192px;
}

.size-256 {
    width: 256px;
    height: 256px;
    max-width: 256px;
    min-width: 256px;
    max-height: 256px;
    min-height: 256px;
}

.margin-auto {
    margin: 0 auto;
}

.mr-auto {
    margin-right: auto;
}

.mr-6 {
    margin-right: 6px;
}

.ml-auto {
    margin-left: auto;
}

.ml--2 {
    margin-left: -2px;
}

.ml--4 {
    margin-left: -4px;
}

.ml--20 {
    margin-left: -20px;
}

.ml-2 {
    margin-left: 2px;
}

.ml-4 {
    margin-left: 4px;
}

.ml-6 {
    margin-left: 6px;
}

.ml-8 {
    margin-left: 8px;
}

.ml-12 {
    margin-left: 12px;
}

.ml-16 {
    margin-left: 16px;
}

.ml-32 {
    margin-left: 32px;
}

.ml-48 {
    margin-left: 48px;
}

.mt--2 {
    margin-top: -2px;
}

.mt-2 {
    margin-top: 2px;
}

.mt-6 {
    margin-top: 6px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-48 {
    margin-top: 48px;
}

.mt-96 {
    margin-top: 96px;
}

.mt-120 {
    margin-top: 120px;
}

.mt--2 {
    margin-top: -2px;
}

.mt--6 {
    margin-top: -6px;
}

.mt--10 {
    margin-top: -10px;
}

.min-w-auto {
    min-width: auto;
}

.w-fill {
    width: max-content;
}

.w-full {
    width: 100%;
}

.w-read {
    max-width: var(--width-read);
}

.w-max {
    max-width: var(--width-max);
}

.w-dfcover {
    width: 187.5px !important;
}

.p-4 {
    padding: 4px;
}

.p-6 {
    padding: 6px;
}

.p-6-10 {
    padding: 6px 10px;
}

.p-8 {
    padding: 8px;
}

.p-12 {
    padding: 12px;
}

.p-16 {
    padding: 16px;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.fixed-center {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

.us-none {
    user-select: none;
}

.opacity-035 {
    opacity: 0.35;
}

.opacity-050 {
    opacity: 0.50;
}

.hover-small:hover {
    background-color: var(--color-bgTheme-small);
}

.hover-default:hover {
    background-color: var(--color-bgTheme-default);
}

.hover-900:hover {
    background-color: var(--color-bg900);
}

.shadow-v1 {
    box-shadow: 0px 0px 12px 1px rgb(255, 255, 255, 0.1);
}

.shadow-v2 {
    box-shadow: 0px 0px 12px 1px rgb(0, 0, 0, 0.1);
}

.over-hide {
    overflow: hidden;
}

.badge-soon {
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 8px;
    text-transform: uppercase;
    background-color: var(--color-red);
}