@layer base {

	:root {
		--blue: #0096d6;
		--red: #e0001a;
		--lightyellow: #ffffca;
		--yellow: #ffe552;
		--medblue: #badbea;
		--lightpurple: #d5cbdf;
		--lightgray: #e1e1e1;
		--green: #86e486;
		--lightpeach: #fac58c;
		--text: #000000;

		--yellow: #ffe066;
		--lightyellow: #fff9cc;
		--lightblue: #d6e9f5;


		--noto: 'Noto Sans Variable', sans-serif;
		--maxwidth: 52.8125rem;
		--maxwidthwider: 64rem;
		--maxwidthnarrow: 38rem;


		--fontsize-normal: clamp(0.95rem, 0.7977rem + 0.4364vw, 1.125rem);
		--fontsize-teaser: clamp(1rem, 0.8864rem + 0.4848vw, 1.25rem);
		--fontsize-h1: clamp(1.75rem, 0.9545rem + 3.3939vw, 3.5rem);
		--fontsize-h2: clamp(1.25rem, 0.9166rem + 1.5778vw, 1.5rem);
		--fontsize-h3: clamp(1rem, 0.8333rem + 0.8333vw, 1.125rem);
		--fontsize-h4: clamp(1rem, 0.9167rem + 0.4167vw, 1.25rem);
		--fontsize-smallkicker: clamp(0.7rem, 0.6318rem + 0.2909vw, 0.85rem);
		--fontsize-kicker: clamp(0.85rem, 0.6682rem + 0.7758vw, 1.25rem);
		--fontsize-small: clamp(0.9rem, 0.7333rem + 0.3333vw, 1rem);

	}

	@font-face {
		font-family: 'Noto Sans Variable';
		src: url('fonts/noto-sans-latin-wght-normal.woff2') format('woff2');
		font-weight: 100 900;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: 'Noto Sans Variable';
		src: url('fonts/noto-sans-latin-wght-italic.woff2') format('woff2');
		font-weight: 100 900;
		font-style: italic;
		font-display: swap;
	}

	body {
		font-family: var(--noto), sans-serif;
		color: var(--text);
		background-color: var(--blue);
		
	}

	:focus {
		outline: none;
	}
	a:focus-visible, button:focus-visible, form:focus-visible {
		outline: 3px solid #c00;
		outline-offset: 5px;
		-webkit-outline-radius: 4px;
	}

}