/* root styling */
:root {
  --clr-dark-100: #CB997E;
	--clr-light-200: #DDBEA9;
	--clr-light-100: #FFF3Eb;
	--clr-medium-100: #B7B7A4;
	--clr-medium-200: #A5A58D;
	--clr-dark-200: #6B705C;

	--font-main: 'Heebo', sans-serif;
	--font-cursive: 'Pacifico', cursive;
}

/* font styling */
h1 {
	font-size: 2.5em;
	font-family: var(--font-cursive);
	background: linear-gradient(to right, var(--clr-dark-100), var(--clr-light-200), var(--clr-light-100), var(--clr-medium-100), var(--clr-medium-200));
	color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
h2 {
	font-size: 3.5em;
	padding: 0;

	font-family: var(--font-cursive);
	background: linear-gradient(to left, var(--clr-dark-100), var(--clr-light-200), var(--clr-medium-100), var(--clr-medium-200), var(--clr-dark-200));
	color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
h3 {
	font-size: 1.5em;
	color: var(--clr-medium-200);
}

/* links styling */
.nav-links,
.fab {
	padding: 0.3em;

	font-size: 2em;
	color: var(--clr-dark-100);
	text-decoration: none;
}

.fab {
	color: var(--clr-dark-200);
	font-size: 2.5em;
}

.nav-links:hover,
.fab-links:hover {
	color: var(--clr-light-200);
}


/* images and icons styling*/
i {
	padding: .2em;

	font-size: 35px;
	box-shadow: 0 8px 32px 0 rgba(208, 140, 96, 0.37 );
	backdrop-filter: blur( 1.0px );
	-webkit-backdrop-filter: blur( 1.0px );
	border-radius: 10px;
}

/* main body styling */
body {
	margin: auto;
	box-sizing: border-box;

	font-family: var(--font-main);
	text-align: center;
}

/* header stlying */
header {
	margin: -22px 0 0 0;
	padding: 2em;

	background-color: var(--clr-dark-200);
}

.headerFlex {
	display: flex;
	justify-content: space-between;
}

.headerBox {
	margin: auto;
	padding: 0.5em 1em 0 1em;	
}

#headerLinks {
	vertical-align: center;
}


/* game styling */
.cardGrid {
	margin: auto;
	/* background-color: red; */
	display: flex;
	flex-wrap: wrap;
	/* height: 300px; */
	/* width: 400px; */
	height: 30%;
	width: 40%;
}

img {
	height: 25%;
	width: 25%;
}