/* */
/* default */

html {
    box-sizing: border-box;
    overflow-x: hidden;
}

body {
    box-sizing: border-box;
    /* transition: background-color 1s, color 1s; */
    background-color: var(--system-bg);
    color: var(--systemPrimary);
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

a {
    text-decoration: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

div, span, article, section, header, footer, aside, p, ul, li, fieldset, legend, a, nav, form {
	box-sizing: border-box;
}

ol, ul, li {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

.img-wrp {
    width: 100%;
}

.img-wrp img {
	max-width: 100%;
	height: auto;
	border: 0;
    display: block;
}

button {
	border: 0;
	background: transparent;
	cursor: pointer;
}

/* */
/* */

* {
    padding: var(--systemSpacing-0);
    margin: var(--systemSpacing-0);
    box-sizing: border-box;

    /* font-family: 'Roboto Flex', sans-serif;
    font-variation-settings: "wght" 100, "wdth" 100, "opsz" 8; */
}

/* */
/* scroll */

.scroll::-webkit-scrollbar {
    display: none;
}

.scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}


/* */
/* root */

:root {

    /**/
    /* */
    /* font size */

    --d0-fontSize: 10rem; /* 160px */
    --d1-fontSize: 7.5rem; /* 120px */
    --d2-fontSize: 5rem; /* 80px */
    --d3-fontSize: 3.75rem; /* 60px */

    --h1-fontSize: 3rem; /* 48px */
    --h2-fontSize: 2.625rem; /* 42px */
    --h3-fontSize: 2.25rem;  /* 36px */
    --h4-fontSize: 1.875rem; /* 30px */
    --h5-fontSize: 1.5rem;   /* 24px */
    --h6-fontSize: 1.25rem;  /* 20px */

    --ph-fontSize: 1.125rem; /* 18px */
    --p-fontSize: 1rem;   /* 16px */
    --ps-fontSize: 0.95rem; /* 15.2px */

    --ch-fontSize: 0.875rem; /* 14px */
    --c1-fontSize: 0.75rem;  /* 12px */
    --c2-fontSize: 0.625rem; /* 10px */

    /* */
    /* colour system */


    /* */
    /* system colour */

    --systemAccent: #1FA1FF;
    --systemWhite: #FCFCFC;
    --systemBlack: #0F0F0F;
    --system-bg: #FFFFFF;
    --system-bg-secondary: #FAFAFA;

    --systemBG: #F5F5F5;


    /* */
    /* primary to quinary colour */

    --systemPrimary: #000000EB;
    --systemPrimary-onLight: #000000E0;
    --systemPrimary-onDark: #000000F0;

    --systemSecondary: #000000A3;
    --systemSecondary-onLight: #0000009E;
    --systemSecondary-onDark: #000000AD;

    --systemTertiary: #0000007A;
    --systemTertiary-onLight: #0000007A;
    --systemTertiary-onDark: #0000007A;

    --systemQuaternary: #0000002E;
    --systemQuaternary-onLight: #00000029;
    --systemQuaternary-onDark: #00000033;

    --systemQuinary: #0000001A;
    --systemQuinary-onLight: #0000001F;
    --systemQuinary-onDark: #00000024;


    /* */
    /* state disabled */

    --disabled-txt: #3C3C3C4D;
    --disabled-bg: #DCDCDC;


    /* */
    /* background colour */


    /* */
    /* common */

    --light-bg-default: #F5F5F7;
    --onMaterial-bg:
        linear-gradient(0deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.92) 100%), rgba(245, 245, 245, 0.18);
        /*
        background-blend-mode: color-dodge, normal;
        backdrop-filter: blur(20px);
        */


    /* */
    /* accent */

    --systemAccent-bg-filled: #1FA1FF;
    --systemAccent-bg-filledTonal: #1FA1FF0D;


    /* */
    /* primary */

    --systemPrimary-bg-filled: #000000EB;
    --systemPrimary-bg-filledTonal: #0000009E;


    /* */
    /* action colour content part */


    /* */
    /* hover */

    --systemAccent-hover: #1FA1FFC7;
    --systemPrimary-hover: #000000B8;
    --systemWhite-hover: #e0e0e0;

    /* */
    /* press */

    --systemAccent-hover: #1FA1FFC7;
    --systemPrimary-hover: #0000006B;


    /* */
    /* action colour background part */


    /* */
    /* hover */

    /* */
    /* common */

    --light-bg-hover: #F0F0F0;


    /* */
    /* accent */

    --systemAccent-bg-filled-hover: #1FA1FFC7;
    --systemAccent-bg-filledTonal-hover: #1FA1FF26;
    --systemAccent-bg-borderless-hover: #1FA1FF17;
    --systemAccent-bg-border-hover: #1FA1FF17;


    /* */
    /* primary */

    --systemPrimary-bg-filled-hover: #000000B8;
    --systemPrimary-bg-filledTonal-hover: #000000C7;
    --systemPrimary-bg-borderless-hover: #0000000D;
    --systemPrimary-bg-border-hover: #000000;


    /* */
    /* press */

    /* */
    /* common */

    --light-bg-press: #E5E5E5;


    /* */
    /* accent */

    --systemAccent-bg-filled-press: #1FA1FF7A;
    --systemAccent-bg-filledTonal-press: #1FA1FF3B;
    --systemAccent-bg-borderless-press: #1FA1FF3B;
    --systemAccent-bg-border-press: #1FA1FF3B;


    /* */
    /* primary */

    --systemPrimary-bg-filled-press: #0000008C;
    --systemPrimary-bg-filledTonal-press: #000000E0;
    --systemPrimary-bg-borderless-press: #0000003B;
    --systemPrimary-bg-border-press: #0000003B;


    /* positive spacing */

    --systemSpacing-0: 0rem;
    --systemSpacing-1: 0.0625rem;
    --systemSpacing-2: 0.125rem;
    --systemSpacing-4: 0.25rem;
    --systemSpacing-6: 0.375rem;
    --systemSpacing-8: 0.5rem;
    --systemSpacing-10: 0.625rem;
    --systemSpacing-12: 0.75rem;
    --systemSpacing-16: 1rem;
    --systemSpacing-20: 1.25rem;
    --systemSpacing-22: 1.375rem;
    --systemSpacing-24: 1.5rem;
    --systemSpacing-28: 1.75rem;
    --systemSpacing-32: 2rem;
    --systemSpacing-36: 2.25rem;
    --systemSpacing-40: 2.5rem;
    --systemSpacing-44: 2.75rem;
    --systemSpacing-48: 3rem;
    --systemSpacing-52: 3.25rem;
    --systemSpacing-56: 3.5rem;
    --systemSpacing-60: 3.75rem;
    --systemSpacing-64: 4rem;
    --systemSpacing-68: 4.25rem;
    --systemSpacing-70: 4.375rem;
    --systemSpacing-72: 4.5rem;
    --systemSpacing-80: 5rem;
    --systemSpacing-88: 5.5rem;
    --systemSpacing-96: 6rem;
    --systemSpacing-100: 6.25rem;
    --systemSpacing-120: 7.5rem;
    --systemSpacing-128: 8rem;
    --systemSpacing-132: 8.25rem;
    --systemSpacing-140: 8.75rem;
    --systemSpacing-160: 10rem;
    --systemSpacing-180: 11.25rem;
    --systemSpacing-200: 12.5rem;
    --systemSpacing-240: 15rem;
    --systemSpacing-280: 17.5rem;
    --systemSpacing-300: 18.75rem;
    --systemSpacing-320: 20rem;
    --systemSpacing-360: 22.5rem;
    --systemSpacing-400: 25rem;
    --systemSpacing-420: 26.25rem;
    --systemSpacing-440: 27.5rem;
    --systemSpacing-480: 30rem;
    --systemSpacing-520: 32.5rem;
    --systemSpacing-560: 35rem;
    --systemSpacing-600: 37.5rem;
    --systemSpacing-680: 42.5rem;
    --systemSpacing-720: 45rem;
    --systemSpacing-740: 46.25rem;
    --systemSpacing-800: 50rem;
    --systemSpacing-820: 51.25rem;
    --systemSpacing-840: 52.5rem;
    --systemSpacing-880: 55rem;
    --systemSpacing-920: 57.5rem;
    --systemSpacing-960: 60rem;
    --systemSpacing-1000: 62.5rem;
    --systemSpacing-1100: 68.75rem;
    --systemSpacing-1152: 72rem;
    --systemSpacing-1200: 75rem;
    --systemSpacing-1294: 80.875rem;
    --systemSpacing-1400: 87.5rem;
    --systemSpacing-1520: 95rem;
    --systemSpacing-1600: 100rem;
    --systemSpacing-9999: 625rem;

    /* negative spacing */

    --negative-systemSpacing-1: -0.0625rem;
    --negative-systemSpacing-2: -0.125rem;
    --negative-systemSpacing-4: -0.25rem;
    --negative-systemSpacing-6: -0.375rem;
    --negative-systemSpacing-8: -0.5rem;
    --negative-systemSpacing-10: -0.625rem;
    --negative-systemSpacing-12: -0.75rem;
    --negative-systemSpacing-16: -1rem;
    --negative-systemSpacing-20: -1.25rem;
    --negative-systemSpacing-24: -1.5rem;
    --negative-systemSpacing-32: -2rem;
    --negative-systemSpacing-40: -2.5rem;
    --negative-systemSpacing-120: -7.5rem;
    --negative-systemSpacing-160: -10rem;

    /* dim */

    --systemDim-10: rgba(0, 0, 0, 0.1);
    --systemDim-15: rgba(0, 0, 0, 0.15);
    --systemDim-20: rgba(0, 0, 0, 0.2);
    --systemDim-25: rgba(0, 0, 0, 0.25);
    --systemDim-30: rgba(0, 0, 0, 0.3);
    --systemDim-35: rgba(0, 0, 0, 0.35);
    --systemDim-40: rgba(0, 0, 0, 0.4);
    --systemDim-45: rgba(0, 0, 0, 0.45);
    --systemDim-50: rgba(0, 0, 0, 0.5);
    --systemDim-55: rgba(0, 0, 0, 0.55);
    --systemDim-60: rgba(0, 0, 0, 0.6);
    --systemDim-65: rgba(0, 0, 0, 0.65);
    --systemDim-70: rgba(0, 0, 0, 0.7);
    --systemDim-75: rgba(0, 0, 0, 0.75);
    --systemDim-80: rgba(0, 0, 0, 0.8);
    --systemDim-85: rgba(0, 0, 0, 0.85);
    --systemDim-90: rgba(0, 0, 0, 0.9);
    --systemDim-95: rgba(0, 0, 0, 0.95);
    --systemDim-100: rgba(0, 0, 0, 1.0);

    /* hashtag colour */
    --hashtag-bg: #f4f4f4;
}


.darkmode {
    
    /* colour system */

    /* system colour */

    --systemAccent: #24A6FF;
    --systemBlack: #FAFAFA;
    --systemWhite: #0F0F0F;
    --system-bg: #1F1F1F;
    --system-bg-secondary: #1C1C1C;

    --systemBG: #1c1c1c;


    /* */
    /* primary to quinary colour */

    --systemPrimary: #FFFFFFD9;
    --systemPrimary-onLight: #FFFFFFE0;
    --systemPrimary-onDark: #FFFFFFD1;

    --systemSecondary: #FFFFFF8C;
    --systemSecondary-onLight: #FFFFFF94;
    --systemSecondary-onDark: #FFFFFF85;

    --systemTertiary: #FFFFFF40;
    --systemTertiary-onLight: #FFFFFF40;
    --systemTertiary-onDark: #FFFFFF40;

    --systemQuaternary: #FFFFFF1A;
    --systemQuaternary-onLight: #FFFFFF1F;
    --systemQuaternary-onDark:#FFFFFF14;

    --systemQuinary: #FFFFFF0D;
    --systemQuinary-onLight: #FFFFFF12;
    --systemQuinary-onDark: #FFFFFF0D;

    /* state disabled */

    --disabled-txt: #EBEBF54D;
    --disabled-bg: #7676803D;

    /* background colour */

    /* common */

    --light-bg-default: #252525;
    --onMaterial-bg:
        linear-gradient(0deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.92) 100%), rgba(245, 245, 245, 0.18);
        /*
        background-blend-mode: color-dodge, normal;
        backdrop-filter: blur(20px);
        */

    /* accent */

    --systemAccent-bg-filled: #1FA1FFE0;
    --systemAccent-bg-filledTonal: #1FA1FF73;

    /* primary */

    --systemPrimary-bg-filled: #FFFFFFD9;
    --systemPrimary-bg-filledTonal: #FFFFFF17;

    /* action colour content part */

    /* hover */

    --systemAccent-hover: #1FA1FFC7;
    --systemPrimary-hover: #FFFFFF9E;

    /* press */

    --systemAccent-hover: #1FA1FF99;
    --systemPrimary-hover: #FFFFFF6B;

    /* action colour background part */



    /* hover */


    /* common */

    --light-bg-hover: #323232;

    /* accent */

    --systemAccent-bg-filled-hover: #1FA1FFC7;
    --systemAccent-bg-filledTonal-hover: #1FA1FF7A;
    --systemAccent-bg-borderless-hover: #1FA1FF3D;
    --systemAccent-bg-border-hover: #1FA1FF3D;

    /* primary */

    --systemPrimary-bg-filled-hover: #FFFFFFB8;
    --systemPrimary-bg-filledTonal-hover: #FFFFFF24;
    --systemPrimary-bg-borderless-hover: #FFFFFF24;
    --systemPrimary-bg-border-hover: #FFFFFF24;

    /* press */

    /* common */

    --light-bg-press: #1C1C1C;

    /* accent */

    --systemAccent-bg-filled-press: #1FA1FF99;
    --systemAccent-bg-filledTonal-press: #1FA1FF1F;
    --systemAccent-bg-borderless-press: #1FA1FF1F;
    --systemAccent-bg-border-press: #1FA1FF1F;

    /* primary */

    --systemPrimary-bg-filled-press: #FFFFFF7A;
    --systemPrimary-bg-filledTonal-press: #FFFFFF0A;
    --systemPrimary-bg-borderless-press: #FFFFFF0A;
    --systemPrimary-bg-border-press: #FFFFFF0A;

    /* hashtag colour */
    --hashtag-bg: #1f1f1f;
}

/* frequently used custom */

/* align items */

.t-a-c {
    text-align: center;
}

/* */
/* margin */

.mrg-auto {
    margin: auto;
}

.mrg-0-auto {
    margin: 0 auto;
}

.mrg-auto-0 {
    margin: auto 0;
}


/* margin custom */

.mrg-t-cstm {
    margin-top: var(--systemSpacing-160);
}

.mrg-b-cstm {
    margin-bottom: var(--systemSpacing-160);
}

.mrg-t-1 {
    margin-top: var(--systemSpacing-16);
}

.mrg-t-2 {
    margin-top: var(--systemSpacing-32);
}

.mrg-t-4 {
    margin-top: var(--systemSpacing-64);
}

.mrg-t-5 {
    margin-top: var(--systemSpacing-80);
}

.mrg-b-05 {
    margin-bottom: var(--systemSpacing-8);
}

.mrg-b-1 {
    margin-bottom: var(--systemSpacing-16);
}

.mrg-b-2 {
    margin-bottom: var(--systemSpacing-32);
}

.mrg-b-4 {
    margin-bottom: var(--systemSpacing-64);
}

.mrg-b-5 {
    margin-bottom: var(--systemSpacing-80);
}


/* padding custom */

.pd-r-cstm {
    padding-right: var(--systemSpacing-128);
}

.pd-l-cstm {
    padding-left: var(--systemSpacing-128);
}

/* */

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

    /* */
    /* padding custom */

    .pd-r-cstm {
        padding-right: var(--systemSpacing-0);
    }
    
    .pd-l-cstm {
        padding-left: var(--systemSpacing-0);
    }


    /* */
    /* margin custom */

    .mrg-t-cstm {
        margin-top: var(--systemSpacing-80);
    }
}