/* The fonts, palette, type scale and colors of stackgres.io */

/* Fonts */
@font-face {
    font-family: 'Exo 2';
    src: url('../fonts/Exo2-Bold.woff2') format('woff2'),
        url('../fonts/Exo2-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Exo 2';
    src: url('../fonts/Exo2-BoldItalic.woff2') format('woff2'),
        url('../fonts/Exo2-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Exo 2';
    src: url('../fonts/Exo2-Italic.woff2') format('woff2'),
        url('../fonts/Exo2-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Exo 2';
    src: url('../fonts/Exo2-Regular.woff2') format('woff2'),
        url('../fonts/Exo2-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Exo 2';
    src: url('../fonts/Exo2-MediumItalic.woff2') format('woff2'),
        url('../fonts/Exo2-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Exo 2';
    src: url('../fonts/Exo2-Medium.woff2') format('woff2'),
        url('../fonts/Exo2-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu Mono';
    src: url('../fonts/UbuntuMono-Regular.woff2') format('woff2'),
        url('../fonts/UbuntuMono-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Palette */
:root {
    --white: #ffffff;
    --mediumBlue: #383753;
    --darkBlue: #0B031C;
    --blue: #369AFF;
    --lBlue: #1CE8FF;
    --yellow: #F2A90C;
    --lYellow: #FFFC66;
    --green: #2EBE97;
    --lGreen: #39E640;
    --orange: #DE560D;
    --lOrange: #FF9E17;
    --magenta: #D836FF;
}

/* Type scale: every font size of the site is one of these, about 1.27x
   apart; weight and color set the rest of the hierarchy */
:root {
    --fontDisplay: clamp(3rem, .5rem + 5vw, 6rem);
    --fontH1: clamp(2.5rem, 1.6rem + 1.8vw, 3.25rem);
    --fontH2: clamp(2rem, 1.2rem + 1.4vw, 2.5rem);
    --fontH3: 1.75rem;
    --fontLead: 1.375rem;
    --fontBase: 1rem;
    --fontSmall: .875rem;
    /* Ubuntu Mono runs narrow, so code keeps the size of the text */
    --fontCode: 1rem;
}

/* Colors and gradients of text, surfaces and accents */
body {
    --textColor: var(--white);
    --bgColor: var(--darkBlue);
    --borderColor: var(--mediumBlue) ;
    --activeBg: #161636;
    --inputBg: #272642;
    --baseColor: var(--blue);
    --baseLightColor: var(--lBlue);
    --textGradient: linear-gradient(123deg, var(--blue) 0%, var(--lBlue) 100%) 0% 0% no-repeat padding-box;
    --baseGradient: radial-gradient(at 2% 9%, var(--magenta) 0%, var(--darkBlue) 100%) 0% 0% no-repeat padding-box;
    --invertedGradient: linear-gradient(to bottom left, var(--baseColor), var(--baseLightColor));
    --verticalGradient: linear-gradient(to bottom, var(--baseColor), var(--baseLightColor));
    --horizontalGradient: linear-gradient(90deg, var(--blue) 0%, var(--lBlue) 100%) 0% 0% no-repeat padding-box;
    --orangeGradient: radial-gradient(at 2% 9%, var(--orange) 0%, var(--darkBlue) 100%) 0% 0% no-repeat padding-box;
    --invertedOrangeGradient: radial-gradient(at 300% 200%,  var(--orange) 20%, var(--darkBlue) 100%) 100% 100% no-repeat padding-box;
    --greenGradient: radial-gradient(at 2% 9%, var(--green) 0%, var(--darkBlue) 100%) 0% 0% no-repeat padding-box;
    --invertedGreenGradient: radial-gradient(at 2% 90%, var(--darkBlue) 100%, var(--green) 0%) 0% 0% no-repeat padding-box;
    --blueGradient: radial-gradient(at 2% 9%, var(--lBlue) 0%, var(--darkBlue) 100%) 0% 0% no-repeat padding-box;
    --invertedBlueGradient: radial-gradient(at 100% 100%, var(--lBlue) 0, var(--darkBlue) 40%) 0 0 no-repeat padding-box;
    --whiteGradient: transparent linear-gradient(97deg, #FFFFFF66 0%, #FFFFFF26 100%) 0% 0% no-repeat padding-box;;
}