common.css

@charset "utf-8";
@import url("//fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400");
@font-face {
	font-family: WoodrowW00-Reg;
	font-style: normal;
	font-weight: normal;
	src: local(WoodrowWW00 Reg), local(WoodrowW00Reg), local(WoodrowW00-Reg), 
		url(WoodrowW00-Reg.woff2) format("woff2"), url(WoodrowW00-Reg.woff) format("woff");
}
:root {
	--big-header-flare-size: 5rem;
	--black: #000002;
	--card-header-font-size: 1.5rem;
	--content-width: 85%;
	--moon-width: 25vw;
	--scroll-speed: -1px;
	--scroll-y: 0;
	--social-button-size: 4rem;
	--star-blur-offset: 0;
	--star-color: #fff;
	--star-pos-x: 0;
	--star-pos-y: 0;
	--star-size-base: 5px;
	--star-size-offset: 0;
	--star-twinkle-offset: 0;
	--twilight-blue: #263773;
	--twilight-blue-transparent: rgba(38, 55, 115, 0.5);
	--twilight-orange: #f47735;
	--twilight-pink: #ed438a;
	--twilight-pink-transparent: rgba(237, 67, 138, 0.5);
	--twilight-purple: #662d8a;
	--twilight-red: #a8005b;
	--twilight-background: #b689c8;
	--dash-background: #9bdbf5;
	--flutter-background: #faf5ab;
	--rarity-background: #eaeef0;
	--pinkie-background: #f5b7d0;
	--apple-background: #faba62;

	--card-background-color: var(--twilight-blue);
	--link-color: var(--twilight-pink);
	--link-active-background-color: var(--twilight-pink-transparent);
	--link-active-color: rgba(18, 188, 117);
	--link-focus-background-color: rgba(18, 188, 117, 0.5);
	--link-visited-color: var(--twilight-orange);
}
* {
	box-sizing: border-box;
	margin: 0;
}
a {
	color: var(--link-color);
	text-decoration: underline;
	text-decoration-style: dotted;
}
a:visited { color: var(--link-visited-color); }
a:focus, a:hover { background-color: var(--link-focus-background-color); }
a:active {
	background-color: var(--link-active-background-color);
	color: var(--link-active-color);
}
abbr { text-decoration: none; }
dfn { font-style: normal; }
html { overflow-x: hidden; }
input:invalid { border: solid 3px red; }
ol ol { list-style-type: lower-alpha; }
ol ol ol { list-style-type: lower-roman; }
summary {
	cursor: pointer;
	list-style-position: outside;
}
svg[role=presentation] {
	height: 0;
	visibility: hidden;
}

@media (prefers-reduced-motion) {
	* {
		animation: none !important;
		transition: none !important;
	}
}
@media (max-width: 1440px) {
	:root {
		--big-header-flare-size: 2.5rem;
		--content-width: 95%;
		--moon-width: 40vw;
		--social-button-size: 3rem;
	}
}