@import url('https://fonts.googleapis.com/css2?family=Mali:wght@400;500&text=!%27%2C.AHLMPSTWabcdefghiklmnorstuvwx%20&display=swap');

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	color: #3b3c36;
}

body {
	font-family: 'Mali', cursive;
}

.flex {
	display: flex;
}
.flex-col {
	flex-direction: column;
}
.items-center {
	align-items: center;
}
.justify-center {
	justify-content: center;
}
.gap-2 {
	gap: 0.5rem;
}
.gap-4 {
	gap: 1rem;
}
.shrink {
	flex-shrink: 1;
}
.ml-auto {
	margin-left: auto;
}
.w-full {
	width: 100%;
}

.main-container {
	position: relative;
	min-height: 100vh;
	width: 100%;
	background-color: #fefefa;
	padding: 1rem;
	display: flex;
	justify-content: center;
}

.pattern-bg {
	position: absolute;
	inset: 0;
	z-index: 0;

	background-image:
		linear-gradient(to right, #e7e5e4 1px, transparent 1px),
		linear-gradient(to bottom, #e7e5e4 1px, transparent 1px);
	background-size: 20px 20px;
	background-position:
		0 0,
		0 0;

	-webkit-mask-image:
		repeating-linear-gradient(to right, black 0px, black 3px, transparent 3px, transparent 8px),
		repeating-linear-gradient(to bottom, black 0px, black 3px, transparent 3px, transparent 8px),
		radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%);

	mask-image:
		repeating-linear-gradient(to right, black 0px, black 3px, transparent 3px, transparent 8px),
		repeating-linear-gradient(to bottom, black 0px, black 3px, transparent 3px, transparent 8px),
		radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%);

	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

.card {
	position: relative;
	z-index: 10;
	margin-top: 5rem;
	display: flex;
	flex-direction: column;
	width: 40rem;
	max-width: 100vw;
	height: max-content;
	max-height: 100vh;
	border: 1px solid #e3dac9;
	border-radius: 0.25rem;
	background-color: #fffaf0;
}

@media (max-width: 768px) {
	.card {
		margin-top: 0;
	}
}

.p-4 {
	padding: 1rem;
}
.p-2 {
	padding: 0.5rem;
}

.text-xl {
	font-size: 1.25rem;
}
.text-xs {
	font-size: 0.75rem;
}
.font-medium {
	font-weight: 500;
}

.underline-dotted {
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 4px;
}

.hover-underline:hover {
	text-decoration: underline;
}

.member-card {
	display: flex;
	width: 100%;
	flex-shrink: 1;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.5rem;
	border-radius: 0.25rem;
	border: 1px solid #e3dac9;
}