@font-face {
  font-family: "Montserrat";
  src: url('/assets/fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
}

@font-face {
        font-family: "HightlightFont";
        src: url('/assets/fonts/Staatliches-Regular.ttf') format('truetype');
}

/* all variables */
:root {
        --background: 17,19,20;/*46, 46, 59;*/
        --backgroundFaint: 33,39,43;/*63, 63, 79;*/
        --text: 236, 225, 230;/*216, 211, 200;*/
        --textFaint: 190, 179, 184;/*196, 191, 180;*/
        /* highlight colour */
        --highlight1: 237, 23, 122;/*204, 41, 54;*/
        --highlight1Faint: 217, 3, 102;/*184, 21, 34;*/
        /* call to action colour */
        --highlight2: 46, 163, 242;/*56, 134, 151;*/
        --highlight2Faint: 26, 143, 222;/*36, 114, 131;*/
        --highlight3: 123, 237, 23;/*56, 134, 151;*/
        --highlight3Faint: 103, 217, 3;/*36, 114, 131;*/

        --fontMicro: 12px;
        --fontSmallest: 17px;
        --fontSmall: 21px;
        --fontMedium: 30px;
        --fontLarge: 40px;
        --fontLargest: 75px;

        --paddingSmall: 10px;
        --paddingLarge: 20px;

        --fontWeightNormal: 300;
        --fontWeightBold: 400;

        --borderRadius: 10px;
        --transitionTime: 0.2s;

        --borderThickness: 2px;

        --scaleIncrease: 1.01;
}

/* remove base styling from doc */
* {
        padding: 0;
        margin: 0;
        text-decoration: none;
        list-style: none;
        box-sizing: border-box;
        color: var(--text);
        font-family: Montserrat;
        transition: var(--transitionTime);
}

/* assign the font */
html, body {
        background-color: rgb(var(--backgroundFaint));
        font-family: Montserrat;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}
	

.colour-a{
        color: rgb(var(--highlight1));
}

.colour-b{
        color: rgb(var(--highlight2));
}

.background-image-style{
	background-position: center;
	background-clip: border-box;
	background-repeat: no-repeat;
	object-fit: cover;
	background-size: cover;
}

/* .bottom-gradient-cover{
  	background-image: linear-gradient(0deg, rgba(var(--highlight2), 0.5) 30%, rgba(var(--highlight2), 0.25) 45%, transparent 60%);
        width: 100%;
        height: 100%;
}

.bottom-gradient-cover:hover{
        background-image: linear-gradient(0deg, rgba(var(--highlight1), 0.5) 45%, rgba(var(--highlight1), 0.25) 60%, transparent 75%);
} */