:root {
	--com-50: #fcecf0;
	--com-100: #f5c3cf;
	--com-200: #f0a6b8;
	--com-300: #e97d97;
	--com-400: #e56483;
	--com-500: #de3d64;
	--com-600: #ca385b;
	--com-700: #9e2b47;
	--com-800: #7a2237;
	--com-900: #5d1a2a;

	--design-50: #fff9e6;
	--design-100: #feedb0;
	--design-200: #fee48a;
	--design-300: #fed854;
	--design-400: #fdd133;
	--design-500: #fdc500;
	--design-600: #e6b300;
	--design-700: #b48c00;
	--design-800: #8b6c00;
	--design-900: #6a5300;

	--dev-50: #e7f9fb;
	--dev-100: #b5eef1;
	--dev-200: #91e5ea;
	--dev-300: #5ed9e1;
	--dev-400: #3fd2db;
	--dev-500: #3fd2db;
	--dev-600: #0eb5bf;
	--dev-700: #0b8d95;
	--dev-800: #086d74;
	--dev-900: #065458;

	--neutral-0: #f8f8fb;
	--neutral-50: #edeaf6;
	--neutral-100: #c6bde2;
	--neutral-200: #ab9dd4;
	--neutral-300: #8470c1;
	--neutral-400: #6d55b5;
	--neutral-500: #482aa2;
	--neutral-600: #422693;
	--neutral-700: #331e73;
	--neutral-800: #281759;
	--neutral-900: #1e1244;

	--project-50: #f5fcf0;
	--project-100: #e1f5d1;
	--project-200: #d3f0bb;
	--project-300: #bfea9d;
	--project-400: #b2e589;
	--project-500: #9fdf6c;
	--project-600: #91cb62;
	--project-700: #719e4d;
	--project-800: #577b3b;
	--project-900: #4f792d;
}

.divider {
	margin-top: 8px;
	height: 4px;
	width: 96px;
	background: linear-gradient(
		90deg,
		rgb(15, 199, 210) 0%,
		rgb(15, 199, 210) 24%,
		rgb(159, 223, 108) 25%,
		rgb(159, 223, 108) 49%,
		rgb(253, 197, 0) 50%,
		rgb(253, 197, 0) 74%,
		rgb(222, 61, 100) 75%,
		rgb(222, 61, 100) 100%
	);
  }

.TemplateSection {
	font-family: "SpaceMono", sans-serif;
	display: flex;
  border-radius: 6.25rem;
  padding: 3.5rem;
  align-items: center;
  gap: 1.5rem;
  background-image: url("../../assets/Background_Light.webp");
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: inset -3px -3px rgba(63, 210, 219, 0.5),
    inset 3px 3px rgba(231, 249, 251, 0.5);
  margin-bottom: 3.5rem;
}

.TemplateSection h2 {
	font-family: "NeueMachina", sans-serif;
	  font-weight: 700;
  font-size: 1.75rem;
  color: var(--neutral-900);
  margin-bottom: 1.5rem;
}
.TemplateSection h3 {
  font-family: "NeueMachina", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--neutral-900);
  margin-bottom: 1.5rem;
}
.TemplateSection img {
  border-radius: 2.75rem;
  width: 15.67956rem;
}

a {
	text-decoration: none;
}
.btn {
	border: none;
	display: inline-flex;
	font-weight: 700;
	height: 2.75rem;
	padding: 1rem;
	align-items: center;
	gap: .5rem;
	flex-shrink: 0;
	border-radius: 6.25rem;
	position: relative;
	overflow: hidden;
	color: #fff;
	transition: all 0.3s ease-in-out;
}

.btn:focus-visible {
    outline: 3px solid;
  }

  .btn-dev {
    color: var(--neutral-900);
    background-color: var(--dev-500);
}
.btn-dev:hover {
  color: var(--neutral-900);
  background-color: var(--dev-500);
  text-decoration: none;
}