/* ------------------------------------------------------------------

styling for contents page

--------------------------------------------------------------------- */



#results { display: none; }




/*                                                               */
/* _________________________ CONTAINER _________________________ */
/*                                                               */
.mod-contents { width: 100%; }




/*                                                             		 */
/* _________________________ QUEST DETAILS _________________________ */
/*                                                             		 */


		/* avatar/picture of NPC */

	/* ---- quest card ---- */


			/* container for every single card */
.card-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: center;

	padding-top: .6rem;
}

			/* quest cards */
.q-voice {
	display: flex;
	flex: 3 0 21%;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	position: relative;
	z-index: 1;

	overflow: hidden;
	margin: 0;
	padding: .5rem;
	
	background: aliceblue;

	font-family: Georgia, 'Times New Roman', Times, serif;
    color: #424456;
	text-align: center;

	border: 0.25rem solid #DC9587;
	border-radius: .3rem; 
	box-shadow: .1rem .1rem .4rem 0 #777;

	cursor: default;

	width: auto;
	min-width: calc(50rem / 3 - 0.5rem - 1rem);
	max-width: calc(50rem / 3 - 0.5rem - 1rem);
    min-height: 200px;
    max-height: fit-content;
}

.q-voice:hover {
	pointer-events: visible;
	cursor: pointer;
	box-shadow: .2rem .2rem .7rem 0 #777;
}


			/* quest names */
.quest-name { padding-top: 15%; }

.q-voice > h3 {
	margin: 0;
	padding: 0;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	text-align: center;
	height:min-content;
}


		/* all NPCs in quest */
.quest-info {
	display: none;
	overflow: hidden;
	cursor: default;

	text-align: left;
	list-style: none;
	margin: 0 auto;

	width: 100%;
}



		/*overwrite classles*/
.row { margin: 0; }

.row > .col-4 {
	padding: 0;
	margin:0;
}

		/* specific mini-classes */
.sub-line { border-bottom: 1px solid black; margin-top: .5rem; }


@media (max-width: 62.5rem) {
	.q-voice {
		height: 350px;
		width: 350px;
	}



	@media (min-width: 37.5rem) {
		.row {
			display: flex;
			align-items: stretch;
			justify-content: center;
		}
		.card-wrapper {
			display: flex;
			flex-direction: row;
			justify-content: center;
		
			padding-top: .6rem;
		}
		.q-voice {
			width: auto;
			min-width: 100px;
			max-width: calc(50rem / 3 - 0.5rem - 1rem);
			min-height: 200px;
			max-height: fit-content;
		}	
	}
}

/* Content Modal */

#content-modal {
	display: none;	
	z-index: 100;
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.9);
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

#content-modal > #modal {
	width: 25%;
	max-height: 100%;
	background-color: whitesmoke;
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
	border-radius: 1%;
}

#content-modal > #modal > .head {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}

#content-modal > #modal > .head > .close {
	color: black;
	border: none;
	background-color: transparent;
	display: inline-flex;
    width: 10%;
	padding: 0!important;
}

#content-modal > #modal > .head > .close > svg {
	width: 100%;
	height: 100%;
}

#content-modal > #modal > .head > .close:hover {
	border: none;
	background-color: transparent;
	box-shadow: none;
	border-radius: 0;
	transform: translateY(0);
}

#content-modal > #modal > #content {
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	gap: 5px;
	width: 100%;
}

#content-modal > #modal > #content > .npc {
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#content-modal > #modal > #content > .npc > .image {
	height: 128px;
    width: 128px;
	border-radius: 5px;
}

#content-modal > #modal > #content > .npc > .name {
	font-size: 1.5rem;
	text-decoration: underline;
}

@media  screen and (max-width: 1000px) {
	#content-modal > #modal {
		width: 100%;
	}
}