@charset "UTF-8";

:root {
	--color-black: #000;
	--color-grey3: #333;
	--color-grey6: #666;
	--color-grey9: #999;
	--color-greyC: #ccc;
	--color-white: #fff;
	--color-yellow: #fddd88; /* rgb(253,221,136) */
	--color-blue: #010a4f; /* rgb(1,10,79); */
	--color-orange: #f4b304; /* rgb(244,179,4) */

	--color-black-alpha1: rgba(0,0,0,0.1);
	--color-black-alpha2: rgba(0,0,0,0.2);
	--color-black-alpha3: rgba(0,0,0,0.3);
	--color-black-alpha4: rgba(0,0,0,0.4);
	--color-black-alpha5: rgba(0,0,0,0.5);
	--color-black-alpha6: rgba(0,0,0,0.6);
	--color-black-alpha7: rgba(0,0,0,0.7);
	--color-black-alpha8: rgba(0,0,0,0.8);
	--color-black-alpha9: rgba(0,0,0,0.9);
	
	--color-blue-alpha1: rgba(1,10,79,0.1);
	--color-blue-alpha2: rgba(1,10,79,0.2);
	--color-blue-alpha3: rgba(1,10,79,0.3);
	--color-blue-alpha4: rgba(1,10,79,0.4);
	--color-blue-alpha5: rgba(1,10,79,0.5);
	--color-blue-alpha6: rgba(1,10,79,0.6);
	--color-blue-alpha7: rgba(1,10,79,0.7);
	--color-blue-alpha8: rgba(1,10,79,0.8);
	--color-blue-alpha9: rgba(1,10,79,0.9);
	
	--color-blue-link-old: #0A344D;

	--vpwidth: calc(100vw);
	--vpheight: calc(100vh);
}

@font-face {
	font-family: "AmaticBold";
	src: 
		url("AmaticSC-Bold.ttf") format("truetype");
}
body {
	background-color: var(--color-blue-alpha5);
	font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: normal;
	font-style: normal;
	font-size: 1em;
	text-align: center;
	color: var(--color-blue);
	margin: 0;
	letter-spacing: 0.1em;
}

footer {
	padding: 10px 20px;
	margin-bottom: 20px;
}

.amatic-sc-regular {
  font-family: "Amatic SC", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.amatic-sc-bold {
  font-family: "Amatic SC", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.pompiere-regular {
  font-family: "Pompiere", sans-serif;
  font-weight: normal;
  font-style: normal;
}

.pompiere-bold {
  font-family: "Pompiere", sans-serif;
  font-weight: bold;
  font-style: normal;
}

.oswald-normal {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}

.oswald-bold {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
}

.black {
	color: var(--color-default-font))
}

.white {
	color: var(--color-white);
}

.yellow {
	color: var(--color-yellow);
}

.orange {
	color: var(--color-orange);
}

.blue {
	color: var(--color-blue);
}

h1 {
	margin: 0;
	font-family: "Amatic SC";
	font-size: 300%;
}

h2 {
	margin: 0 0 20px;
	text-transform: uppercase;
}

h3 {
	margin: 10px 0 10px;
	font-weight: normal;
	font-size: 160%;
}

h4 {
	margin: 10px 0;
	font-weight: normal;
	font-size: 110%;
}

ul {
	margin-top: 5px;
}

.padding-left {
	padding-left: 20px;
}

.link {
	font-family: "Pompiere";
	font-size: 160%;
	font-weight: bold;
	color: var(--color-blue);
	transition: letter-spacing 0.5s;
}

.link:hover, .link:focus {
	letter-spacing: 0.1em;
}

a, a:link, a:visited {
	/* color: inherit; */
}

a:hover, a:active, a:focus {
	/* color: inherit; */
}