body {
		background-color: hsl(47, 88%, 63%);
		max-width: 1440px;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: auto;
		gap: 1rem;
}
	
.attribution { font-size: 11px; text-align: center; padding: 10px; }
.attribution a { color: hsl(228, 45%, 44%); }

@media only screen and (max-width: 100px) {
  body {

  }
}

.card {
		background-color: white;
		min-height: 400px;
		width: 300px;
		max-width: 90%;
		border-radius: 15px;
		border: 1px solid black;
		box-shadow: 10px 10px black;
		transition: all .5s ease-in-out;
}

.card:hover {
		box-shadow: 1rem 1rem 0 black;
		cursor: pointer;
	}
	
.card:hover h1 {
	font-weight: 1000;
	font-style: normal;
	color: hsl(47, 88%, 63%);
	box-shadow: 10 10 10 10;
	transition: all .25s ease-in-out;
	}
}

.flexColumnLeft {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: start;
}

.cardImage {
		width: 260px;
		border-radius: 10px;
		margin-top: 20px;
		margin-left: 20px;
}

.learningButton {
		background-color: hsl(47, 88%, 63%);
		height: 20px;
		max-height: 20px;
		width: 60px;
		border-radius: 2px;
		margin-left: 20px;
		margin-top: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
}

.avatar {
		height: 30px;
		width: 30px;
		border-radius: 100%;
		background-color: hsl(47, 88%, 63%);
		margin-left: 20px;
}


/*====================FONTS====================*/
h1 {
	margin-left: 20px;
	font-family: "Figtree", serif;
	font-size: 20px;
	font-weight: 800;
	font-style: normal;
	color: hsl(0, 0%, 7%);
	}
	
.p1 {
	margin: 0;
	font-family: "Figtree", serif;
	font-size: 10px;
	font-weight: 800;
	font-style: normal;
	color: hsl(0, 0%, 7%);
	}
	
.p2 {
	margin-left: 20px;
	font-family: "Figtree", serif;
	font-size: 11px;
	font-weight: 500;
	font-style: normal;
	color: hsl(0, 0%, 7%);
	}

.p3 {
	margin-left: 20px;
	margin-right: 20px;
	font-family: "Figtree", serif;
	font-size: 12px;
	font-weight: 300;
	font-style: normal;
	color: hsl(0, 0%, 7%);
	}
	
.p4 {
	font-family: "Figtree", serif;
	font-size: 10px;
	font-weight: 800;
	font-style: normal;
	color: hsl(0, 0%, 7%);
	margin-left: 10px;
	}