@import "reset.css";
@import url("https://use.typekit.net/eym3yjt.css");

@font-face {
  font-family: 'monopoly';
  src:
    url('/fonts/monopoly.ttf?ryyids') format('truetype'),
    url('/fonts/monopoly.woff?ryyids') format('woff'),
    url('/fonts/monopoly.svg?ryyids#@{icomoon-font-family}') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

:root{
	--color-main: #362e13;
	--color-background: #e8e4d4;
	--color-main-light: #6d613e;
	--color-green: #80a66a;
	--color-green-light: #c8d8bb;
	--color-red: #eb272a;
	--color-red-light: #f16c60;
	--color-blue: #83b0ae;

	--font-normal: 400;
	--font-medium: 600;
	--font-bold: 700;

	--icon-link: "\e904";
	--icon-linkedin: "\e905";
	--icon-close: "\e913";
	--icon-arrow-down: "\e900";
	--icon-arrow-left: "\e901";
	--icon-arrow-right: "\e902";
	--icon-arrow-up: "\e903";
	--icon-chevron-left: "\e906";
	--icon-chevron-down: "\e907";
	--icon-chevron-right: "\e908";
	--icon-chevron-up: "\e909";
	--icon-circle-chevron-down: "\e90a";
	--icon-circle-chevron-left: "\e90b";
	--icon-circle-chevron-right: "\e90c";
	--icon-circle-chevron-up: "\e90d";

}


body{
	background: var(--color-background);
	color: var(--color-main);
	font-size: 16px;
	font-family: "neue-kabel", sans-serif;
	font-weight: var(--font-normal);
	font-style: normal;
}

.icon-before::before, .icon-after::after{
	font-family: "monopoly";
	font-weight: normal;
	line-height: inherit;
	vertical-align: middle;
	font-style: normal;
	text-decoration: none;
	text-align: center;
	speak: none;
}


.mdContent h1{
	font-size: clamp(1.75rem, 1.25rem + 2.5vw, 2.5rem);
	margin: 0 auto 1em;
	text-transform: uppercase;
	text-align: center;
	max-width: 11em;
}
.mdContent h2{
	font-size: clamp(1.2rem, 1rem + 1vw, 1.5rem);
	margin: 2rem 0 1rem;
}
.mdContent h3{
	font-size: 1rem;
	text-transform: uppercase;
	margin: 2rem 0 0.25rem;
}
.mdContent h4{
	font-size: 1rem;
	font-weight: var(--font-bold);
}
.mdContent p{
	margin-bottom: 1rem;
}
.mdContent a{
	color: var(--color-green);
	font-weight: var(--font-medium);
	text-decoration: none;
	&:hover{
		text-decoration: underline;
	}
}
.mdContent ul{
	margin: 0 0 1rem 0;
	padding: 0 0 0 1.5rem;
}
.mdContent li{
	margin-bottom: 1rem;
}

.icon-before.icon-link::before{ content: "\e904"; }
.icon-before.icon-linkedin::before{ content: "\e905"; }
.icon-before.icon-close::before { content: "\e913"; }
.icon-before.icon-close::before { content: "\e913"; }
.icon-before.icon-close::before { content: "\e913"; }
.icon-before.icon-arrow-down::before { content: "\e900"; }
.icon-before.icon-arrow-left::before { content: "\e901"; }
.icon-before.icon-arrow-right::before { content: "\e902"; }
.icon-before.icon-arrow-up::before { content: "\e903"; }
.icon-before.icon-chevron-left::before { content: "\e906"; }
.icon-before.icon-chevron-down::before { content: "\e907"; }
.icon-before.icon-chevron-right::before { content: "\e908"; }
.icon-before.icon-chevron-up::before { content: "\e909"; }
.icon-before.icon-circle-chevron-down::before { content: "\e90a"; }
.icon-before.icon-circle-chevron-left::before { content: "\e90b"; }
.icon-before.icon-circle-chevron-right::before { content: "\e90c"; }
.icon-before.icon-circle-chevron-up::before { content: "\e90d"; }

.icon-after.icon-link::after{ content: "\e904"; }
.icon-after.icon-linkedin::after{ content: "\e905"; }
.icon-after.icon-close::after { content: "\e913"; }
.icon-after.icon-arrow-down::after { content: "\e900"; }
.icon-after.icon-arrow-left::after { content: "\e901"; }
.icon-after.icon-arrow-right::after { content: "\e902"; }
.icon-after.icon-arrow-up::after { content: "\e903"; }
.icon-after.icon-chevron-left::after { content: "\e906"; }
.icon-after.icon-chevron-down::after { content: "\e907"; }
.icon-after.icon-chevron-right::after { content: "\e908"; }
.icon-after.icon-chevron-up::after { content: "\e909"; }
.icon-after.icon-circle-chevron-down::after { content: "\e90a"; }
.icon-after.icon-circle-chevron-left::after { content: "\e90b"; }
.icon-after.icon-circle-chevron-right::after { content: "\e90c"; }
.icon-after.icon-circle-chevron-up::after { content: "\e90d"; }