/* */
/* 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: 0rem;
    margin: 0rem;
    font-family: 'Roboto Flex', sans-serif;
    box-sizing: border-box;
    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 */

    --d1-fontSize: 7.5rem; /* 120px */
    --d2-fontSize: 5rem; /* 80px */

    --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;


    /* */
    /* 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;


    /* */
    /* system spacing */
    
    --systemSpacing-2: 0.125rem;
    --systemSpacing-4: 0.25rem;
    --systemSpacing-8: 0.5rem;
    --systemSpacing-12: 0.75rem;
    --systemSpacing-16: 1rem;
    --systemSpacing-20: 1.25rem;
    --systemSpacing-24: 1.5rem;
    --systemSpacing-28: 1.75rem;
    --systemSpacing-32: 2rem;
    --systemSpacing-40: 2.5rem;
    --systemSpacing-48: 3rem;
    --systemSpacing-60: 3.75rem;
    --systemSpacing-80: 5rem;
    --systemSpacing-96: 6rem;
    --systemSpacing-100: 6.25rem;
    --systemSpacing-120: 7.5rem;
    --systemSpacing-136: 8.5rem;
    --systemSpacing-160: 10rem;
    --systemSpacing-180: 11.25rem;
    --systemSpacing-200: 12.5rem;
    --systemSpacing-220: 13.75rem;
    --systemSpacing-240: 15rem;
    --systemSpacing-280: 17.5rem;
    --systemSpacing-320: 20rem;
    --systemSpacing-400: 25rem;
    --systemSpacing-480: 30rem;
    --systemSpacing-600: 37.5rem;
    --systemSpacing-820: 51.25rem;
    --systemSpacing-900: 56.25rem;
    --systemSpacing-960: 60rem;
    --systemSpacing-1200: 75rem;
    --systemSpacing-1294: 80.875rem;
}


.darkmode {
    
    /* */
    /* colour system */


    /* */
    /* system colour */

    --systemAccent: #24A6FF;
    --systemBlack: #FAFAFA;
    --systemWhite: #0F0F0F;
    --system-bg: #1F1F1F;
    --system-bg-secondary: #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;
}


/* */
/* 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: 10rem;
}

.mrg-b-cstm {
    margin-bottom: 10rem;
}

.mrg-t-1 {
    margin-top: 1rem;
}

.mrg-t-2 {
    margin-top: 2rem;
}

.mrg-b-1 {
    margin-bottom: 1rem;
}

.mrg-b-2 {
    margin-bottom: 2rem;
}

.mrg-b-4 {
    margin-bottom: 4rem;
}


/* */
/* padding custom */

.pd-r-cstm {
    padding-right: 8rem;
}

.pd-l-cstm {
    padding-left: 8rem;
}



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

    /* */
    /* padding custom */

    .pd-r-cstm {
        padding-right: 0rem;
    }
    
    .pd-l-cstm {
        padding-left: 0rem;
    }


    /* */
    /* margin custom */

    .mrg-t-cstm {
        margin-top: 5rem;
    }
}