styles.css

/* Dark mode colors. */
:root {
	--sl-color-accent-low: #122342;
	--sl-color-accent: #245cc3;
	--sl-color-accent-high: #b2caf2;
	--sl-color-white: #ffffff;
	--sl-color-gray-1: #eeeeee;
	--sl-color-gray-2: #c2c2c2;
	--sl-color-gray-3: #8b8b8b;
	--sl-color-gray-4: #585858;
	--sl-color-gray-5: #383838;
	--sl-color-gray-6: #1A1928;
	--sl-color-black: #242839;
}
/* Light mode colors. */
:root[data-theme='light'] {
	--sl-color-accent-low: #c6d8f7;
	--sl-color-accent: #245cc3;
	--sl-color-accent-high: #153061;
	--sl-color-white: #181818;
	--sl-color-gray-1: #272727;
	--sl-color-gray-2: #383838;
	--sl-color-gray-3: #585858;
	--sl-color-gray-4: #8b8b8b;
	--sl-color-gray-5: #c2c2c2;
	--sl-color-gray-6: #eeeeee;
	--sl-color-gray-7: #DDE4F6;
	--sl-color-black: #ffffff;
}

[data-icon] {
	font-size: 30px;
	color: var(--sl-color-accent-high);
}

[data-icon]:hover {
	cursor: pointer;
	color: var(--sl-color-white);
}

.social-icons {
	display: flex;
	align-items: center;
}

.social-icons span {
	display: inline-block;
	padding: 0 7px;
}