@font-face {
    font-family: "Inter";
    src: url(/fonts/InterVariable.woff2) format('woff2');
    font-weight: 100 900;
    font-display:block;
}

:root { 


	--spring-easing: linear(
		0, 0.002, 0.009, 0.019, 0.035 2.1%, 0.078, 0.141 4.4%, 0.281 6.7%, 0.594 11%,
		0.723, 0.842, 0.938, 1.017, 1.077 20.4%, 1.101, 1.121, 1.137, 1.149 24.3%,
		1.159 25.6%, 1.162, 1.163, 1.163, 1.161 28.4%, 1.154, 1.143, 1.129 32.8%,
		1.051 39.6%, 1.032, 1.017 43.1%, 1.002, 0.991, 0.982 48.9%, 0.977 51%,
		0.974 53.8%, 0.975 57.1%, 0.979 60%, 0.997 69.8%, 1.001, 1.003 76.9%,
		1.004 83.8%, 1
	  );
	  --spring-25: linear(0, 0.0014 0.51%, 0.0066, 0.0152, 0.0269 2.37%, 0.0583 3.6%, 0.1057 5.04%, 0.2096 7.61%, 0.4566 13.06%, 0.5668 15.64%, 0.6697, 0.7582, 0.8318 23.66%, 0.8631 25%, 0.8928, 0.9187, 0.9411, 0.9601 30.76%, 0.9771 32.3%, 0.9987 34.87%, 1.0145 37.75%, 1.0242 40.94%, 1.0282 44.54%, 1.0262 49.68%, 1.0096 63.67%, 1.0028 72.52%, 0.9996 83.22%, 0.9994 99.98%);
	  --spring-27: linear(0, 0.0009 0.42%, 0.0082 1.26%, 0.0309, 0.0656, 0.1096 5.06%, 0.2374 8.01%, 0.6239 16.01%, 0.7292, 0.8198, 0.8946, 0.9539, 0.9987, 1.0305 31.19%, 1.0486, 1.0601 35.4%, 1.0669, 1.0678, 1.0645, 1.0584 45.51%, 1.0283 54.78%, 1.0153 59.42%, 1.0072 63.21%, 1.001 67.43%, 0.9969 72.48%, 0.9954 77.96%, 0.9991 99.88%);
	  --spring-30: linear(0, 0.0022, 0.0087, 0.0191, 0.033 2.04%, 0.0731 3.13%, 0.1318 4.34%, 0.2619 6.52%, 0.5616 10.92%, 0.6851 12.84%, 0.8029 14.88%, 0.8972, 0.9742 18.72%, 1.0062 19.68%, 1.0356, 1.0604, 1.0807, 1.0968 23.76%, 1.1097 24.85%, 1.1202 26.19%, 1.1255 27.6%, 1.1258 29.13%, 1.1208 30.79%, 1.1134 32.2%, 1.1023 33.79%, 1.0433 40.82%, 1.0175 44.46%, 1.0062, 0.9975 48.55%, 0.991 50.66%, 0.9867 52.83%, 0.9842 55.77%, 0.9847 59.15%, 0.9973 72.25%, 1.0013 79.47%, 1.002 86.56%, 1.0004 99.98%);
	  --spring-35: linear(0, 0.002, 0.0078 1.23%, 0.0296 2.47%, 0.0676, 0.1168 5.24%, 0.2307 7.87%, 0.5034 13.42%, 0.6182 15.89%, 0.7278 18.51%, 0.8166, 0.8904, 0.9494 25.91%, 0.9968 28.53%, 1.0161, 1.0318 31.31%, 1.0487 33.31%, 1.0604 35.47%, 1.0667 37.79%, 1.0679 40.25%, 1.0653 42.57%, 1.0593 45.19%, 1.0279 54.91%, 1.0158 59.22%, 1.0072 63.23%, 1.0011 67.4%, 0.997 72.33%, 0.9954 78.19%, 0.9991 99.94%);
	  --spring-40: linear(0, 0.002, 0.0079 1.23%, 0.0298 2.47%, 0.0668 3.81%, 0.1229 5.35%, 0.2487 8.13%, 0.5283 13.58%, 0.6484 16.05%, 0.7607 18.62%, 0.8497, 0.9238 23.35%, 0.9851 25.82%, 1.0099, 1.031 28.29%, 1.0499, 1.065 30.96%, 1.0795 32.71%, 1.0892 34.56%, 1.0941 36.52%, 1.0943 38.68%, 1.0899 40.94%, 1.0807 43.61%, 1.0361 53.08%, 1.0185 57.4%, 1.0059, 0.9975 65.63%, 0.9925 70.36%, 0.991 75.91%, 0.9996 99.98%);

	  --elastic-easing: linear(
		0, 1.114 8.5%, 1.37 12.9%, 1.315 16.2%, 0.941 24%, 0.869 27.8%, 0.882 30.7%,
		1.012 38.3%, 1.046 42.7%, 0.984, 1.006 72.2%, 1
	  );


	--desktop-breakpoint: 1040px;

    --page-fade-in: 600ms;
	--page-fade-out: 300ms;

	--stripes-height: 0px;
	--banner-height: 50px;
    --banner-background: #eff2fa;

	--header-width: 1080px;
    --header-height: 70px;
	--header-color: rgba(0,0,0,.5);
    --header-line-height: 50px;
	--header-panel-height: 400px;
    --header-transition: all 400ms ease-out;
    --header-inset: 30px;
	--header-total-height: calc( var(--header-height) + var(--stripes-height) );

	--container-width: var(--header-width);
	--container-padding: var(--header-inset);
	--content-width: 640px;
    
    --highlight-color: #5d7ef4;
	--highlight-faded-color: #5d7ef481;
    --highlight-hover-color: #5260cd;
	--highlight-light: #e0e4fe;
    --background-color: #FFFFFF;
    --text-color: #000000;
    --secondary-text-color: rgb(102, 102, 102);
	--tertiary-text-color: rgb(182, 182, 182);
    --divider-color: rgb(240, 240, 240);
	--error-color: red;

	--surface-color-1: rgba(0,0,0,.03);
	--surface-color-2: rgba(0,0,0,.06);


	--button-radius: 8px;

    --form-radius: 8px;
    --form-margin: 16px;
    --form-padding: 16px;
	--form-border-color: #b8b8b8;
	--form-border: 1px solid var(--form-border-color);

	--form-font: "Inter", -apple-system, system-ui, Helvetica, sans-serif; 
	--form-weight: 400;
	--form-size: 15px;
    
	--heading-font: "Inter", -apple-system, system-ui, Helvetica, sans-serif;
    --heading-weight: 550;
    --heading-spacing: 0px;
    --heading-color: rgba(15,15,15);
    --heading-height: 1.3;

    --body-font: "Inter", -apple-system, system-ui, Helvetica, sans-serif;
    --body-weight: 400;
    --body-spacing: 0px;
    --body-height: 1.7;
    --body-size: 17px;
    --body-color: rgb(50,50,50);

	--light-weight: 300;
	--bold-weight: 600;
	--logo-weight: 650;

    --shadow-x: 0px;


}



html{
    cursor: default;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -ms-touch-action: none;
    
    background-color: var(--background-color);
    color: var(--body-color);
    font-family: var(--body-font);
    font-size: var(--body-size);
    letter-spacing: var(--body-spacing);
    line-height: var(--body-height);
    overflow-x: hidden;
    height: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;

    overscroll-behavior-y: contain;
	scroll-padding-top: 100px;

    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    font-variation-settings: "wght" var(--body-weight, 400);	
}

body{
    margin: 0;
    padding: 0;

    /* Stop Hammer from overwriting */
	-webkit-user-select: auto !important;
	user-select: auto !important;
    overscroll-behavior-y: contain;

}


.container{

    > *{
        min-height: 100vh;
        padding: 20px;
        padding-top: 80px;
    }

}
header{

    --header-height: 60px;
    --header-padding: 20px;
    --logo-weight: 500;
    --logo-size: 18px;

    height: var(--header-height);
    width: 100%;
    background-color: var(--background-color);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;

    .left{

        > *{
            display: inline-block;
            vertical-align: middle;
        }

        .title{
            font-size: var(--logo-size);
            font-variation-settings: "wght" var(--logo-weight);
            color: black;
            text-align: left;
            line-height: var(--header-height);
            padding-left: var(--header-padding);
            margin-right: 10px;
        }

        .section{
            opacity: 0.5;
            font-size: var(--logo-size);
            font-variation-settings: "wght" var(--logo-weight);
        }
    }



    a{
        text-decoration: none;
        color: black;
    }
}
.home{

    .grid{

        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        grid-gap: 10px;
        .item{
            width: 200px;
            height: 400px;
            background-color: green;
        }
    }

    a{
        text-decoration: none;
        color: black;
    }
}