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

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

/* all variables */
:root {
        --background: 43, 45, 46;
        --backgroundFaint: 64, 67, 68;
        --text: 250, 250, 250;
        --textFaint: 207, 207, 207;
        /* highlight colour */
        --highlight1: 99, 114, 118;
        --highlight1Faint: 	80, 92, 96;
        /* call to action colour */
        --highlight2: 99, 114, 118;
        --highlight2Faint: 	80, 92, 96;

        --fontMicro: 10px;
        --fontSmallest: 15px;
        --fontSmall: 19px;
        --fontMedium: 28px;
        --fontLarge: 38px;
        --fontLargest: 75px;

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

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

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

        --borderThickness: 2px;

        --scaleIncrease: 1.01;
        
        --fancyGradient: linear-gradient(90deg, rgba(var(--text), 0.1) 0%, transparent 10%, rgba(var(--highlight1), 0.2) 100%);
}

/* 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%);
} */