/* Andy Bell Modern CSS Reset combined */
* {
	box-sizing: border-box;
	font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
		Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif;
	margin: auto;
}

/* Box sizing rules */
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
	font-family: system-ui, sans-serif;
	background-color: #f6f6f6;
	scroll-behavior: smooth;
 }
 
 /* Set core body defaults */
 body {
	min-height: 100vh;
	text-rendering: optimizeSpeed;
	line-height: 1.5;
 }

 /* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

 /* A elements that don't have a class get default styles */
 a:not([class]) {
	text-decoration-skip-ink: auto;
 }

:root {
	--color-scheme: var(--dark-mode);
	--font-family: system-ui;

	--accent: 124, 58, 237;
	--accent-gradient: linear-gradient(
		180deg,
		hsl(56, 100%, 92%),
		hsl(39, 98%, 50%) 45%,
		hsl(28, 93%, 50%) 90%
	);

	--clr-blue-100: hsl(200, 80%, 80%);
	--clr-blue-200: hsl(200, 80%, 70%);
	--clr-blue-300: hsl(200, 80%, 60%);
	--clr-blue-400: hsl(200, 80%, 50%);
	--clr-blue-500: hsl(200, 80%, 40%);
	--clr-blue-600: hsl(200, 80%, 30%);
	--clr-blue-700: hsl(200, 80%, 20%);
	--clr-blue-800: hsl(200, 80%, 10%);

	--clr-magenta-100: hsl(300, 80%, 80%);
	--clr-magenta-200: hsl(300, 80%, 70%);
	--clr-magenta-300: hsl(300, 80%, 60%);
	--clr-magenta-400: hsl(300, 80%, 50%);
	--clr-magenta-500: hsl(300, 80%, 40%);
	--clr-magenta-600: hsl(300, 80%, 30%);
	--clr-magenta-700: hsl(300, 80%, 20%);
	--clr-magenta-800: hsl(300, 80%, 10%);

	--clr-purple-100: hsl(275, 80%, 80%);
	--clr-purple-200: hsl(275, 80%, 70%);
	--clr-purple-300: hsl(275, 80%, 60%);
	--clr-purple-400: hsl(275, 80%, 50%);
	--clr-purple-500: hsl(275, 80%, 40%);
	--clr-purple-600: hsl(275, 80%, 30%);
	--clr-purple-700: hsl(275, 80%, 20%);
	--clr-purple-800: hsl(275, 80%, 10%);

	--clr-neutral-100: hsl(0, 0%, 80%);
	--clr-neutral-200: hsl(0, 0%, 70%);
	--clr-neutral-300: hsl(0, 0%, 60%);
	--clr-neutral-400: hsl(0, 0%, 50%);
	--clr-neutral-500: hsl(0, 0%, 40%);
	--clr-neutral-600: hsl(0, 0%, 30%);
	--clr-neutral-700: hsl(0, 0%, 20%);
	--clr-neutral-800: hsl(0, 0%, 10%);
	

}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
	html:focus-within {
	 scroll-behavior: auto;
	}
	
	*,
	*::before,
	*::after {
	  animation-duration: 0.01ms !important;
	  animation-iteration-count: 1 !important;
	  transition-duration: 0.01ms !important;
	  scroll-behavior: auto !important;
	}
 }