@font-face {
    font-family: "Inter";
    src: url("../fonts/InterVariable.2bf3d951bf9d.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
	/* Theme Colors */
	--background-color: #fff;
	--highlight-color: #ff7816;
	--accent-color: #FDF6C9;
	--primary-color: #3D4381;

	--text-color: #ffffff;
	--text-secondary-color: ;
	--text-accent-color: ;
	--highlight-color: ;

	--link-color: #0741ff;

	--text-color-black: #000;
	--text-color-white: #fff;

	--solid-white-color: #fff;
	--solid-black-color: #000;
	/* End Theme Colors */

	/* Status Colors */
	--status-error-color: #ff4040;
	--status-success-color: rgba(138, 255, 143, 0.9);
	--status-notify-color: #ff3526;
	--badge-color: #0790FF;
	/* End Status Colors */

	--scroll-bar-color: #000;

	/* Font Styles */
	--font-light:      300;
	--font-regular:    400;
	--font-medium:     500;
	--font-semi-bold:  600;
	--font-bold:       700;
	--font-extra-bold: 800;
	--font-heavy:      900;
	/* End Font Styles */

	/* Screen Size Website Views */
	--device-view-size: 95%;
	/* End Screen Size Website Views */

	--fam-default: "Inter", sans-serif;
	

	--nav-height: 7.5rem;
}

::-webkit-scrollbar {
    width: 0px;
    height: 7px;
    background: transparent;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background: var(--scroll-bar-color);
    width: 0px;
}

html, body {
	background: var(--background-color);
	width: 100%;
	height: 100%;
	font-size: 16px;
	font-family: var(--fam-default);
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

* {
	box-sizing: border-box;
}

ul {
	padding-left: 0px;
}

nav, header, section, main, footer {
	width: 100%;
	display: flex;
	justify-content: center;
}

input, 
input[type="checkbox"],
input[type="radio"],
input[type="number"],
button {
	-webkit-appearance: none; /* For Webkit browsers (Chrome, Safari, Opera) */
  	-moz-appearance: none;    /* For Mozilla Firefox */
  	appearance: none; 
  	border: none;
  	border-radius: none;
}

.wrapper {
	width: var(--device-view-size);
}

.stop-scrolling {
  overflow: hidden !important;
}

.primary-bg-color {
	background: #000000;
}

.secondary-bg-color {
	background: #0F0F0F;
}

.mobile-tint-color {
	background: #000;
	width: 100%;
	height: 6px;
	position: fixed;
	top: 0px;
	pointer-events: none;
}

.inria-serif-bold {
	font-family: "Inria Serif", serif;
	font-weight: 700;
	font-style: normal;
}

.selected {
	fill: #f56056;
}

.form-field {
	background: #F5F5F5;
	width: 100%;
	border-radius: 5px;
	box-shadow: 0px 0px 0px 1px inset #C8C8C8;
	padding: 15px;
	color: #707070;
	transition: all ease 100ms;
	outline: none;
}

.form-field:focus {
	box-shadow: 0px 0px 0px 2px inset #15202F;
}

.form-field:disabled {
	background: #ffffff;
	box-shadow: none;
	cursor: not-allowed;
}

.next_button__active {
	background: #15202F !important;
	color: white !important;
}

/* Keeps Alpine-controlled elements hidden until Alpine has booted. */
[x-cloak] {
	display: none !important;
}


