* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

nav {
	background-color: rgb(65, 65, 65);
	color: rgb(207, 207, 207);
	margin-bottom: 2rem;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}

body {
	background-color:rgb(48, 48, 48);
}

footer {
	background-color: rgba(65, 65, 65, 1);
	position: fixed;
	padding: 1em;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10;
}

h1 {
	text-align: center;
	font-family: 'Odor Mean Chey', serif;
	font-weight: 400;
	font-style: normal;
	font-size: 2rem;
}

h2 {
	font-family: objektiv-mk1, sans-serif;
	font-weight: 700;
	font-style: normal;
}

.collection_intro > h2 {
	font-family: 'Odor Mean Chey', serif;
	font-weight: 400;
}

p {
	font-family: objektiv-mk1, sans-serif;
	font-weight: 400;
	font-style: normal;
}

.collection_intro {
	color: rgb(155, 155, 155);
	text-align: center;
	margin: 5rem auto 0 auto;
	padding-top: 1rem;
	width: min(95%, 120rem);
}

.cardcollection {
	display: grid;
	grid-template: auto / repeat(2, 1fr);
	grid-auto-flow: row;
	gap: 0.75rem;
	margin: 1rem auto 5rem auto;
	width: min(95%, 120rem);
	background-color: rgba(212, 44, 44, 0);
}

.questioncard {
	margin: 1em;
	background-color: rgb(0, 0, 0, 0.2);
}

.questioncard, .questioncard > * {
	border-radius: 0.75rem;
}


/*Question Card Grids*/
.q_pyramid, .q_hagfish, .q_moon, .q_citybuilding, .q_komodo_dragon, .q_deepocean, .q_oldtree, .q_raremineral {	
	display: grid;
	grid-template-rows: repeat(6, 1fr);
	grid-template-columns: repeat(10, 1fr);
	min-height: 15em;
	min-width: 15em;
	max-width: 30em;
	margin: auto;
	overflow: hidden;
}


/*Card Pyramid and content*/
.q_pyramid {
	background: linear-gradient(0deg, rgba(192,167,138,1) 0%, rgba(191,191,183,1) 8%, rgba(191,212,223,1) 30%, rgba(96,176,207,1) 75%, rgba(0,139,191,1) 100%);
}

.text_pyramid {
	grid-area: 1 / 1 / span 6 / span 10;
	width: 40%;
	margin-top: 1.75rem;
	margin-left: 1rem;
	z-index: 5;
	color: #fff;
}

.text_pyramid > p {
	padding-top: 0.75rem;
	font-size: 0.75rem;
	line-height: 1.3;
}

.pyramid_front {
	background: linear-gradient(0deg, rgba(192,158,119,1) 0%, rgba(224,207,184,1) 13%, rgba(198,204,200,1) 25%, rgba(147,128,103,1) 70%, rgba(135,103,92,1) 100%);
	grid-area: 3 / 2 / span 6 / span 6;
	clip-path: polygon(70% 0%, 0% 100%, 100% 100%);
	z-index: 4;
}

.pyramid_front_shadow {
	background: linear-gradient(0deg, rgba(192,158,119,1) 0%, rgba(192,180,185,1) 8%, rgba(170,187,197,1) 20%, rgba(88,84,98,1) 71%, rgba(105,74,80,1) 100%);
	grid-area: 3 / 2 / span 8 / span 8;
	clip-path: polygon(52.6% 0%, 0% 100%, 100% 100%);
	z-index: 3;
}

.pyramid_back {
	background: linear-gradient(0deg, rgba(185,204,215,1) 0%, rgba(185,204,215,1) 20%, rgba(139,133,155,1) 70%, rgba(126,122,142,1) 100%);
	grid-area: 3 / 5 / span 3 / span 4;
	clip-path: polygon(70% 13%, 0% 100%, 100% 100%);
	z-index: 2;
}

.pyramid_back_shadow {
	background: linear-gradient(0deg, rgba(185,204,215,1) 0%, rgba(185,204,215,1) 20%, rgba(110,103,129,1) 71%, rgba(116,122,142,1) 100%);
	grid-area: 3 / 5 / span 3 / span 6;
	clip-path: polygon(46.7% 13%, 0% 100%, 100% 100%);
	z-index: 1;
}


/*Card Hagfish and content*/
.q_hagfish {
	background: linear-gradient(0deg, rgba(27,82,61,1) 0%, rgba(36,71,57,1) 15%, rgba(41,64,54,1) 30%, rgba(20,79,56,1) 73%, rgba(0,94,58,1) 100%);
}

.text_hagfish {
	grid-area: 2 / 2 / span 6 / span 10;
	width: 50%;
	z-index: 5;
	color: #bffff4;
}

.text_hagfish > p {
	padding-top: 0.75rem;
	font-size: 0.75rem;
	line-height: 1.3;
}

.hagfish_head {
	grid-area: 3 / 7 / span 1 / span 2;
	border-radius: 6rem 3rem 3rem 0;
	background: linear-gradient(90deg, rgba(98,102,125,1) 0%, rgba(82,88,113,1) 80%, rgba(65,74,101,1) 100%);
	z-index: 1;
}

.hagfish_body_one {
	grid-area: 4 / 5 / span 1 / span 3;
	border-radius: 6rem 0 6rem 0;
	background: linear-gradient(90deg, rgba(98,102,125,1) 0%, rgba(82,88,113,1) 80%, rgba(65,74,101,1) 100%);
}

.hagfish_body_two {
	grid-area: 5 / 3 / span 1 / span 3;
	height: 50%;
	align-self: start;
	border-radius: 0 0 6rem 6rem;
	background: linear-gradient(90deg, rgba(98,102,125,1) 0%, rgba(82,88,113,1) 80%, rgba(65,74,101,1) 100%);
}

.hagfish_body_three {
	grid-area: 4 / 2 / span 1 / span 2;
	height: 50%;
	align-self: end;
	border-radius: 6rem 6rem 0 0;
	background: linear-gradient(270deg, rgba(98,102,125,1) 0%, rgba(82,88,113,1) 80%, rgba(65,74,101,1) 100%);
}

.hagfish_mouth_outer {
	grid-area: 3 / 8 / span 1 / span 1;
	height: 60%;
	width: 60%;
	margin: 0.3rem;
	align-self: end;
	justify-self: end;
    clip-path: circle();
	background-color: #3f192c;
	z-index: 1;
}

.hagfish_mouth_inner {
	grid-area: 3 / 8 / span 1 / span 1;
	height: 50%;
	width: 50%;
	margin: 0.42rem;
	align-self: end;
	justify-self: end;
    clip-path: circle();
	background: linear-gradient(0deg, #3f2f4f 0%, #3f192c 100%);
	z-index: 1;
}

.hagfish_whisker_one {
	grid-area: 3 / 9 / span 1 / span 1;
	width: 35%;
	height: 17%;
	align-self: center;
	border-radius: 0 6rem 6rem 0;
	background: linear-gradient(90deg, rgba(98,102,125,1) 0%, rgba(125,127,161,1) 80%, rgba(152,152,196,1) 100%);
	z-index: 1; 
}

.hagfish_whisker_two {
	grid-area: 4 / 8 / span 1 / span 1;
	width: 17%;
	height: 40%;
	justify-self: center;
	border-radius: 0 0 6rem 6rem;
	background: linear-gradient(180deg, rgba(98,102,125,1) 0%, rgba(125,127,161,1) 80%, rgba(152,152,196,1) 100%); 
}

.hagfish_whisker_three {
	grid-area: 3 / 8 / span 1 / span 2;
	margin-top: 0.3rem;
	width: 40%;
	height: 17%;
	align-self: center;
	justify-self: center;
	border-radius: 0 6rem 6rem 0;
	background: linear-gradient(135deg, rgba(98,102,125,1) 0%, rgba(98,102,125,1) 60%, rgba(125,127,161,1) 80%, rgba(152,152,196,1) 100%);
	transform: rotate(45deg);
	z-index: 0;
}

.hagfish_whisker_four {
	grid-area: 3 / 8 / span 2 / span 1;
	margin-left: 0.7rem;
	width: 17%;
	height: 40%;
	justify-self: left;
	align-self: center;
	border-radius: 0 0 6rem 6rem;
	background: linear-gradient(180deg, rgba(98,102,125,1) 0%, rgba(98,102,125,1) 60%, rgba(125,127,161,1) 80%, rgba(152,152,196,1) 100%);
	transform: rotate(45deg);
}

.hagfish_detail_one {
	grid-area: 4 / 3 / span 1 / span 1;
	width: 20%;
	height: 20%;
	align-self: end;
	justify-self: center;
	margin-bottom: 0.5rem;
	border-radius: 100%;
	background-color: #8787a8;
}

.hagfish_detail_two {
	grid-area: 4 / 5 / span 1 / span 1;
	width: 20%;
	height: 20%;
	align-self: start;
	justify-self: center;
	margin-top: 0.35rem;
	margin-left: 0.5rem;
	border-radius: 100%;
	background-color: #8787a8;
}

.hagfish_detail_three {
	grid-area: 4 / 6 / span 1 / span 1;
	width: 20%;
	height: 20%;
	align-self: start;
	justify-self: start;
	margin-top: 0.35rem;
	margin-left: 0.45rem;
	border-radius: 100%;
	background-color: #8787a8;
}

.hagfish_detail_four {
	grid-area: 4 / 6 / span 1 / span 1;
	width: 20%;
	height: 20%;
	align-self: start;
	justify-self: end;
	margin-top: 0.35rem;
	margin-right: 0.45rem;
	border-radius: 100%;
	background-color: #8787a8;
}


/*Card Moon and content*/
.q_moon {
	background: linear-gradient(0deg, rgba(83,120,140,1) 0%, rgba(39,82,102,1) 25%, rgba(6,55,74,1) 65%, rgba(0,50,69,1) 100%);
}

.text_moon {
	grid-area: 2 / 1 / span 6 / span 10;
	width: 50%;
	margin-top: 0.5rem;
	align-self: start;
	justify-self: center;
	z-index: 5;
	text-align: center;
	color: #fff;
}

.text_moon > p {
	padding-top: 0.4rem;
	font-size: 0.75rem;
	line-height: 1.3;
}

.moon_body {
	grid-area: 1 / 2 / span 6 / span 8;
	width: 80%;
	justify-self: center;
	position: relative;
	bottom: -60%;
	margin-bottom: 1rem;
	background: linear-gradient(0deg,rgba(98,140,157,1) 0%, rgba(174,199,211,1) 30%, rgba(191,212,223,1) 100%);
	border-radius: 100% 100% 100% 100%;
	box-shadow: 0 0 2rem #fff;
}

.moon_detail_one {
	grid-area: 5 / 6 / span 2 / span 2;
	height: 50%;
	width: 50%;
	align-self: center;
	justify-self: center;
	border-radius: 100%;
	background: linear-gradient(0deg, rgba(0,63,87,0.15) 0%, rgba(0,63,87,0) 100%);
	z-index: 4;
}

.moon_detail_two {
	grid-area: 4 / 4 / span 3 / span 2;
	width: 100%;
	height: 80%;
	align-self: center;
	border-radius: 100%;
	background: linear-gradient(0deg, rgba(0,63,87,0.1) 0%, rgba(0,63,87,0) 100%);
	z-index: 4;
}

.moon_detail_three {
	grid-area: 3 / 5 / span 4 / span 4;
	position: relative;
	bottom: -50%;
	border-radius: 100% 100% 0 0;
	background: linear-gradient(0deg, rgba(0,63,87,0.3) 0%, rgba(0,63,87,0) 100%);
	z-index: 4;
}

.star_tiny_one {
	grid-area: 4 / 2 / span 1 / span 1;
	width: 12%;
	height: 12%;
	align-self: center;
	justify-self: center;
	border-radius: 100%;
	background-color: #bfd4df;
	box-shadow: 0 0 0.5rem #fff;
}

.star_tiny_two {
	grid-area: 2 / 9 / span 1 / span 1;
	width: 11%;
	height: 11%;
	align-self: center;
	justify-self: center;
	border-radius: 100%;
	background-color: #bfd4df;
	box-shadow: 0 0 0.5rem #fff;
}

.star_tiny_three {
	grid-area: 1 / 8 / span 1 / span 1;
	width: 5%;
	height: 5%;
	align-self: end;
	justify-self: start;
	border-radius: 100%;
	margin-bottom: 0.4rem;
	margin-left: 0.4rem;
	background-color: #bfd4df;
	box-shadow: 0 0 0.2rem #fff;
}


/*Card City building and content*/
.q_citybuilding {
	background: linear-gradient(0deg, rgba(242,149,56,1) 0%, rgba(242,149,56,1) 15%, rgba(209,91,0,1) 40%, rgba(143,0,101,1) 100%);
}

.text_citybuilding {
	grid-area: 1 / 1 / span 6 / span 10;
	width: 50%;
	align-self: center;
	justify-self: center;
	z-index: 5;
	text-align: center;
	color: #fff6d4;
}

.text_citybuilding > p {
	padding-top: 0.75rem;
	font-size: 0.75rem;
	line-height: 1.3;
}

.landscape_city_building_one {
	grid-area: 1 / 5 / span 6 / span 2;
	height: 90%;
	align-self: end;
	background: linear-gradient(0deg, rgba(242,89,56,1) 0%, rgba(132,52,46,1) 15%, rgba(31,18,36,1) 50%, rgba(31,18,36,1) 100%);
}

.landscape_city_building_two {
	grid-area: 4 / 10 / span 3 / span 1;
	background: linear-gradient(0deg, rgba(242,89,56,1) 0%, rgba(132,52,46,1) 15%, rgba(31,18,36,1) 50%, rgba(31,18,36,1) 100%);
}

.landscape_city_building_three {
	grid-area: 4 / 3 / span 3 / span 1;
	background: linear-gradient(0deg, rgba(242,89,56,1) 0%, rgba(132,52,46,1) 15%, rgba(31,18,36,1) 50%, rgba(31,18,36,1) 100%);
}

.landscape_city_building_four {
	grid-area: 5 / 2 / span 3 / span 1;
	background: linear-gradient(0deg, rgba(242,89,56,1) 0%, rgba(147,80,60,1) 15%, rgba(64,38,63,1) 50%, rgba(64,38,63,1) 100%);
}

.landscape_city_building_offset_one {
	grid-area: 4 / 4 / span 3 / span 1;
	width: 50%;
	background: linear-gradient(0deg, rgba(242,89,56,1) 0%, rgba(147,80,60,1) 15%, rgba(64,38,63,1) 50%, rgba(64,38,63,1) 100%);
}

.landscape_city_building_offset_two {
	grid-area: 4 / 8 / span 3 / span 2;
	width: 75%;
	justify-self: end;
	background: linear-gradient(0deg, rgba(242,89,56,1) 0%, rgba(147,80,60,1) 15%, rgba(64,38,63,1) 50%, rgba(64,38,63,1) 100%);
}

.landscape_city_building_offset_three {
	grid-area: 5 / 7 / span 3 / span 3;
	width: 66.6%;
	justify-self: center;
	background: linear-gradient(0deg, rgba(242,89,56,1) 0%, rgba(132,52,46,1) 15%, rgba(31,18,36,1) 50%, rgba(31,18,36,1) 100%);
}

.landscape_city_building_offset_four {
	grid-area: 4 / 8 / span 1 / span 1;
	height: 50%;
	align-self: end;
	background: #1f1224;
}

.landscape_city_building_offset_five {
	grid-area: 6 / 1 / span 1 / span 5;
	width: 90%;
	justify-self: end;
	background-color: #260826;
}


/*Card Komodo dragon and content*/
.q_komodo_dragon {
	background: linear-gradient(0deg, rgba(192,167,138,1) 0%, rgba(114,121,99,1) 15%, rgba(87,105,85,1) 30%, rgba(83,107,69,1) 65%, rgba(74,110,35,1) 100%);
}

.text_komodo_dragon {
	grid-area: 1 / 1 / span 6 / span 10;
	width: 90%;
	margin-top: 1rem;
	margin-left: 1rem;
	z-index: 5;
	color: #fff;
}

.text_komodo_dragon > p {
	padding-top: 0.5rem;
	font-size: 0.75rem;
	line-height: 1.3;
}

.komodo_head_base {
	grid-area: 3 / 4 / span 2 / span 5;
	border-radius: 6rem 6rem 6rem 6rem;
	background: linear-gradient(90deg, rgba(153,144,102,1) 0%, rgba(94,78,36,1) 100%);
	z-index: 2;
}

.komodo_tongue_one {
	grid-area: 4 / 3 / span 1 / span 2;
	height: 20%;
	width: 70%;
	align-self: start;
	justify-self: end;
	border-radius: 6rem 0 0 0;
	background: linear-gradient(180deg, rgba(229,177,156,1) 0%, rgba(229,142,134,1) 100%);
}

.komodo_tongue_two {
	grid-area: 4 / 2 / span 1 / span 2;
	height: 20%;
	width: 80%;
	margin-top: 0.5rem;
	margin-right: 0.4rem;
	align-self: start;
	justify-self: end;
	border-radius: 0 0 6rem 6rem;
	background: linear-gradient(180deg, rgba(229,177,156,1) 0%, rgba(229,142,134,1) 100%);
	z-index: 2;
}

.komodo_tongue_three {
	grid-area: 4 / 2 / span 1 / span 1;
	height: 15%;
	width: 50%;
	align-self: start;
	justify-self: center;
	margin-top: 0.2rem;
	margin-right: 1rem;
	border-radius: 6rem 6rem 6rem 6rem;
	background-color: #e5b19c;
	transform: rotate(45deg);
}

.komodo_tongue_four {
	grid-area: 4 / 2 / span 1 / span 1;
	height: 15%;
	width: 40%;
	align-self: start;
	justify-self: start;
	margin-top: 0.5rem;
	border-radius: 6rem 0 0 6rem;
	background-color: #e5b19c;
}

.komodo_head_eyebrow {
	grid-area: 3 / 6 / span 1 / span 1;
	height: 30%;
	width: 55%;
	align-self: start;
	justify-self: end;
	margin-top: 0.35rem;
	clip-path: ellipse();
	background-color: #999066;
	z-index: 2;
}

.komodo_head_nosedot {
	grid-area: 3 / 4 / span 1 / span 1;
	width: 30%;
	height: 20%;
	align-self: center;
	justify-self: center;
	border-radius: 100%;
	background-color: #000;
	transform: rotate(-45deg);
	z-index: 2;
}

.komodo_head_eye {
	grid-area: 3 / 6 / span 1 / span 1;
	width: 33%;
	height: 33%;
	margin-right: 0.25rem;
	align-self: center;
	justify-self: end;
	border-radius: 6rem 6rem 6rem 6rem;
	background-color: #000;
	z-index: 3;
}

.komodo_head_eyesparkle {
	grid-area: 3 / 6 / span 1 / span 1;
	width: 7%;
	height: 7%;
	margin-right: 0.5rem;
	margin-bottom: 0.45rem;
	align-self: center;
	justify-self: end;
	border-radius: 6rem 6rem 6rem 6rem;
	background-color: #fff;
	z-index: 4;
}

.komodo_body_throat {
	grid-area: 4 / 5 / span 3 / span 4;
	width: 60%;
	justify-self: center;
	position: relative;
	bottom: -10%;
	border-radius: 100% 100% 50% 100%;
	background: linear-gradient(270deg, rgba(94,78,36,1) 0%, rgba(64,48,23,1) 100%);
	z-index: 1;
}

.komodo_body_neck {
	grid-area: 3 / 7 / span 2 / span 3;
	border-radius: 0 78% 0 0;
	background-color: #5e4e24;
}

.komodo_body {
	grid-area: 4 / 7 / span 3 / span 4;
	height: 85%;
	align-self: end;
	background-color: #5e4e24;
}


/*Card Deep Ocean and content*/
.q_deepocean {
	background: linear-gradient(0deg, rgba(59,58,74,1) 0%, rgba(28,48,61,1) 30%, rgba(23,46,59,1) 42%, rgba(22,46,59,1) 53%, rgba(13,86,115,1) 80%, rgba(0,139,191,1) 100%);
}

.text_deepocean {
	grid-area: 1 / 1 / span 6 / span 10;
	justify-self: center;
	align-self: end;
	width: 60%;
	margin-bottom: 1.25rem;
	text-align: center;
	z-index: 1;
	color: #b9c0ed;
}

.text_deepocean > p {
	padding-top: 0.4rem;
	font-size: 0.75rem;
	line-height: 1.3;
}

.ocean_rocks {
	background-color: #07161c;
	grid-area: 1 / 1 / span 6 / span 10;
	clip-path: polygon(26% 74%, 32% 100%, 42% 100%, 47% 69%, 49% 41%, 54% 21%, 57% 20%, 63% 33%, 72% 42%, 82% 37%, 90% 34%, 96% 18%, 100% 16%, 100% 100%, 0 100%, 0 15%, 5% 18%, 15% 13%, 22% 25%, 27% 58%);
}


/*Card Oldest Tree and content*/
.q_oldtree {
	background: linear-gradient(0deg, rgba(192,167,138,1) 0%, rgba(191,191,183,1) 28%, rgba(191,212,223,1) 40%, rgba(96,176,207,1) 75%, rgba(0,139,191,1) 100%);
}

.text_oldtree {
	grid-area: 1 / 1 / span 6 / span 10;
	align-self: center;
	width: 45%;
	margin-left: 1rem;
	z-index: 5;
	color: #fff;
}

.text_oldtree > p {
	padding-top: 0.75rem;
	font-size: 0.75rem;
	line-height: 1.3;
}

.ground_base {
	grid-area: 5 / 1 / span 2 / span 10;
	background: linear-gradient(0deg, rgba(161,164,107,1) 0%, rgba(219,204,184,1) 100%);
	height: 90%;
	align-self: end;
}

.tree_trunk_one {
	grid-area: 4 / 5 / span 2 / span 3;
	width: 25%;
	justify-self: center;
	background: linear-gradient(90deg, rgba(133,78,61,1) 0%, rgba(217,159,91,1) 100%);
	transform: skew(135deg);
	z-index: 1;
}

.tree_trunk_two {
	grid-area: 4 / 4 / span 2 / span 3;
	width: 25%;
	margin-left: 1.6rem;
	justify-self: center;
	background: linear-gradient(0deg, rgba(133,78,61,1) 0%, rgba(217,159,91,1) 100%);
	transform: skew(135deg);
	z-index: 1;
}

.tree_trunk_three {
	grid-area: 2 / 5 / span 2 / span 3;
	width: 25%;
	justify-self: center;
	background: linear-gradient(0deg, rgba(133,78,61,1) 0%, rgba(217,159,91,1) 100%);
	transform: skew(45deg);
	z-index: 1;
}

.tree_trunk_four {
	grid-area: 2 / 4 / span 2 / span 3;
	width: 25%;
	margin-left: 1.6rem;
	justify-self: center;
	background: linear-gradient(180deg, rgba(133,78,61,1) 0%, rgba(217,159,91,1) 100%);
	transform: skew(45deg);
	z-index: 1;
}

.tree_branch_one {
	grid-area: 3 / 6 / span 2 / span 3;
	width: 25%;
	margin-left: 1.3rem;
	margin-bottom: 2rem;
	justify-self: center;
	background: linear-gradient(90deg, rgba(93,53,28,1) 0%, rgba(133,78,61,1) 80%, rgba(133,78,61,1) 100%);	
	transform: skew(135deg);
	z-index: 0;
}

.tree_branch_two {
	grid-area: 1 / 4 / span 2 / span 3;
	width: 25%;
	margin-left: 3rem;
	margin-bottom: 1rem;
	margin-top: 1rem;
	justify-self: center;
	background: linear-gradient(90deg, rgba(93,53,28,1) 0%, rgba(133,78,61,1) 80%, rgba(133,78,61,1) 100%);	
	transform: skew(135deg);
	z-index: 0;
}

.tree_branch_three {
	grid-area: 1 / 2 / span 3 / span 3;
	width: 15%;
	margin-left: 4.5rem;
	margin-bottom: 2rem;
	margin-top: 1rem;
	justify-self: center;
	background: linear-gradient(90deg, rgba(93,53,28,1) 0%, rgba(133,78,61,1) 80%, rgba(133,78,61,1) 100%);	
	transform: skew(45deg) rotate(90deg);
	z-index: 0;
}

.tree_branch_four {
	grid-area: 1 / 2 / span 3 / span 3;
	width: 15%;
	margin-left: 5rem;
	margin-bottom: 1rem;
	margin-top: 3rem;
	justify-self: center;
	background: linear-gradient(90deg, rgba(93,53,28,1) 0%, rgba(133,78,61,1) 80%, rgba(133,78,61,1) 100%);	
	transform: skew(135deg) rotate(180deg);
	z-index: 0;
}

.tree_branch_five {
	grid-area: 3 / 8 / span 1 / span 2;
	height: 30%;
	width: 55%;
	margin-left: 1rem;
	justify-self: start;
	align-self: start;
	background: linear-gradient(180deg, rgba(93,53,28,1) 0%, rgba(133,78,61,1) 80%, rgba(133,78,61,1) 100%);	
	z-index: 0;
}

.tree_roots_one {
	grid-area: 5 / 4 / span 1 / span 2;
	position: relative;
	top: 0%;
	left: -26%;
	z-index: 2;
	overflow: hidden;
}

.tree_roots_one:before {
	content: '';
    position: absolute;
    width: 100%;
    height: 100%;
	transform-origin: 100% 0;
	transform: rotate(-45deg);
	background: linear-gradient(90deg, rgba(93,53,28,1) 0%, rgba(133,78,61,1) 90%, rgba(133,78,61,1) 100%);
}

.tree_roots_two {
	grid-area: 5 / 6 / span 1 / span 2;
	position: relative;
	top: 25%;
	left: -85%;
	z-index: 2;
	overflow: hidden;
}

.tree_roots_two:before {
	content: '';
    position: absolute;
    width: 100%;
    height: 100%;
	transform-origin: 100% 0;
	transform: rotate(-45deg);
	background: linear-gradient(90deg, rgba(93,53,28,1) 0%, rgba(133,78,61,1) 80%, rgba(133,78,61,1) 100%);
}

.tree_roots_three {
	grid-area: 4 / 6 / span 2 / span 4;
	position: relative;
	z-index: 0;
	overflow: hidden;
}

.tree_roots_three:before {
	content: '';
    position: absolute;
	top: 0.5rem;
	right: 0.5rem;
    width: 100%;
    height: 100%;
	transform-origin: 0 50%;
	transform: rotate(45deg);
	background: linear-gradient(90deg, rgba(93,53,28,1) 0%, rgba(133,78,61,1) 50%, rgba(133,78,61,1) 100%);
}

.tree_shadow {
	grid-area: 5 / 4 / span 2 / span 4;
	align-self: center;
	margin-top: 0.5rem;
	height: 35%;
	border-radius: 100%;
	background-color: rgba(93, 53, 28, 0.5);
	filter: blur(0.5rem);
}


/*Card Rarest Mineral and content*/
.q_raremineral {
	background: linear-gradient(0deg, rgba(212,203,199,1) 0%, rgba(233,240,242,1) 100%);
}

.text_raremineral {
	grid-area: 1 / 1 / span 6 / span 10;
	width: 60%;
	justify-self: center;
	z-index: 5;
	margin-top: 1.5rem;
	text-align: center;
	color: #808080;
}

.text_raremineral > p {
	padding-top: 0.4rem;
	font-size: 0.75rem;
	line-height: 1.3;
}

.mineral_top {
	grid-area: 3 / 3 / span 2 / span 6;
	height: 40%;
	align-self: end;
	margin-bottom: 1.25rem;
	transform: skew(163deg);
	background: linear-gradient(0deg, rgba(237,142,177,1) 0%, rgba(226,51,105,1) 100%);
	z-index: 0;
}

.mineral_middle {
	grid-area: 4 / 2 / span 2 / span 7;
	width: 87.3%;
	height: 50%;
	align-self: center;
	justify-self: end;
	background: linear-gradient(0deg, rgba(226,51,105,1) 0%, rgba(168,15,71,1) 100%);
	z-index: 1;
}

.mineral_bottom {
	grid-area: 5 / 3 / span 1 / span 6;
	height: 50%;
	align-self: end;
	transform: skew(18deg);
	background: linear-gradient(90deg, rgba(226,51,105,1) 0%, rgba(168,15,71,1) 100%);
	z-index: 0;
	box-shadow: .5rem .3rem 1.2rem #e0004b;
}

.mineral_bottom_detail {
	grid-area: 5 / 3 / span 1 / span 6;
	height: 50%;
	align-self: end;
	background: linear-gradient(90deg, rgba(148,0,57,0) 0%, rgba(148,0,57,1) 30%, rgba(148,0,57,0) 100%);
	z-index: 1;
}

.mineral_rimlight {
	grid-area: 4 / 3 / span 2 / span 6;
	height: 3%;
	align-self: start;
	margin-top: 1.2rem;
	transform: skew(163deg);
	background: linear-gradient(90deg, rgba(255,176,208,0) 0%, rgba(255,176,208,1) 65%, rgba(255,176,208,0) 100%);
	z-index: 2;
}

.mineral_shadowrim {
	grid-area: 4 / 3 / span 2 / span 6;
	height: 3%;
	align-self: end;
	margin-bottom: 1.2rem;
	transform: skew(163deg);
	background: linear-gradient(90deg, rgba(148,0,57,0) 0%, rgba(148,0,57,1) 20%, rgba(148,0,57,1) 90%, rgba(148,0,57,1) 100%);
	z-index: 2;
}

.mineral_rightside {
	grid-area: 3 / 8 / span 3 / span 2;
	width: 28%;
	height: 77%;
	margin-left: 0.5rem;
	align-self: end;
	justify-self: center;
	clip-path: polygon(50% 0, 100% 35%, 100% 75%, 50% 100%, 0 75%, 0 35%);
	background: linear-gradient(180deg, rgba(168,15,71,1) 0%, rgba(120,0,46,1) 100%);
	z-index: 3;
}


/*Footer*/
footer p {
	text-align: center;
	font-size: 0.8rem;
	color: rgb(207, 207, 207);
}


/*Media queries*/
@media screen and (max-width: 45em) {
	.cardcollection {
		grid-template: auto / repeat(1, 1fr);
	}

	.collection_intro {
		color: rgb(155, 155, 155);
		text-align: center;
		margin: 5rem auto 0 auto;
		padding-top: 1rem;
		width: min(85%, 120rem);
	}
}

@media screen and (max-width: 28em) {
	.text_moon {
		width: 70%;
	}
}


@media screen and (max-width: 25em) {
	.text_moon {
		width: 90%;
	}

	.text_raremineral {
		width: 90%;
	}

	.tree_branch_one {
		margin-left: 1.8rem;		
	}

	.tree_branch_three {		
		margin-left: 3rem;		
	}

	.tree_branch_four {
		margin-top: 4,5rem;	
		margin-right: 1rem;	
	}	
}

/*To remember fonts: Odor Mean Chey (Google fonts), Odibee Sans (Google fonts)*/