:root {
	--whitey: #F0F0F0;
	--lightpurple: #F930A9;
	--deeppurple: #69353F;
	--blacky: #191919;
	--pinky: #EAB7AE;
	--green: #39FF02;
	--yellow: #FFE62C;
}

.tiny5-regular {
  	font-family: "Tiny5", sans-serif;
  	font-weight: 400;
  	font-style: normal;
}

.yellow {
	color: var(--yellow);
}

.whitey {
	color: var(--whitey);
}

/*removes the extra stylings intrinsic to some of the tags*/
.noextras {
	text-decoration: none;
	list-style: none;
}

/* normalize bootstrap's button */
.btn {
	box-shadow: rgb(255, 230, 44) 4px 4px 0px 0px;
	border-radius: 0;
}

body {
	margin: 0;
	padding: 0 1rem 1rem 1rem;
	color: var(--whitey);
	background-color: var(--blacky);

	
	font-family: "Abel", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	
	/*font-family: "Tiny5", sans-serif;
	font-weight: 400;
	font-style: normal;
	*/
	font-size: 1.5rem;

}

@media screen and (min-width: 768px){
	body {
		padding: 0 3rem 3rem 3rem;
	}
}
		
@media screen and (min-width: 1200px){
	body {
		margin: 0 3rem;
	}
}

h1, h2, h3, h4, h5, a {
	/*--lightpurple*/
	color: var(--yellow);
}

a {
	font-weight: 800;
}

p {
	color: var(--whitey);
}

h1 {
	font-size: 4rem;
	margin-top: 10rem;
	margin-bottom: 3.75rem;

}

h2 {
	font-size: 2.75rem;
	margin-top: 7.5rem;
	margin-bottom: 2.625rem;
}

h3 {
	font-size: 2.5rem;
	margin-top: 5rem;
	margin-bottom: 1.875rem;

}

h4 {
	font-size: 2.25rem;
	margin-top: 4rem;
	margin-bottom: 1.25rem;

}

.text-center {
	text-align: center;
}

.card-mine {
	flex-grow: 1;
	background-color: var(--deeppurple);
	position: relative;
	box-shadow: 0.25rem 0.25rem var(--yellow);
	left: -0.125rem;
	overflow: clip;
}

.card-list {
	margin-top: 5rem;
	list-style: none;
	padding: 1rem;
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.card-list-item {
	flex-grow: 1;
	background-color: var(--deeppurple);
	position: relative;
	box-shadow: 0.25rem 0.25rem var(--yellow);
	left: -0.125rem;
	overflow: clip;
	max-width: 100%;
	min-width: 100%;
	aspect-ratio: 1;
}

@media screen and (min-width: 768px){
	h1 {
		font-size: 5rem;
	}

	h2 {
		font-size: 3.5rem;
	}

	.card-mine {
		box-shadow: 0.5rem 0.5rem var(--yellow);
		left: -0.25rem;
	}

	.card-list {
		gap: 2rem;
	}

	.card-list-item {
		max-width: calc(50% - 1rem);
		min-width: calc(33% - 1rem);
		box-shadow: 0.5rem 0.5rem var(--yellow);
		left: -0.25rem;
	}
}

@media screen and (min-width: 1200px){
	h1 {
		font-size: 5rem;
	}

	h2 {
		font-size: 3.5rem;
	}

	.card-mine {
		box-shadow: 1rem 1rem var(--yellow);
		left: -0.5rem;
	}

	.card-list {
		margin-top: 4rem;
		gap: 4rem;
	}

	.card-list-item {
		max-width: calc(33% - 2.462rem);
		min-width: calc(25% - 2.462rem);
		box-shadow: 1rem 1rem var(--yellow);
		left: -0.5rem;
	}
}


.card-list-item-pic {
	filter: opacity(20%);
	height: 100%;
	width: auto;
	margin: auto;
}

.card-list-item-text {
	position: absolute;
    bottom: 0;
    padding: 5% 5%;
    width: 100%;
    backdrop-filter: blur(5px);
    
    mask-clip: border-box;
	mask-composite: add;
	mask-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(255, 255, 255) 10%);
	mask-mode: match-source;
	mask-origin: border-box;
	mask-position-x: 0%;
	mask-position-y: 0%;
	mask-repeat: repeat;
	mask-size: auto
}