:root {
	--purple: #6057E4;
	--pink: #E56F97;
	--red: #E94146;
	--dark-red: #991E1E;
	--green: #35B14F;
	--light-green: #6CD2A8;
	--blue: #26B6E3;
	--dark-blue: #2b3a58;
	--light-blue: #74DFE5;
	--yellow: #FDC829;
	--orange: #EC572B;	
}

@supports (color: color(display-p3 1 1 1 / 1)) {
	:root
	{
		--white: color(display-p3 1.00 1.00 1.00 / 1.00);
		--text: color(display-p3 0.297 0.316 0.336 / 1);
		
		--bgtop: color(display-p3 0.15 0 0.48 / 1);
		--bgbottom: color(display-p3 0.08 0 0.24 / 1);
		--red: color(display-p3 0.99 0.33 0.38 / 1);
		--green: color(display-p3 0.17 1 0.58 / 1);
		--dark-green: color(display-p3 0.082 0.928 0.337 / 1);
		--blue: color(display-p3 0.2 0.73 1 / 1);
		--dark-blue: color(display-p3 0.124 0.574 1 / 1);
		--purple: color(display-p3 0.64 0.47 1 / 1);
		--pink: color(display-p3 0.97 0.16 0.56 / 1);
		--orange: color(display-p3 1 0.59 0.3 / 1);
		--deep-orange: color(display-p3 1 0.49 0.12 / 1);
		--yellow: color(display-p3 1 0.83 0.3 / 1);
		--eventbgtop: color(display-p3 0.24 0.1 0.59 / 1);
		--eventbgbottom: color(display-p3 0.22 0.08 0.56 / 1);
		--eventbgtophover: color(display-p3 0.32 0.16 0.70 / 1);
		--eventbgbottomhover: color(display-p3 0.29 0.13 0.67 / 1);
		
		--background-light: color(display-p3 0.996 0.984 0.953 / 1);
		--yellow: color(display-p3 0.945 0.835 0.254 / 1);
		--pink: color(display-p3 0.944 0.437 0.775 / 1);
		--purple: color(display-p3 0.296 0.364 0.718 / 1);
		--orange: color(display-p3 0.949 0.518 0.16 / 1);
		--red: color(display-p3 0.952 0.173 0.103 / 1);
		--blue: color(display-p3 0.211 0.485 0.831 / 1);
		--green: color(display-p3 0.263 0.588 0.259 / 1);
		--test-green: color(display-p3 0.819 0.844 0.49 / 1);
	}
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: ui-monospace, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Arial, Verdana, sans-serif;
	font-weight: 500;
	font-size: 18px;
    -webkit-font-smoothing: antialiased;
    padding: 20px;
    letter-spacing: -.2px;
    background-color: var(--white);
	color: var(--text);
}

article {
	margin: 0 auto;
	max-width: 700px;
}

strong {
	text-transform: uppercase;
	color: #000;
}

p {
	
}

ul {
	list-style: none;
	margin: 40px 0;
	padding: 0;
	color: #aaa;
}

@media only screen and (min-width: 700px) {
	
	body {
		font-size: 30px;
	}
		
}

@media (prefers-color-scheme: dark) {
	
	body {
		background-color: color(display-p3 0.104 0.107 0.109);
		color: var(--white);
	}

}