starry-series/src/styles/global.css


:root {
	/* color  */
	--primary-0: #020530;
	--primary-10: #201560;
	--primary-20: #223588;
	--primary-30: #3229ae;
	--primary-40: #4232cf;
	--primary-50: #445ce3;
	--primary-60: #da691f;
	--primary-70: #91a0f4;
	--primary-80: #b9cdf9;
	--primary-90: #d8e0fc;
	--primary-95: #edeafd;
	--primary-99: #f4f4fe;
	--primary-100: #ffffff;
	--secondary-0: #1c050e;
	--secondary-10: #490e25;
	--secondary-20: #782344;
	--secondary-30: #87224a;
	--secondary-40: #ae285f;
	--secondary-50: #c93978;
	--secondary-60: #dc5898;
	--secondary-70: #e77fb4;
	--secondary-80: #f1b0d3;
	--secondary-90: #f7d3e7;
	--secondary-95: #fae9f3;
	--secondary-99: #fcf3f8;
	--secondary-100: #ffffff;

	/* colores de las propiedades */
	--surface: #4F4360;
	--surface-variant: #e0d8e7;
	--surface-dim: #998da9;
	--surface-bridge: #d6cdee;

	--primary: var(--primary-60);
	--on-surface-primary: var(--primary-10);
	--on-primary: var(--primary-95);

	--secndary: var(--secondary-70);
	--on-surface-secondary: var(--secondary-95);
	--on-secondary: var(--secondary-95);

	/* texto  */
	--text-small: 1.2rem;
	--text-medium: 1.4rem;
	--text-large: 1.6rem;
	--text-x-large: 2rem;
	--text-xx-large: 3.1rem;
	--text-xxx-large: 4.4rem;
	--text-title: 2rem;
	--text-general: 1.6rem;
	--text-button: 1.2rem;
	--font-montserrat: 'Montserrat', sans-serif;
	--max-width: 108rem;
	--site-bg: var(--primary-0);
	--hero-bg: linear-gradient(
		-54deg,
		var(--primary-0) -23%,
		var(--primary-20),
		var(--primary-0) 51%
	);

	--text-gradient: radial-gradient(
		circle farthest-corner at center center,
		#589bff 0%,
		#e78d44 100%
	);
}
*{
	box-sizing: border-box;
}
html {
	font-family: var(--font-montserrat) !important;
	font-size: 62.5%;
	scroll-behavior: smooth;
}
body {
	width: 100%;
	background: var(--site-bg) no-repeat;
	background: var(--site-bg) no-repeat;
}
main {
	align-self: center;
}
p{
	color: var(--primary-100);
	font-size: var(--text-general);
}

.color__gradiente {
	background: var(--text-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.max__width {
	max-width: 117.8rem;
}