@layer main {
	@layer variables {
		:root {
			/* Layout */
			--spacer: 1rem;
			--root-width: 1454px;
			--container-max-width: var(--root-width);
			--container-padding: calc(var(--spacer) * 1.5);
			--section-padding: calc(var(--spacer) * 4);
			--column-gap: var(--spacer);
			--row-gap: 0;

			/* Typography */
			--font-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
			--font-sans: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
			--font-icon: FontAwesome;
			--font-icon-sharp: FontAwesomeSharp;
			--font-brands: FontAwesomeBrands;
			--font-display: var(--font-serif);
			--font-content: var(--font-sans);

			/* Colors */
			--color-black: 0, 0, 0;
			--color-white: 255, 255, 255;
			--color-dark: 20, 10, 10;
			--color-light: 239 237 232;
			--color-blue: 80, 51, 255;
			--color-red: 255, 80, 51;
			--color-green: 51, 255, 80;
			--color-yellow: 221, 255, 51;

			/* Theme */
			--color-primary: var(--color-blue);
			--color-secondary: var(--color-crimson);

			/* Text */
			--color-text: var(--color-dark);
			--color-link: var(--color-blue);
			--color-link-hover: var(--color-red);
			--color-link-visited: var(--color-green);

			/* Buttons */
			--color-btn-primary: var(--color-dark);
			--color-btn-primary-hover: var(--color-blue);
			--color-btn-secondary: var(--color-red);
			--color-btn-secondary-hover: var(--color-blue);
			--color-btn-white: var(--color-white);
			--color-btn-white-hover: var(--color-blue);

			@media(max-width: 768px){
				--section-padding: calc(var(--spacer) * 2.5);
			}
		}
	}
}