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

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

/* all variables */
:root {
        --background: 250, 255, 255;
        --backgroundFaint: 239, 248, 248;
        --text: 32,34,34;
        --textFaint: 66,71,71;
        /* highlight colour */
        --highlight1: 233, 171, 26;
        --highlight1Faint: 171, 125, 19;
        /* call to action colour */
        --highlight2: 179, 225, 225;
        --highlight2Faint: 136, 178, 178;

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

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

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

        --borderRadius: 5px;
        --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%);
} */