:root {
	--font-main: 'Rise', Sans-Serif;
	--font-scratch: 'I KNOW A GHOST', Serif;
	--font-sub: 'Montserrat', Sans-Serif;
	--font-default: 'Roboto', Sans-Serif;
	
	--font-xxl: 3.1rem;
	--font-xl: 1.25rem;
	--font-lg: 0.75rem;
	--font-md: 0.7rem;
	--font-sm: 0.6rem;
	--font-xs: 0.5rem;
	--font-xxs: 0.4rem;
	--font-text: 0.85rem;
	
	--iconsize: 1.2em;
	
	--primary: #f5f5f5;
	--primary-transparent: rgba(250, 250, 250, 0.6);
	--secondary: #080809;
	--light: #f5f5f5; /* always light */
	--dark: #080809; /* always dark */

	--transparent: rgba(121, 121, 121, 0.45);
	--transparent-color: rgba(21, 21, 23, 0.5);

	--border: 1px solid var(--transparent);
	--border-alt: 2px solid var(--transparent);
	--border-color: var(--transparent);
	
	--body-bg: #48494b;
	--body-color: #3c3c3c;
	--backdrop-color: var(--transparent-color);
	--backdrop-dark: invert(100%) brightness(25%) contrast(160%) grayscale(100%);
	--backdrop-light: contrast(30%) brightness(160%) grayscale(100%);
	
	--backdrop-bg2: invert(100%) brightness(25%) contrast(140%) grayscale(100%);
	--backdrop-bg3: invert(100%) brightness(30%) contrast(130%) grayscale(100%);
	--backdrop-bg4: invert(100%) brightness(25%) contrast(160%) grayscale(100%);
	--backdrop-bg5: invert(100%) brightness(30%) contrast(130%) grayscale(100%);
	--backdrop-bg6: invert(100%) brightness(20%) contrast(140%) grayscale(100%);
	--backdrop-bg7: invert(100%) brightness(30%) contrast(130%) grayscale(100%);
	--backdrop-bg8: invert(100%) brightness(30%) contrast(130%) grayscale(100%);
	--backdrop-bg9: invert(100%) brightness(20%) contrast(140%) grayscale(100%);
	
	--transparent-bg2: rgba(121, 121, 121, 0.45);
	--transparent-bg3: rgba(190, 190, 190, 0.5);
	--transparent-bg4: rgba(121, 121, 121, 0.45);
	--transparent-bg5: rgba(190, 190, 190, 0.5);
	--transparent-bg6: rgba(121, 121, 121, 0.45);
	--transparent-bg7: rgba(190, 190, 190, 0.5);
	--transparent-bg8: rgba(190, 190, 190, 0.5);
	--transparent-bg9: rgba(121, 121, 121, 0.45);
	
	--pink: #c795b4;
	--purple: #aa82d9;
	--blue: #5c9bce;
	--green: #6aa859;
	--yellow: #cebf3c;
	--orange: #cc934e;
	--red: #bb5052;
	--turquoise: #53807a;
	
	--corcra: rgb(142, 93, 202);
	--corcra-transparent: rgba(206, 171, 249, 0.4);
	--dearg: rgb(179, 76, 76);
	--dearg-transparent: rgba(242, 175, 175, 0.4);
	--bandearg: rgb(162, 123, 179);
	--bandearg-transparent: rgba(228, 178, 230, 0.4);
	--gorm: rgb(56, 148, 200);
	--gorm-transparent: rgba(142, 178, 198, 0.4);
	--glas: rgb(70, 134, 64);
	--glas-transparent: rgba(159, 217, 154, 0.4);
	--bui: rgb(255, 233, 83);
	--bui-transparent: rgba(230, 215, 114, 0.4);
	--turcaidghorm: rgb(54, 147, 103);
	--turcaidghorm-transparent: rgba(147, 206, 189, 0.4);
	
	/* images */
	
	--bg: url(../../.././images_horror/bg1_small.jpg);
	--bg-alt: url(../../.././images_horror/bg1-alt_small.jpg);
	--bg-large: url(../../.././images_horror/bg1.jpg);
	--bg-alt-large: url(../../.././images_horror/bg1-alt.jpg);
	
	--bg-pattern: url(../../.././images_horror/pbg.png);
	--skull: url(../../.././images_horror/skull.jpg);
	--skull2: url(../../.././images_horror/skull2.jpg);
	--skull3: url(../../.././images_horror/skull3.jpg);
	--skull4: url(../../.././images_horror/skull4.jpg);
	--faces: url(../../.././images_horror/faces.jpg);
	--drowning: url(../../.././images_horror/drowning.jpg);
	--farm: url(../../.././images_horror/farm.jpg);
	--fog: url(../../.././images_horror/fog.jpg);
	--forest: url(../../.././images_horror/forest.jpg);
	--forumbit-map: url(../../../images_horror/forummap.svg);
	--wolfpine: url(../../.././images_horror/wolfpine.jpg);
	--oldashton: url(../../.././images_horror/oldashton.jpg);
	--tenby: url(../../.././images_horror/tenby.jpg);
	--eastcreek: url(../../.././images_horror/eastcreek.jpg);
	--bullsclaw: url(../../.././images_horror/bullsclaw.jpg);
	--archiv: url(../../.././images_horror/archiv.jpg);
	--berxley: url(../../.././images_horror/berxley.jpg);
	--ilragorn: url(../../.././images_horror/ilragorn.jpg);
	--default-avatar: url(../../.././images_horror/default_avatar.png);
	--default-rpavatar: url(../../.././images_horror/rpchar_avatar.png);
	--default-rpicon: url(../../.././images_horror/rpchar_icon.png);
	--species-1: url(../../.././images_horror/species-1.png);
	--species-2: url(../../.././images_horror/species-2.png);
	--species-3: url(../../.././images_horror/species-3.png);
	--species-4: url(../../.././images_horror/species-4.png);
	--species-5: url(../../.././images_horror/species-5.png);
	--species-6: url(../../.././images_horror/species-6.png);
	
	--overlay-noise: url(../../.././images_horror/overlay-noise.jpg);
	--overlay-pattern: url(../../.././images_horror/overlay-pattern.jpg);
	--overlay-grid: url(../../.././images_horror/overlay-grid.jpg);
	
	/* spacers */
	
	--spacer: 40px;
	--ssmall: 3px;
	--s0: calc(var(--spacer) * 0.125);
	--s1: calc(var(--spacer) * 0.25);
	--s2: calc(var(--spacer) * 0.5);
	--s3: var(--spacer);
	--s4: calc(var(--spacer) * 2);
	--s5: calc(var(--spacer) * 4);
	
	--navbar: var(--s2);
}

@media (min-width: 1930px) {
	:root {
		--font-xxl: 3.6rem;
		--font-xl: 1.5rem;
		--font-lg: 0.9rem;
		--font-md: 0.85rem;
		--font-sm: 0.72rem;
		--font-xs: 0.63rem;
		--font-xxs: 0.55rem;
		--font-text: 1rem;
		
		--spacer: 60px;
		--ssmall: 5px;
	}
}

/* theme selectors */

#onmobile,
#darkmode {
	display: flex !important;
}