@import url('https://fonts.googleapis.com/css?family=Righteous|Roboto|Montserrat:700,500|Source Code Pro|Bricolage Grotesque:700');

:root {
    --main-anim-duration: 3s;
    --primary-colour: #111218;
    --comp-colour: #f5f5f7;
    --accent-colour: #303030;
    --body-text-colour: #8d8d8d;
    --text-pink-purple-gradient: linear-gradient(to right, #ecc9fd, #7979ff);
    --text-blue-green-gradient: linear-gradient(to bottom right, #1dd2ff, hsl(120, 100%, 70%));

    --font-sans: 'Montserrat', 'Roboto', 'Titillium Web','Open Sans', sans-serif;

    background-color: var(--primary-colour);
    color: var(--comp-colour);
}

.gradient-text {
    -webkit-text-fill-color: transparent;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

.gradient-text.blue-green {
    background: var(--text-blue-green-gradient);
    -webkit-background-clip: text;
    background-clip: text;
}

.gradient-text.pink-purple {
    background: var(--text-pink-purple-gradient);
    -webkit-background-clip: text;
    background-clip: text;
}