:root {
	--blue-light: #5EBFAD;
	--blue-medium: #469586;
	--blue-dark: #266156;
	--yellow-light: #FEC581;
	--yellow-medium: #FCAF58;
	--yellow-dark: #9d621e;
	--green-light: #74a672;
	--green-medium: #406B3E;
	--green-dark: #294C27;
	--purple-light: #bd8098;
	--purple-medium: #7C5262;
	--purple-dark: #523249;
	--btn-radius: 15px;
}

@font-face {
	font-family: "DM Sans";
	src: url("font/DM Sans/DMSans-VariableFont_opsz,wght");
}

/* Sizing */
.w-readable {
	max-width: 800px;
}
.h-100vh {
	height: 100vh;
}

/* Utilities */
.invert {
	filter: invert();
}

/* Backgrounds */
.bg-blue-light {
	background-color: var(--blue-light);
}
.bg-blue-medium {
	background-color: var(--blue-medium);
}
.bg-blue-dark {
	background-color: var(--blue-dark);
}
.bg-yellow-light {
	background-color: var(--yellow-light);
}
.bg-yellow-medium {
	background-color: var(--yellow-medium);
}
.bg-yellow-dark {
	background-color: var(--yellow-dark);
}
.bg-green-light {
	background-color: var(--green-light);
}
.bg-green-medium {
	background-color: var(--green-medium);
}
.bg-green-dark {
	background-color: var(--green-dark);
}
.bg-purple-light {
	background-color: var(--purple-light);
}
.bg-purple-medium {
	background-color: var(--purple-medium);
}
.bg-purple-dark {
	background-color: var(--purple-dark);
}

.bg-gradient-h-purple-blue {
	background: linear-gradient(90deg, var(--purple-light) 0%, var(--blue-light) 100%);
}
.bg-gradient-h-green-blue {
	background: linear-gradient(90deg, var(--green-light) 0%, var(--blue-light) 100%);
}

.bg-gradient-h-blue-blue {
	background: linear-gradient(90deg, var(--blue-light) 0%, var(--blue-dark) 100%);
}
.bg-gradient-h-blue-blue-r {
	background: linear-gradient(90deg, var(--blue-dark) 0%, var(--blue-light) 100%);
}
.bg-gradient-h-yellow-yellow {
	background: linear-gradient(90deg, var(--yellow-light) 0%, var(--yellow-dark) 100%);
}
.bg-gradient-h-yellow-yellow-r {
	background: linear-gradient(90deg, var(--yellow-dark) 0%, var(--yellow-light) 100%);
}
.bg-gradient-h-green-green {
	background: linear-gradient(90deg, var(--green-light) 0%, var(--green-dark) 100%);
}
.bg-gradient-h-green-green-r {
	background: linear-gradient(90deg, var(--green-dark) 0%, var(--green-light) 100%);
}
.bg-gradient-h-purple-purple {
	background: linear-gradient(90deg, var(--purple-light) 0%, var(--purple-dark) 100%);
}
.bg-gradient-h-purple-purple-r {
	background: linear-gradient(90deg, var(--purple-dark) 0%, var(--purple-light) 100%);
}

.bg-gradient-30-purple-blue {
	background: linear-gradient(30deg, var(--purple-light) 0%, var(--blue-light) 100%);
}
.bg-gradient-30-green-blue {
	background: linear-gradient(30deg, var(--green-light) 0%, var(--blue-light) 100%);
}

.bg-gradient-30-blue-blue {
	background: linear-gradient(30deg, var(--blue-light) 0%, var(--blue-dark) 100%);
}
.bg-gradient-30-blue-blue-r {
	background: linear-gradient(30deg, var(--blue-dark) 0%, var(--blue-light) 100%);
}
.bg-gradient-30-yellow-yellow {
	background: linear-gradient(30deg, var(--yellow-light) 0%, var(--yellow-dark) 100%);
}
.bg-gradient-30-yellow-yellow-r {
	background: linear-gradient(30deg, var(--yellow-dark) 0%, var(--yellow-light) 100%);
}
.bg-gradient-30-green-green {
	background: linear-gradient(30deg, var(--green-light) 0%, var(--green-dark) 100%);
}
.bg-gradient-30-green-green-r {
	background: linear-gradient(30deg, var(--green-dark) 0%, var(--green-light) 100%);
}
.bg-gradient-30-purple-purple {
	background: linear-gradient(30deg, var(--purple-light) 0%, var(--purple-dark) 100%);
}
.bg-gradient-30-purple-purple-r {
	background: linear-gradient(30deg, var(--purple-dark) 0%, var(--purple-light) 100%);
}

/* Buttons */
.btn {
	border: 0px !important;
	border-radius: var(--btn-radius);
	color: white;
	transition: .3s;
}
.btn:hover {
	filter: brightness(1.1);
	transform: scale(1.1);
}

/* Text */
* {
	font-family: "DM Sans", "Helvetica", "sans serif";
	/* color: black; */
}

h1 {
	font-weight: 900;
}
h2 {
	font-weight: 800;
}
h3 {
	font-weight: 700;
}
h4 {
	font-weight: 600;
}