@font-face {
    font-family: 'CCWhatchamacallit';
    src: url('./assets/CCWhatchamacallit-Regular.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'CCWhatchamacallit';
    src: url('./assets/CCWhatchamacallit-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'CCWhatchamacallit-Condensed';
    src: url('./assets/CCWhatchamacallit-Condensed-Regular.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'CCWhatchamacallit-Condensed';
    src: url('./assets/CCWhatchamacallit-Condensed-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
/* Reset */
*, *::before, *::after{
    box-sizing: border-box; 
}
*{
    margin: 0; 
    padding: 0; 
}
html {
	-webkit-text-size-adjust: none;
	font-size: 12px;
}
body, html{
	font-family: 'Avenir';
    scroll-behavior: smooth;
	background-color: white;
}
html:focus-within{
    scroll-behavior: smooth; 
}
body {
	font-size: 100%;
}
.underline {
	text-decoration: underline;
}
.font-base {
	font-family: 'CCWhatchamacallit';
}
.font-condensed {
	font-family: 'CCWhatchamacallit-Condensed';
}
img {
	width: 100%;
	height: auto;
}
a {
	text-decoration: none;
}
li {
	list-style-type: none;
}
main {
	max-width: 1200px;
	min-width: 360px;
	min-height: 100dvh;
}
.rounded-xl	{
	border-radius: 0.75rem;
}
.rounded-full {
	border-radius: 9999px;
}
.text-base {
	font-size: 1.25rem;
	line-height: 1.25rem;
}
.text-md {
	font-size: 1.5rem;
	line-height: 2rem;
}
.text-lg {
	font-size: 2rem;
	line-height: 2.5rem;
}
.text-xl {
	font-size: 3rem;
	line-height: 4rem;
}
/* Colors */
.white {
	color: white;
}
.bg-white {
	background-color: white;
}
.green {
	color: #04553f;
}
.bg-green {
	background-color: #004903;
}
.light-green {
	color: #B5D175;
}
.bg-light-green {
	background-color: #B5D175;
}
.brown {
	color: #44362D;
}
.bg-brown {
	background-color: #44362D;
}
.bg-blue {
	background-color: #1f3c6e;
}
.blue {
	color: #1f3c6e;
}
.light-blue {
	color: #bcc4d3;
}
.bg-light-blue {
	background-color: #bcc4d3;
}
.bg-pink {
	background-color: #cf4d5d;
}
.pink {
	color: #cf4d5d;
}
.light-pink {
	color: #f4e6f1;
}
.bg-light-pink {
	background-color: #f4e6f1;
}
.bg-yellow {
	background-color: #e2a615;
}
.yellow {
	color: #e2a615;
}
.light-yellow {
	color: #f9edD0;
}
.bg-light-yellow {
	background-color: #f9edD0;
}
.flex-col {
	display: flex;
	flex-direction: column;
}
.flex-row {
	display: flex;
	flex-direction: row;
}
.grow {
	flex-grow: 1;
}
.justify-center {
	justify-content: center;
}
.align-center {
	align-items: center;
}
.drop-shadow-lg	{
	filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
}
.drop-shadow-xl	{
	filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
}
.drop-shadow-2xl {
	filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
}
.pl-4 {
	padding-left: 1rem;
}
.px-4 {
	padding-left: 1rem;
	padding-right: 1rem;
}
.pb-2 {
	padding-bottom: 0.5rem;
}
.pb-4 {
	padding-bottom: 1rem;
}
.pt-2 {
	padding-top: 0.5rem;
}
.pt-4 {
	padding-top: 1rem;
}
.pb-8 {
	padding-bottom: 2rem;
}
.mb-4 {
	margin-bottom: 1rem;
}
.pb-12 {
	padding-bottom: 3rem;
}

.pb-16 {
	padding-bottom: 4rem;
}
.px-8 {
	padding-left: 2rem;
	padding-right: 2rem;
}
.py-2 {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}
.py-4 {
	padding-top: 1rem;
	padding-bottom: 1rem;
}
.py-8 {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.py-12 {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.py-16 {
	padding-top: 4rem;
	padding-bottom: 4rem;
}
.px-12 {
	padding-left: 3rem;
	padding-right: 3rem;
}
.px-16 {
	padding-left: 4rem;
	padding-right: 4rem;
}
.bold {
	font-weight: bold;
}
.text-center {
	text-align: center;
}
.header-text {
	transform: translateY(-3rem);
}
.scale-5 {
	transform: scale(1.125)
}
.scale-6 {
	transform: scale(1.25)
}
.w-1\/2 {
	width: 50%;
}
.w-2\/3 {
	width: 66.66666%;
}

.w-1\/6 {
	width: 16.66666%;
}
.w-16 {
	width: 4rem;
}
.w-32 {
	width: 8rem;
}
/*
Media queries
*/


@media (min-width: 640px) {

	
	.md\:text-base {
	font-size: 1.25rem;
	line-height: 1.25rem;
	}
	.md\:text-md {
		font-size: 1.5rem;
		line-height: 2rem;
	}
	.md\:text-lg {
		font-size: 2rem;
		line-height: 2.5rem;
	}
	.md\:text-xl {
		font-size: 2.5rem;
		line-height: 3rem;
	}
	.md\:w-16 {
		width: 4rem;
	}
	.md\:w-32 {
		width: 8rem;
	}
}