/* Light Color Scheme
:root,
:root[data-force-color-mode="light"] {
	color-scheme: light dark;
	--text-color: #000;
	--background-color: #fff;
	--link-color: #00f;
}

@media (prefers-color-scheme: dark) {
	:root {
		--text-color: #fff;
		--background-color: #333;
		--link-color: #2196f3;
	}
}
:root[data-force-color-mode="dark"] {
	--text-color: #fff;
	--background-color: #333;
	--link-color: #2196f3;
} */

/* 
  --primary-light: #ff9a56;
  --primary-med: #ef7627;
  --primary-dark: #d52d00;
  --secondary-light: #d162a4;
  --secondary-med: #b55690;
  --secondary-dark: #a30262;

  --primary-light: hsl(24, 100%, 67%);
  --primary-med: hsl(24, 86%, 55%);
  --primary-dark: hsl(13, 100%, 42%);
  --secondary-light: hsl(324, 55%, 60%);
  --secondary-med: hsl(323, 39%, 52%);
  --secondary-dark: hsl(324, 98%, 32%);

  */

:root {
  --primary-light: hsl(24, 100%, 47%);
  --primary-med: hsl(24, 86%, 35%);
  --primary-dark: hsl(13, 100%, 22%);
  --secondary-light: hsl(324, 55%, 40%);
  --secondary-med: hsl(323, 39%, 32%);
  --secondary-dark: hsl(324, 98%, 12%);
}

body {
  color: #f3f3f3;
  background-color: #301843;
}

a {
  color: hsl(24, 100%, 67%);
}

header,
main {
  margin: 2rem auto;
  width: 90vw;
  max-width: 60rem;
}

section {
  margin: 4rem 0;
  border-radius: 1rem;
}

h2 {
  padding: 0.5rem 1rem;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

section:nth-child(1) {
  background-color: var(--secondary-dark);
}

section:nth-child(1) > h2 {
  background-color: var(--secondary-med);
}

section:nth-child(2) {
  background-color: var(--primary-dark);
}

section:nth-child(2) > h2 {
  background-color: var(--primary-med);
}

.section-body {
  padding: 1rem 2rem;
}

#project-container {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

#project-container > div > img {
  width: 157px;
  height: 125px;
}