@charset "UTF-8";
/*
Theme Name: Signaturit
Author: INSIDEERS (jordi@insideers.com)
Version: 1.0
*/

@import"https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@400;500;700&display=swap";

@font-face {
    font-family: "N27";
    src: url("fonts/N27-Regular.eot");
    src: url("fonts/N27-Regular.eot?#iefix") format("embedded-opentype"), url("fonts/N27-Regular.woff2") format("woff2"), url("fonts/N27-Regular.woff") format("woff"), url("fonts/N27-Regular.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "N27";
    src: url("fonts/N27-Regular.eot");
    src: url("fonts/N27-Regular.eot?#iefix") format("embedded-opentype"), url("fonts/N27-Regular.woff2") format("woff2"), url("fonts/N27-Regular.woff") format("woff"), url("fonts/N27-Regular.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Supreme";
    src: url("fonts/Supreme-Regular.woff2") format("woff2"), url("fonts/Supreme-Regular.woff") format("woff"), url("fonts/Supreme-Regular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: "Supreme";
    src: url("fonts/Supreme-Medium.woff2") format("woff2"), url("fonts/Supreme-Medium.woff") format("woff"), url("fonts/Supreme-Medium.ttf") format("truetype");
    font-weight: 500;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: "Supreme";
    src: url("fonts/Supreme-Bold.woff2") format("woff2"), url("fonts/Supreme-Bold.woff") format("woff"), url("fonts/Supreme-Bold.ttf") format("truetype");
    font-weight: 700;
    font-display: swap;
    font-style: normal;
}
/******************** VARIABLES ***********************/
:root {
    /* COLORS */
    --black: #18181B;
    --white: #fff;
    --dark-gray: #444;
    --gray-07: #4B4B52;
    --gray-06: #71717A;
    --gray-04: #BCBCCC;
    --gray-03: #E0E0F4;
    --gray-02: #f5f5ff;
    --gray-01: #fafaff;
    --blue-1000: #030352;
    --blue-900: #05057A;
    --blue-800: #0707A3;
    --blue-600: #0A0AF4;
    --blue-500: #3131F4;
    --blue-200: #A6A6F4;
    --blue-50: #CECEF5;
    --neon-green-200: #A6F5BB;
    --neon-green-100: #CEF5D8;
    /*FONTS*/
    --primary-font-family: "Supreme, Roboto Flex";
    --secondary-font-family: "N27, Roboto Flex";
    /* FONT-WEIGHTS */
    --bold: 700;
    --medium: 500;
    --regular: 400;
    /* FONT-SIZES + FONT-SPACING */
    --title-extralarge-size: 80px;
    --title-extralarge-lineheight: 96px;
    --title-large-size: 56px;
    --title-large-lineheight: 64px;
    --title-medium-size: 48px;
    --title-medium-lineheight: 56px;
    --title-regular-size: 40px;
    --title-regular-lineheight: 48px;
    --title-small-size: 32px;
    --title-small-lineheight: 40px;
    --title-extrasmall-size: 30px;
    --title-extrasmall-lineheight: 40px;
    --text-large-size: 24px;
    --text-large-lineheight: 32px;
    --text-regular-size: 20px;
    --text-regular-lineheight: 24px;
    --text-small-size: 16px;
    --text-small-lineheight: 20px;
    --text-extrasmall-size: 14px;
    --text-extrasmall-lineheight: 24px;
    --letter-spacing-regular: 0.004em;
    --letter-spacing-small: 0.002em;
    /* SPACING */
    --container-regular: 1600px;
    --section-spacing-large: 90px;
    --section-spacing-regular: 70px;
    --margin-large: 60px;
    --margin-medium: 45px;
    --margin-regular: 30px;
    --margin-small: 15px;
    --margin-extrasmall: 5px;
    /* OTHERS */
    --box-shadow-regular: 0px;
    --border-radius-large: 8px;
    --border-radius-regular: 4px;
    --transition-regular: all 0.2s linear;
}

@media (max-width: 700px) {
    :root {
        --title-extralarge-size: 52px;
        --title-extralarge-lineheight: 62px;
        --title-large-size: 46px;
        --title-large-lineheight: 54px;
        --title-medium-size: 42px;
        --title-medium-lineheight: 46px;
        --title-regular-size: 38px;
        --title-regular-lineheight: 44px;
        --title-extrasmall-size: 28px;
        --title-extrasmall-lineheight: 38px;
        --section-spacing-large: 60px;
        --section-spacing-regular: 50px;
    }
}