@font-face {
	font-family: 'Fira Sans';
	src:
		url('/fonts/FiraSans-Light.woff2') format('woff2'),
		url('/fonts/FiraSans-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Fira Sans';
	src:
		url('/fonts/FiraSans-LightItalic.woff2') format('woff2'),
		url('/fonts/FiraSans-LightItalic.woff') format('woff');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Fira Sans';
	src:
		url('/fonts/FiraSans-Italic.woff2') format('woff2'),
		url('/fonts/FiraSans-Italic.woff') format('woff');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Fira Sans';
	src:
		url('/fonts/FiraSans-Medium.woff2') format('woff2'),
		url('/fonts/FiraSans-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Fira Sans';
	src:
		url('/fonts/FiraSans-Regular.woff2') format('woff2'),
		url('/fonts/FiraSans-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Fira Sans';
	src:
		url('/fonts/FiraSans-MediumItalic.woff2') format('woff2'),
		url('/fonts/FiraSans-MediumItalic.woff') format('woff');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

:root {
	--title-animation: 0.33s;
	--color-red: #c80000;

	--theme-color: #041235;
	--text-color: #fff;
	--blue-color: #179eff;
	--color-environment: #bcda7e;
	--color-social: #6257e2;
	--color-social-opacity: #6257e260;
	--color-governance: #2ac28b;
	--bg-color-light: #f2f0ed;
}

h1,
h2 {
	overflow: hidden;
	position: relative;
	background-image: linear-gradient(var(--color-red), var(--color-red));
	background-size: 0% 4px;
	background-position: left bottom;
	background-repeat: no-repeat;
	transition: background-size 0.33s ease;
}

h1.in-view,
h2.in-view {
	background-size: 100% 4px;
}

* {
	font-family: 'Fira Sans', sans-serif;
	box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Fira Sans', sans-serif;
	font-weight: 500;
	line-height: 1.5;
	margin-bottom: 0.25em;
}

p,
button,
li,
ul,
ol,
a,
option,
select,
input,
label {
	font-family: 'Fira Sans', sans-serif;
	font-weight: normal;
	font-size: 1em;
	line-height: 1.5;
	margin-bottom: 0.25em;
}

h1 > span,
h2 > span {
	display: inline-block;
	transform: translate(-50%, -100%);
	opacity: 0;
}

h1.in-view > span {
	animation-name: animate;
	animation-duration: var(--title-animation);
	animation-delay: var(--delay);
	animation-fill-mode: forwards;
}

h2.in-view > span {
	animation-name: animate;
	animation-duration: var(--title-animation);
	animation-delay: var(--delay);
	animation-fill-mode: forwards;
}

@keyframes animate {
	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}
body {
	min-height: 100vh;
	font-size: 16px;
	margin: 0;
}

h1 {
	font-size: 2.5em;
}

h2 {
	font-size: 2em;
}

h3 {
	font-size: 1.5em;
}

h4 {
	font-size: 1.25em;
}
@media screen and (min-width: 768px) {
	body {
		font-size: 20px;
	}
}

html,
body {
	height: 100%;
}

body {
	min-height: 100vh;
}

a {
	text-decoration: none;
}