/* Font Face Declarations
----------------------------------------------------------------------------- */
@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
}

/* Variables
----------------------------------------------------------------------------- */
:root {

    /* Fonts */
    --font--family: "Satoshi", system-ui, sans-serif;
    --font--style: normal;
    --font--weight: 500;
    --font--margin-left: -0.07em;
    --font--margin-left-opening-quote-mark: -0.406em;
    --font--feature-settings: "liga", "ss02", "ss03", "ss04", "ss06";
    --font--feature-settings-no-stylized-numeral-8: "ss06" 0;
    --font--size-huge: clamp(36px, 5.14vw, 5.14vw);
    --font--size-large: clamp(26px, 3.81vw, 3.81vw);
    --font--size-medium: 26px;
    --font--size-regular: 16px;
    --font--size-regular-line-height: 1.25;

    /* Colours */
    --accent-color: #00FFC0;
    --text-color: #F7F7F7;
    --secondary-text-color: #818181;

    /* Technology Background Colors */
    --javascript-bg: rgba(247, 223, 30, 0.30);    /* Yellow */
    --figma-bg: rgba(242, 78, 30, 0.30);         /* Red/Orange */
    --firebase-bg: rgba(255, 202, 40, 0.30);     /* Yellow/Orange */
    --python-bg: linear-gradient(
        to bottom right,
        rgba(0, 140, 255, 0.30),  /* Python blue */
        rgba(255, 213, 0, 0.30)   /* Python yellow */
    );
    --git-bg: rgba(240, 80, 50, 0.30);           /* Red */
    --swift-bg: rgba(0, 221, 255, 0.30);         /* Light Blue */
    --kotlin-bg: rgba(122, 255, 144, 0.30);      /* Light Green */
    --java-bg: linear-gradient(
        to bottom right,
        rgba(255, 140, 0, 0.30),  /* Java orange */
        rgba(255, 0, 217, 0.30)    /* Java dark orange/red */
    );
}