/* global variables */

:root {
    --fontsize: calc(0.3125rem + ((1vw - 3.6px) * 0.4965));
}

:root {
    /* add fluid rem function */
    font-size: max(37.5%, min(var(--fontsize), 62.5%));
    /* RWD */
    --media-tablet: (min-width: 992px);
    --media-pc: (min-width: 1300px);
    --global-width: min(calc(320px + ((1vw - 3.6px) * 100)), 123.5rem);
    /* --global-width--small: min(calc(320px + ((1vw - 3.6px) * 88)), 80.8rem); */
    /*small

    /* colors */
    --color-white: #fff;
    --color-black: #000;
    --color-dark: #04081A;
    --color-navy: #121629;
    --color-light-gray: rgba(134, 142, 175, 0.2);
    --color-gray: #868EAF;
    --color-lime: #1AFE14;

    /* fonts */
    --font-family-main: "Manrope", sans-serif;
    --font-size-10: max(10px, 1rem);
    --font-size-12: max(12px, 1.2rem);
    --font-size-13: max(13px, 1.3rem);
    --font-size-14: max(14px, 1.4rem);
    --font-size-15: max(15px, 1.5rem);
    --font-size-16: max(16px, 1.6rem);
    --font-size-18: max(18px, 1.8rem);
    --font-size-20: max(20px, 2rem);
    --font-size-30: max(22px, 3.0rem);
    --font-size-34: max(26px, 3.4rem);
    --font-size-36: max(36px, 3.6rem);
    --font-size-42: max(32px, 4.2rem);
    --font-size-46: max(35px, 4.6rem);
    --font-size-62: max(45px, 6.2rem);

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    /* effects */
    --transition-duration: 0.3s;
    --transition-timing_function: ease;
    /* mr_menu */
    --mr_menu-hover_in_timeout: 100;
    --mr_menu-hover_out_timeout: 350;
    --mr_menu-menu-transition-property: opacity;
    --mr_menu-menu-transition-property-closed_value: 0;
    --mr_menu-menu-transition-property-open_value: 1;
    --mr_menu-submenu-transition-property: opacity;
    --mr_menu-submenu-transition-property-closed_value: 0;
    --mr_menu-submenu-transition-property-open_value: 1;
    --mr_menu-menu-icon-open: "☰";
    --mr_menu-menu-icon-close: "×";
    --mr_menu-submenu-icon-open: "☰";
    --mr_menu-submenu-icon-close: "×";
}

@media(min-width: 2048px) {
    :root {
        font-size: 85%;
    }
}

@media(min-width: 3840px) {
    :root {
        font-size: 140%;
    }
}