@font-face{
	font-family: "CAT North";
	src:
	local("CAT North"),
	url("res/cat_north.woff2") format("woff2");
}

*{
	box-sizing: border-box;
}

.flow > *+*{
	margin-top:var(--flow-margin);
}
.rem-flow > *+*{
	--flow-margin:1rem;
	margin-top:var(--flow-margin);
}
html{
		/* COLOR PROPERTIES */
    --indigo-dark:  #896bff;
	--indigo-dark-trans: #4f4b5fbb;
    --indigo-mid:   #a18aff;
    --indigo-light: #d0c4ff;

    --magenta-dark: #ff29c9;
    --magenta-mid:  #ff84e0;
    --magenta-light:#ffb3ec;

    --grey-dark:    #474747;
    --grey-mid:     #8f8f8f;
    --grey-light:   #bababa;

    --off-white:    #e5eaff;

	/* END COLOR PROPERTIES */
	--scale-7:1.15rem;
	--scale-6:calc(var(--scale-7) * 1.15);
	--scale-5:calc(var(--scale-6) * 1.15);
	--scale-4:calc(var(--scale-5) * 1.15);
	--scale-3:calc(var(--scale-4) * 1.15);
	--scale-2:calc(var(--scale-3) * 1.15);
	--scale-1:calc(var(--scale-2) * 1.15);

	--flow-margin:0.75em;

	background-color: var(--off-white);
	color: var(--grey-dark);
	font-family: 'Verdana',sans-serif;
	margin:0;padding:0;

	scrollbar-color: var(--indigo-dark) var(--off-white);
	scroll-behavior: smooth;
}
body{
	margin:0;
	padding:0;
	
}

h1,h2,h3,h4,h5,h6{
	font-family: 'CAT North', sans-serif;
	color: var(--indigo-dark);
	margin-block:0.25em;
}
h1{
	font-weight: 800;
}
h2,h3,h4,h5,h6{
	font-weight: 600;
}
h1, .h1{font-size: var(--scale-1)}
h2, .h2{font-size: var(--scale-2)}
h3, .h3{font-size: var(--scale-3)}
h4, .h4{font-size: var(--scale-4)}
h5, .h5{font-size: var(--scale-5)}
h6, .h6{font-size: var(--scale-6)}
	.h7{font-size: var(--scale-7)}

a:link		{	color:var(--indigo-dark) ;}
a:visited	{	color:var(--indigo-mid);}
a:hover		{	color:var(--indigo-dark) ;}
a:active	{	color:var(--magenta-mid) ;}

img{
	max-width: 100%;
}

.cat{ font-family: 'CAT North'}

.spacer{ height:10em; }

.hidden{ display: none !important; }

@media (prefers-reduced-motion: reduce){
	html{
		scroll-behavior: auto;
	}
}