/* Oneder base Link css/base.css from every page and put class="base" on . Colors --color-01 #7badff --color-02 #ffb708 --color-03 #ff8b81 --color-04 #a4de00 --color-05 #353535 --color-06 #f3f2e4 Type .fs_44 44px / 120% / Medium italic / color-05 .fs_36 36px / 120% / Medium italic / color-title .fs_18 18px / 140% / Regular / color-05 .fs_14 14px / auto / Medium / color-05 Layout .container centered, max-width 1440px .pt_100 padding-top 100px .ptb_100 padding-top and padding-bottom 100px Color helpers .color-01 … .color-06 .bg-01 … .bg-06 */ :root { --color-01: #7badff; --color-02: #ffb708; --color-03: #ff8b81; --color-04: #a4de00; --color-05: #353535; --color-06: #f3f2e4; --color-navy: #00244d; --color-title: #2e2e2e; --color-white: #ffffff; --color-canvas: color-mix(in srgb, var(--color-06) 30%, var(--color-white)); --font-sans: "Roboto Flex", "Roboto", sans-serif; --font-regular: "ital" 0, "wght" 400, "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712, "wdth" 100; --font-medium: "ital" 0, "wght" 500, "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712, "wdth" 100; --font-semibold: "ital" 0, "wght" 600, "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712, "wdth" 100; --font-medium-italic: "ital" 1, "wght" 500, "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712, "wdth" 100; } *, *::before, *::after { box-sizing: border-box; } html { height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .base { margin: 0; min-height: 100%; background-color: var(--color-canvas); color: var(--color-05); font-family: var(--font-sans); font-weight: 400; font-style: normal; line-height: 1.4; letter-spacing: 0; font-variation-settings: var(--font-regular); } .fs_18 { margin: 0; color: var(--color-05); font-family: var(--font-sans); font-size: 18px; font-weight: 400; font-style: normal; line-height: 1.4; letter-spacing: -0.18px; font-variation-settings: var(--font-regular); } .fs_36 { margin: 0; color: var(--color-title); font-family: var(--font-sans); font-size: 36px; font-weight: 500; font-style: italic; line-height: 1.2; letter-spacing: 0; font-variation-settings: var(--font-medium-italic); } .fs_44 { margin: 0; color: var(--color-05); font-family: var(--font-sans); font-size: 44px; font-weight: 500; font-style: italic; line-height: 1.2; letter-spacing: 0; font-variation-settings: var(--font-medium-italic); } .fs_14 { margin: 0; color: var(--color-05); font-family: var(--font-sans); font-size: 14px; font-weight: 500; font-style: normal; line-height: normal; letter-spacing: 0; font-variation-settings: var(--font-medium); } .container { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: clamp(16px, 7vw, 100px); } .pt_100 { padding-top: 100px; } .pb_100 { padding-bottom: 100px; } .ptb_100 { padding-top: 100px; padding-bottom: 100px; } @media (max-width: 990px) { .pt_100 { padding-top: 60px; } .pb_100 { padding-bottom: 60px; } .ptb_100 { padding-top: 60px; padding-bottom: 60px; } } .base img { max-width: 100%; height: auto; border: 0; } .color-01 { color: var(--color-01); } .color-02 { color: var(--color-02); } .color-03 { color: var(--color-03); } .color-04 { color: var(--color-04); } .color-05 { color: var(--color-05); } .color-06 { color: var(--color-06); } .color-navy { color: var(--color-navy); } .bg-01 { background-color: var(--color-01); } .bg-02 { background-color: var(--color-02); } .bg-03 { background-color: var(--color-03); } .bg-04 { background-color: var(--color-04); } .bg-05 { background-color: var(--color-05); } .bg-06 { background-color: var(--color-06); } .bg-canvas { background-color: var(--color-canvas); } .bg-white { background-color: var(--color-white); }